1. Προϊόντα
  2.   Font
  3.   JavaScript
  4.   Typr.js
 
  

Δωρεάν JavaScript Βιβλιοθήκη για Ανάλυση & Απόδοση Γραμματοσειρών

Ανοιχτού Κώδικα JavaScript Βιβλιοθήκη Επεξεργασίας Γραμματοσειρών που υποστηρίζει την Ανάλυση και Απόδοση γραμματοσειρών TrueType καθώς και OpenType απευθείας στον Περιηγητή.

Στον χώρο της ανάπτυξης ιστού και λογισμικού, η τυπογραφία παίζει καθοριστικό ρόλο στη διαμόρφωση της συνολικής εμπειρίας του χρήστη. Για να χειρίζονται και να αποδίδουν γραμματοσειρές αποδοτικά, οι προγραμματιστές βασίζονται σε ισχυρές βιβλιοθήκες που απλοποιούν τη διαδικασία. Μία τέτοια βιβλιοθήκη είναι η Typr.js, μια ισχυρή βιβλιοθήκη JavaScript σχεδιασμένη ειδικά για την ανάλυση και απόδοση γραμματοσειρών. Έχει σχεδιαστεί ώστε να είναι ελαφριά, επιτρέποντας γρήγορη ενσωμάτωση σε έργα ιστού. Η βιβλιοθήκη υποστηρίζει όλα τα κύρια προγράμματα περιήγησης, συμπεριλαμβανομένων των Chrome, Firefox, Safari και Edge. Αυτό εξασφαλίζει συνεπή απόδοση γραμματοσειρών σε διαφορετικές πλατφόρμες και συσκευές.

Το Typr.js είναι μια ισχυρή ανοιχτού κώδικα βιβλιοθήκη JavaScript που παρέχει στους προγραμματιστές λογισμικού μια ελαφριά και ευέλικτη λύση για εργασία με διάφορους τύπους αρχείων γραμματοσειρών. Επιτρέπει την ανάλυση και απόδοση γραμματοσειρών TrueType και OpenType απευθείας στον περιηγητή, εξαλείφοντας την ανάγκη για επεξεργασία στο διακομιστή. Αυτό καθιστά το Typr.js ένα ανεκτίμητο εργαλείο για σχεδιαστές και προγραμματιστές ιστοσελίδων που επιδιώκουν να βελτιστοποιήσουν την τυπογραφία στις ιστοσελίδες τους. Η βιβλιοθήκη υποστηρίζει πλήρως την υλοποίηση λειτουργιών προσβασιμότητας, όπως κλιμάκωση κειμένου, ρυθμίσεις διαστήματος γραμμάτων και προσαρμοστική φόρτωση γραμματοσειρών, εξυπηρετώντας χρήστες με διαφορετικές ανάγκες και πολλά άλλα.

Το Typr.js είναι πολύ εύκολο στη χρήση και μπορεί να χρησιμοποιηθεί σε μια ποικιλία διαδικτυακών εφαρμογών, από απλή απόδοση κειμένου έως πιο σύνθετα έργα σχετιζόμενα με την τυπογραφία. Υποστηρίζει απλοποιημένες λειτουργίες όπως η φόρτωση και η διαχείριση γραμματοσειρών σε ιστοσελίδες, η ανάλυση και η εξαγωγή διαφόρων μετρικών από τις γραμματοσειρές, η άνετη διαχείριση και στυλιζάρισμα κειμένου online, η υποστήριξη διεθνοποίησης και τοπικοποίησης, η προχωρημένη τυπογραφία και πολλά άλλα. Το πλούσιο σύνολο χαρακτηριστικών του, η ελαφριά φύση του και η συμβατότητα μεταξύ διαφορετικών προγραμμάτων περιήγησης το καθιστούν ένα ανεκτίμητο εργαλείο για τη βελτίωση της τυπογραφίας στο διαδίκτυο.

Previous Next

Ξεκινώντας με το Typr.js

Ο συνιστώμενος τρόπος εγκατάστασης του Typr.js είναι μέσω npm. Παρακαλώ χρησιμοποιήστε την παρακάτω εντολή για να προσθέσετε την εξάρτηση maven στο έργο σας.

Εγκατάσταση Typr.js μέσω npm

 npm install @fredli74/typr --save-dev

Μπορείτε επίσης να το εγκαταστήσετε χειροκίνητα· κατεβάστε τα τελευταία αρχεία έκδοσης απευθείας από το αποθετήριο GitHub.

Φόρτωση και Διαχείριση Γραμματοσειρών μέσω JavaScript API

