1. Táirgí
  2.   Font
  3.   JavaScript
  4.   OpenType.js
 
  

Leabharlann JavaScript Saor in Aisce do Pharsáil agus Scríobh Clófhocail

Leabharlann JavaScript Foinse Oscailte a cheadaíonn parsáil, léamh agus scríobh clófhocail TrueType nó OpenType. Tacaíonn sé le láimhseáil clófhocail, méadrachtaí glyph agus leagan amach téacs laistigh de fheidhmchláir JS.

Sa ríomhfhórsa mór de dhearadh agus forbairt gréasáin, tá an clóphraitic ag imirt ról lárnach i gcruthú an taithí úsáideora iomlána. Mar sin féin, tá dúshláin ar a leithéid ag obair le clóphraitic ar an ngréasán. Go deas, tá opentype.js, leabharlann JavaScript foinse oscailte, tar éis teacht chun cinn mar uirlis chumhachtach a chuireann cumhacht ar fhorbróirí bogearraí chun an clóphraitic a láimhseáil agus a úsáid i bhfeidhmchláir ghréasáin. Soláthraíonn an leabharlann API simplí agus intuítíve, rud a fhágann go bhfuil sé inrochtana do fhorbróirí de gach leibhéal scileanna. Cuireann sé cumas ar fhorbróirí le solúbthacht chun an clóphraitic a shaincheapadh agus a chur in oiriúint do riachtanais dearaidh ar leith.

Feidhmíonn Opentype.js ar fud raon leathan de bhrabhsálaithe gréasáin nua-aimseartha, rud a fhágann go bhfuil sé ina réiteach iontaofa agus comhsheasmhach chun gnéithe clóghrafaíochta a chur i bhfeidhm. Tá roinnt gnéithe tábhachtacha mar chuid den leabharlann, mar shampla meicníocht láidir parsála cló, idirghníomhú le glyphí aonair laistigh de chló, tacaíocht leagan amach téacs casta, rindreáil clónna éagsúla, comhoiriúnacht trasfhreagraí, a bhaint amach sonraí cló mionsonraithe, tacaíocht leagan amach téacs chun cinn, beochan glyphí aonair agus go leor eile. Tá sé ag comhtháthú go réidh le teicneolaíochtaí gréasáin atá ann cheana agus is féidir é a úsáid le canvas HTML5, SVG, nó fiú i gcomhcheangal le frámaí CSS agus JavaScript.

Is leabharlann JavaScript foinse oscailte é Opentype.js a ligeann d'fhorbróirí gréasáin oibriú le clónna OpenType, formáid cló a úsáidtear go forleathan. Soláthraíonn clónna OpenType gnéithe clóghrafaíochta ardleibhéil, mar shampla ceangail, coiriúint, agus ionadú glífeanna, a fheabhsaíonn go mór an tarraingt amhairc agus an léitheacht téacs. Trí úsáid a bhaint as opentype.js, is féidir le forbróirí bogearraí na gnéithe seo a dhíghlasáil agus rochtain a fháil ar na sonraí bunúsacha de chlónna OpenType, rud a chuireann ar chumas acu taithí clóghrafaíochta dinimiciúla agus idirghníomhacha a chruthú ar an ngréasán. Bíodh sé ag fíneáil sonraí clóghrafaíochta nó ag cruthú beochan clóghrafaíochta casta, is uirlis luachmhar é Opentype.js do dhuine ar bith a bhfuil paisean aige/aici le healaín na clóghrafaíochta sa réimse digiteach.

Previous Next

Ag Tosú le Opentype.js

Is é an bealach molta chun Opentype.js a shuiteáil ná úsáid npm. Úsáid an t-ordú seo a leanas le spleáchas maven a chur le do thionscadal, le do thoil.

Suiteáil Opentype.js trí npm

 npm install opentype.js

Is féidir leat é a shuiteáil de láimh freisin; íoslódáil na comhaid eisiúna is déanaí go díreach ón stór GitHub.

