Πώς μετράται το πλάτος του κειμένου;

Το πλάτος του κειμένου αναφέρεται στο οριζόντιο χώρο σε pixel που καταλαμβάνει μια σειρά χαρακτήρων όταν αποδίδεται με συγκεκριμένη γραμματοσειρά, μέγεθος και βάρος. Σε αντίθεση με το πλήθος χαρακτήρων, το πλάτος σε pixel εξαρτάται από την αναλογική απόσταση κάθε glyph — το γράμμα "W" είναι πολύ πιο πλατύ από το "i" στις περισσότερες γραμματοσειρές. Η ακριβής μέτρηση του πλάτους του κειμένου είναι σημαντική για τη διάταξη του UI, την περικοπή ετικετών, τη δυναμική απόδοση canvas και την προσαρμογή συμβολοσειρών σε δοχεία σταθερού πλάτους.

Τα προγράμματα περιήγησης εκθέτουν τη μέθοδο measureText() του HTML5 Canvas API, η οποία υπολογίζει το αποδιδόμενο πλάτος κειμένου χωρίς να το εμφανίζει στην οθόνη. Σχεδιάζοντας σε ένα canvas context εκτός οθόνης, μπορεί να ληφθεί μια ακριβής μέτρηση υποπixel για οποιοδήποτε συνδυασμό οικογένειας γραμματοσειράς, μεγέθους και βάρους.

Περιγραφή εργαλείου

Αυτό το εργαλείο υπολογίζει το πλάτος σε pixel μιας ή δύο συμβολοσειρών κειμένου χρησιμοποιώντας το Canvas API. Επιλέξτε μια οικογένεια γραμματοσειράς, ορίστε το μέγεθος και το βάρος της γραμματοσειράς και δείτε αμέσως το αποδιδόμενο πλάτος σε pixel. Όταν εισάγονται δύο συμβολοσειρές, μια προβολή σύγκρισης εμφανίζει τη διαφορά και την αναλογία πλάτους μεταξύ τους.

Χαρακτηριστικά

  • Υποστηρίζει όλες τις ασφαλείς γραμματοσειρές συστήματος ιστού και προσαρμοσμένα αρχεία γραμματοσειρών που έχουν μεταφορτωθεί (TTF, OTF, WOFF, WOFF2)
  • Συγκρίνετε δύο συμβολοσειρές ταυτόχρονα με στατιστικά διαφοράς και αναλογίας
  • Ρυθμιζόμενο μέγεθος γραμματοσειράς από 1 έως 256 px και όλες τις εννέα τυπικές τιμές βάρους γραμματοσειράς

Πώς λειτουργεί

Το πλάτος μετράται χρησιμοποιώντας το API CanvasRenderingContext2D.measureText() του προγράμματος περιήγησης. Δημιουργείται ένα στοιχείο <canvas> εκτός οθόνης, η ιδιότητα γραμματοσειράς του 2D context ορίζεται ώστε να ταιριάζει με την επιλεγμένη οικογένεια, μέγεθος και βάρος, και το measureText() επιστρέφει το πλάτος του πλαισίου περιορισμού σε pixel. Οι προσαρμοσμένες γραμματοσειρές φορτώνονται στο μητρώο FontFace του προγράμματος περιήγησης πριν από τη μέτρηση, ώστε τα αποτελέσματα να αντικατοπτρίζουν την πραγματική γραμματοσειρά.