Το ανοιχτού κώδικα Typr.js έχει προσφέρει πλήρη υποστήριξη για τη φόρτωση και διαχείριση γραμματοσειρών μέσα σε εφαρμογές JavaScript. Απλοποιεί τη διαδικασία φόρτωσης και διαχείρισης γραμματοσειρών σε ιστοσελίδες. Υποστηρίζει διάφορες μορφές γραμματοσειρών, συμπεριλαμβανομένων των TrueType (TTF), OpenType (OTF) και Web Open Font Format (WOFF), επιτρέποντας στους προγραμματιστές να ενσωματώνουν άψογα προσαρμοσμένες γραμματοσειρές στα έργα τους. Παρέχοντας μια βολική διεπαφή διαχείρισης γραμματοσειρών, το Typr.js επιτρέπει στους προγραμματιστές να ελέγχουν αποδοτικά τη φόρτωση των γραμματοσειρών και να δίνουν προτεραιότητα σε υποσύνολα γραμματοσειρών για βελτιστοποίηση της απόδοσης.

Προσθήκη Αναλυτή Πίνακα SVG για Ανάλυση Χρωματικών Γραμματοσειρών SVG

Typr.SVG = {};
Typr.SVG.parse = function(data, offset, length)
{
  var bin = Typr._bin;
  var obj = { entries: []};

  var offset0 = offset;

  var tableVersion = bin.readUshort(data, offset);  offset += 2;
  var svgDocIndexOffset = bin.readUint(data, offset);  offset += 4;
  var reserved = bin.readUint(data, offset); offset += 4;

  offset = svgDocIndexOffset + offset0;

  var numEntries = bin.readUshort(data, offset);  offset += 2;

  for(var i=0; i < numEntries ; i++)
  {
    var startGlyphID = bin.readUshort(data, offset);  offset += 2;
    var endGlyphID = bin.readUshort(data, offset);  offset += 2;
    var svgDocOffset = bin.readUint(data, offset);  offset += 4;
    var svgDocLength = bin.readUint(data, offset); offset += 4;

    var svg = bin.readASCII(data, offset0 + svgDocOffset + svgDocIndexOffset, svgDocLength);

    for(var f=startGlyphID; f<=endGlyphID; f++){
      obj.entries[f] = svg;
    }
  }

  return obj;

}

Εφαρμογή Μορφοποίησης Κειμένου & Στυλ μέσω JavaScript API

Η ανοιχτού κώδικα βιβλιοθήκη Typr.js καθιστά εύκολο για τους προγραμματιστές λογισμικού να εφαρμόζουν διάφορους τύπους μορφοποίησης κειμένου μέσα σε εφαρμογές JavaScript. Με το Typr.js, οι προγραμματιστές μπορούν αβίαστα να χειρίζονται και να μορφοποιούν το κείμενο σε ιστοσελίδες. Παρέχει ένα εκτενές σύνολο λειτουργιών διάταξης κειμένου, όπως διακοπή γραμμής, στοίχιση κειμένου και συλλαβισμός, επιτρέποντας ακριβή έλεγχο του τρόπου παρουσίασης του κειμένου. Επιπλέον, η βιβλιοθήκη υποστηρίζει μια ευρεία γκάμα επιλογών στυλ κειμένου, συμπεριλαμβανομένου του διαστήματος μεταξύ γραμμάτων, του διαστήματος μεταξύ λέξεων και της διακόσμησης κειμένου, επιτρέποντας στους προγραμματιστές να δημιουργούν οπτικά ελκυστικό και ευανάγνωστο κείμενο.

Εφαρμογή Μορφοποίησης Κειμένου και Στυλ σε Εφαρμογές JavaScript

// Assume that Typr.js library is already loaded

// Define the target element where the text will be formatted and styled
const targetElement = document.getElementById('myTextElement');

// Load and parse the font file using Typr.js
Typr.loadFont('path/to/font.ttf', (font) => {
  // Font loading is complete
  
  // Apply the loaded font to the target element
  targetElement.style.fontFamily = font.name.fontFamily;

  // Set text content for the target element
  targetElement.textContent = 'Hello, Typr.js!';

  // Apply text styling
  targetElement.style.fontSize = '24px';
  targetElement.style.letterSpacing = '2px';
  targetElement.style.wordSpacing = '4px';
  targetElement.style.textDecoration = 'underline';

  // Additional text layout adjustments
  targetElement.style.textAlign = 'center';
  targetElement.style.lineHeight = '1.5';
  targetElement.style.textJustify = 'inter-word';
});

Kerning και Ligatures μέσω JavaScript API

Το Typr.js επιτρέπει στους προγραμματιστές λογισμικού να εκμεταλλεύονται προηγμένες τυπογραφικές λειτουργίες, όπως το κέρνινγκ και οι λιγκάτουρες, για να βελτιώσουν την οπτική ελκυστικότητα του κειμένου. Το κέρνινγκ ρυθμίζει το διάστημα μεταξύ συγκεκριμένων ζευγών χαρακτήρων για να βελτιώσει τη συνολική αναγνωσιμότητα, ενώ οι λιγκάτουρες αντικαθιστούν ακολουθίες χαρακτήρων με οπτικά ευχάριστες εναλλακτικές. Εκμεταλλευόμενοι αυτές τις λειτουργίες, οι προγραμματιστές μπορούν να πετύχουν πιο εκλεπτυσμένη και αρμονική τυπογραφία στο web.

 Ελληνικά