Rochtain ar Sonraí Cló trí API JavaScript

Ceann de na gnéithe eochair de OpenType.js ná a chumas sonraí clófhocail mionsonraithe a bhaint amach le cúpla líne amháin de chód JavaScript. Tá an leabharlann Opentype.js foinse oscailte tar éis feidhmiúlacht iomlán a sholáthar chun sonraí a bhaineann le Clófhocail a luchtú agus a rochtain a fháil laistigh de a n-iarratais JavaScript. Is féidir le forbróirí rochtain a fháil ar éagsúlacht tréithe cosúil le hainm an chló, eolas an dhearthóra, cruthanna glyph, péirí kerning, agus go leor eile. Cuireann an t-eolas seo cumas rialaithe cruinn ar an typagrafaíocht ar fáil agus cuireann sé ar chumas taithí chruthaitheach. Taispeánann an sampla thíos conas sonraí a bhaineann le clófhocail a luchtú agus a thaispeáint ag baint úsáide as orduithe JavaScript.

Conas Sonraí a Bhaineann le Clónna a Thaispeáint i Aipeanna JavaScript?

function displayFontData() {
    document.getElementById("font-data").innerHTML = JSON.stringify(font.tables, null, 4);
	var html, tablename, table, property, value;
	for(tablename in font.tables) {
		table = font.tables[tablename];
		html = '';
		for(property in table) {
			value = table[property];
			html += '
'+property+'
';
			html += value;
			html += '
';
		}
		document.getElementById(tablename+"-table").innerHTML = html;
	}
}

function onFontLoaded(font) {
@@ -331,6 +384,13 @@ 
Bogearraí Saor

fontSizeSlider.addEventListener('input', fontSizeChanged, false);
fontSizeSlider.addEventListener('change', fontSizeChanged, false);

var tableHeaders = document.getElementById('font-data').getElementsByTagName('h3');
for(var i = tableHeaders.length; i--; ) {
	tableHeaders[i].addEventListener('click', function(e) {
		e.target.className = (e.target.className === 'collapsed') ? 'expanded' : 'collapsed';
	}, false);
}

opentype.load(fontFileName, function (err, font) {
    var amount, glyph, ctx, x, y, fontSize;
    if (err) {
        showErrorMessage(err.toString());
        return;
    }
    onFontLoaded(font);
});

Oscail & Parsáil Clónna laistigh de Aipeanna JavaScript

Cuireann an leabharlann Opentype.js foinse oscailte ar chumas forbróirí bogearraí clófhocail éagsúla a luchtú agus a thiontú laistigh dá n-iarratais JavaScript féin. Soláthraíonn an leabharlann meicníocht láidir parsála clófhocail, ag ligean do fhorbróirí comhaid clófhocail OpenType (WOFF, OTF, TTF) a luchtú isteach ina n-iarratais ghréasáin. Nuair a bhíonn an cló luchtaithe, is féidir le forbróirí rochtain a fháil ar agus maighnéad a dhéanamh ar éagsúlacht airíonna clófhocail, mar shampla cruthanna glyph, méadrachtaí, agus meiteashonraí. Taispeánann an sampla thíos conas a Luchtú cineálacha éagsúla clófhocail mar WOFF, OTF, TTF laistigh de apps JavaScript.

Conas Clónna WOFF nó TTF a Lódáil trí API JavaScript?

// case 1: from an URL
const buffer = fetch('/fonts/my.woff').then(res => res.arrayBuffer());
// case 2: from filesystem (node)
const buffer = require('fs').promises.readFile('./my.woff');
// case 3: from an 
const buffer = document.getElementById('myfile').files[0].arrayBuffer();

// if running in async context:
const font = opentype.parse(await buffer);
console.log(font);

// if not running in async context:
buffer.then(data => {
    const font = opentype.parse(data);
    console.log(font);
})
 Gaeilge