Τι πρόβλημα υπάρχει στο παρακάτω στιγμιότυπο;

Πρόκειται για πρόβλημα στην επιλογή των γραμματοσειρών που θα απεικονίσουν τους χαρακτήρες ενός κειμένου.
Αυτό που συμβαίνει στο παραπάνω παράδειγμα, είναι ότι ο συγκεκριμένος δικτυακός τόπος καθορίζει και παρέχει μια συγκεκριμένη γραμματοσειρά για την εμφάνιση του κειμένου, ωστόσο η γραμματοσειρά δεν υποστηρίζει το πλήρες σετ χαρακτήρων που χρειάζονται τα ελληνικά. Έτσι, τα όποια ελληνικά που βλέπουμε παραπάνω, είναι από γραμματοσειρές του υπολογιστή μας. Όμως η γραμματοσειρά που υποδεικνύει ο δικτυακός τόπος τυχαίνει να εμπεριέχει χαρακτήρες που αντιστοιχούν στα ελληνικά «Δ», «μ» και «π», οπότε και τα εμφανίζει. Τα υπόλοιπα γράμματα είναι από τη γραμματοσειρά του υπολογιστή μας. Και φαίνονται παράξενα γιατί το ίδιο κείμενο απεικονίζεται από δύο διαφορετικές γραμματοσειρές.
Ποια γραμματοσειρά χρησιμοποιεί ο δικτυακός τόπος; Είναι η Lora, όπως φαίνεται στο δικτυακό τόπο.

Πού θα βρούμε τη γραμματοσειρά Lora; Είναι γραμματοσειρά με κάποιο κόστος; Μάλλον όχι, διότι οι δικτυακοί τόποι που ενσωματώνουν γραμματοσειρές, επιλέγουν γραμματοσειρές που είναι ελεύθερες και δεν έχουν κάποιο κόστος. Και τέτοιες γραμματοσειρές βρίσκουν στο https://fonts.google.com. Ας ρίξουμε μια ματιά. Υπάρχουν 900 οικογένειες γραμματοσειρών, οπότε υπάρχει πολύ υλικό!

Αναζητώντας για Lora, βρίσκουμε τη γραμματοσειρά στο fonts.google.com:

Πράγματι έχει η γραμματοσειρά Lora τους ελληνικούς χαρακτήρες για μ, π και Δ; Πως μπορούμε να δούμε την κάλυψη σε χαρακτήρες από μια γραμματοσειρά; Μπορούμε να την εγκαταστήσουμε στο Ubuntu μας και μετά να δούμε από την εφαρμογή Πίνακας χαρακτήρων. Ή να εγκαταστήσουμε την εφαρμογή fontreport και να την τρέξουμε για τη γραμματοσειρά Lora. Ας εγκαταστήσουμε την εφαρμογή fontreport στο Ubuntu μας σε έναν περιέκτη (container) LXD!
Εγκαθιστώντας το fontreport σε έναν περιέκτη LXD
Δημιουργούμε τον περιέκτη LXD και επιλέγουμε το όνομα fontreport.
$ lxc launch ubuntu:18.04 fontreport
Creating fontreport
Starting fontreport
Μπαίνουμε μέσα στον περιέκτη ως χρήστης ubuntu.
$ lxc exec fontreport -- sudo --user ubuntu --login
To run a command as administrator (user "root"), use "sudo ".
See "man sudo_root" for details.
ubuntu@fontreport:~
Ακολουθούμε τις οδηγίες εγκατάστασης του fontreport.
ubuntu@fontreport:~$ sudo apt-get update
...
ubuntu@fontreport:~$ sudo apt-get install -y python-setuptools texlive-xetex texlive-latex-recommended
...
Κλωνοποιούμε το αποθετήριο του fontreport και εγκαθιστούμε το fontreport.
ubuntu@fontreport:~$ git clone https://github.com/googlei18n/fontreport.git
Cloning into 'fontreport'…
remote: Enumerating objects: 259, done.
remote: Total 259 (delta 0), reused 0 (delta 0), pack-reused 259
Receiving objects: 100% (259/259), 250.31 KiB | 598.00 KiB/s, done.
Resolving deltas: 100% (122/122), done.
ubuntu@fontreport:~$ cd fontreport/
ubuntu@fontreport:~/fontreport$ sudo python setup.py install
Κάνουμε τη λήψη της γραμματοσειράς και εξάγουμε τα αρχεία .ttf από το ZIP.
ubuntu@fontreport:~/fontreport$ cd
ubuntu@fontreport:~$ wget https://fonts.google.com/download?family=Lora -O Lora.zip
ubuntu@fontreport:~$ unzip Lora.zip
Archive: Lora.zip
inflating: OFL.txt
inflating: Lora-Regular.ttf
inflating: Lora-Italic.ttf
inflating: Lora-Bold.ttf
inflating: Lora-BoldItalic.ttf
ubuntu@fontreport:~$
Και τώρα είναι η ώρα να τρέξουμε το fontreport στη γραμματοσειρά Lora!
ubuntu@fontreport:~$ fontreport Lora-Regular.ttf
SUMMARY
Unicode characters: 761
Glyphs: 838
Ligature glyphs: 0
Mark glyphs: 46
Component glyphs: 0
...
UNICODE COVERAGE
...
U+0335 [̵] uni0335 COMBINING SHORT STROKE OVERLAY
U+0336 [̶] uni0336 COMBINING LONG STROKE OVERLAY
U+0393 [Γ] Gamma GREEK CAPITAL LETTER GAMMA
U+0394 [Δ] uni0394 GREEK CAPITAL LETTER DELTA
U+03A0 [Π] Pi GREEK CAPITAL LETTER PI
U+03A9 [Ω] uni03A9 GREEK CAPITAL LETTER OMEGA
U+03BC [μ] uni03BC GREEK SMALL LETTER MU
U+03C0 [π] pi GREEK SMALL LETTER PI
U+0400 [Ѐ] uni0400 CYRILLIC CAPITAL LETTER IE WITH GRAVE
U+0401 [Ё] uni0401 CYRILLIC CAPITAL LETTER IO
...
Οπότε εδώ βλέπουμε ότι η γραμματοσειρά Lora δεν υποστηρίζει ελληνικά, και έχει μερική κάλυψη κάποιων χαρακτήρων. Είναι οι χαρακτήρες Γ, Δ, Π, Ω, μ και π. Αυτοί οι χαρακτήρες έχουν μπει στη γραμματοσειρά διότι έχουν κάποια γενική χρήση. Για παράδειγμα, το «π» είναι για το 3,141592. Το μ είναι για το micro (για παράδειγμα «κάρτα μSD»). Οι περισσότερες γραμματοσειρές που δεν υποστηρίζουν ελληνικά, τυχαίνει να έχουν κάποιους χαρακτήρες. Οπότε, αν επιλέγει κανείς στο διαδίκτυο να δείχνει ελληνικό κείμενο με μια τέτοια ακατάλληλη γραμματοσειρά, τότε το κείμενο θα φανεί με την όποια ελληνική γραμματοσειρά του συστήματός μας, και κάποιοι χαρακτήρες όπως μ και π θα φανούν κάπως παράξενοι (διότι θα προέρχονται από την ακατάλληλη γραμματοσειρά).
Ποιες γραμματοσειρές υποστηρίζουν ελληνικά;
Πάμε πάλι στο fonts.google.com και φιλτράρουμε τις γραμματοσειρές ανάλογα με την υποστήριξη ελληνικών. Κλικ στην αναζήτηση, και απλά στη λίστα Languages θα επιλέξουμε το Greek. (Για υποστήριξη πολυτονικού, θα επιλέγαμε να «Greek Extended»).

Πόσες γραμματοσειρές από τις 900 υποστηρίζουν ελληνικά; Είναι 39 γραμματοσειρές. Βλέπουμε ότι και μια από αυτές είναι και η Ubuntu (προεγκατεστημένη στο Ubuntu).

Αυτή είναι η λίστα των γραμματοσειρών του fonts.google.com που υποστηρίζουν ελληνικά.
- Roboto, από Christian Robertson
- Roboto Condensed, από Christian Robertson
- Roboto Slab, από Christian Robertson
- Roboto Mono, από Christian Robertson
- Open Sans, από Steve Matteson
- Open Sans Condensed, από Steve Matteson
- Source Sans Pro, από Paul D. Hunt
- Ubuntu, από Dalton Maag
- Ubuntu Condensed, από Dalton Maag
- Ubuntu Mono, από Dalton Maag
- Noto Sans, από Google
- Noto Serif, από Google
- Arimo, από Steve Matteson
- Fira Sans, από Carrois Apostrophe
- Fira Sans Condensed, από Carrois Apostrophe
- Fira Sans Extra Condensed, από Carrois Apostrophe
- Fira Mono, από Carrois Apostrophe
- Advent Pro, από Andreas Kalpakidis
- Alegreya, από Huerta Tipográfica
- Alegreya Sans, από Juan Pablo del Peral
- Alegreya Sans SC, από Juan Pablo del Peral
- Alegreya SC, από Huerta Tipográfica
- Anonymous Pro, από Mark Simonson
- Cardo, από David Perry
- Caudex, από Nidud
- Comfortaa, από Johan Aakerlund και Cyreal
- Cousine, από Steve Matteson
- Didact Gothic, από Daniel Johnson και Cyreal
- EB Garamond, από Georg Duffner και Octavio Pardo
- GFS Didot, από Greek Font Society
- GFS Neohellenic, από Greek Font Society
- Jura, από Daniel Johnson και Cyreal
- M PLUS 1p, από Coji Morishita και M+ Fonts Project
- M PLUS Rounded 1c, από Coji Morishita και M+ Fonts Project
- Nova Mono, από Wojciech Kalinowski
- Play, από Jonas Hecksher
- Press Start 2P, από CodeMan38
- Tinos, από Steve Matteson
- Vollkorn, από Friedrich Althausen
Επίλογος
Όταν χρησιμοποιούμε κάποια διαδικτυακή υπηρεσία συγγραφής ή σχεδίασης που επιτρέπει να επιλέξουμε γραμματοσειρές, και χρειάζεται να γράψουμε στα ελληνικά, τότε πρέπει να επιλέξουμε μια γραμματοσειρά που πραγματικά υποστηρίζει ελληνικά.
Στο διαδίκτυο ο προσεκτικός παρατηρητής μπορεί να εντοπίσει κάποιες εικόνες με ελληνικά που κάποιοι από τους χαρακτήρες όπως το μ και το π δεν ταιριάζουν με τα υπόλοιπα γράμματα. Είναι ένα απλό ζήτημα που μπορούμε εύκολα να το αντιμετωπίσουμε, επιλέγοντας τη σωστή γραμματοσειρά.
2 comments
Θαυμάσιο το άρθρο σας, αν και το μεγαλύτερο μέρος δεν το καταλαβαίνει μια άσχετη σαν και εμένα. Αναζητώ όμορφες γραμματοσειρές για την ιστοσελίδα μου – την έχω φτιάξει μόνη μου και δεν βλέπεται σχεδόν, αλλά προσπαθώ ;-). Εννοείτε πως μόνο αυτές οι 39 γραμματοσειρές τελικά υποστηρίζουν σωστά τους ελληνικούς χαρακτήρες, ώστε να εμφανίζονται σωστά σε διαφορετικές συσκευές; Γιατί έχω βρει και άλλες όμορφες γραμματοσειρές για τα Ελληνικά, απλά δεν έχει νόημα να εγκαταστήσω κάποια από αυτές αν τελικά δεν εμφανίζονται στη συσκευή του κάθε χρήστη. Σας ευχαριστώ για τον χρόνο σας!
Author
Τα περισσότερα website δεν καθοριζούν πληροφορίες για γραμματοσειρές, οπότε η κάθε συσκευή του επισκέπτη θα χρησιμοποιήσει τις όποιες γραμματοσειρές είναι εγκατεστημένες στο σύστημά τους. Έτσι, υπάρχει για παράδειγμα μια διαφορά μεταξύ συσκευών με Windows και συσκευών από την Apple, και το πως φαίνεται το website μας.
Μπορούμε ωστόσο να χρησιμοποιήσουμε τα λεγόμενα Web fonts στο website μας, που σημαίνει ότι κάνουμε μια μικροπροσθήκη στο website μας και δίνουμε εντολή στο λογισμικό των επισκεπτών μας να φορτώσουν τη γραμματοσειρά της δικής μας επιλογής, αντί να αφήνεται στην τύχη η επιλογή της γραμματοσειράς.
Η Google έχει συγκεντρώσει πάνω από 900 γραμματοσειρές που διατίθενται με ελεύθερη άδεια ώστε να μπορούμε να τις χρησιμοποιήσουμε ως Web fonts στα website μας. Άλλες γραμματοσειρές που παρέχουν διάφορα website μάλλον δεν είναι νομιμές για χρήση δίχως πληρωμή.
Η υπηρεσία της Google για τις γραμματοσειρές ονομάζεται Google Fonts και μέχρι στιγμής 39 από τις γραμματοσειρές έχουν υποστήριξη και ελληνικών. Το σημαντικό ζήτημα με το Google Fonts είναι ότι φιλοξενεί δωρεάν τα αρχεία των γραμματοσειρών, οπότε δεν χρειάζεται να αποθηκεύσουμε στο website μας. Αρκεί να δηλώσουμε το όνομα, και η γραμματοσειρά θα είναι διαθέσιμη να χρησιμοποιηθεί.
Για όσους χρησιμοποιούν WordPress για το website τους, αρκεί να προσθέσουν το πρόσθετο (addon) https://wordpress.org/plugins/olympus-google-fonts/ Έπειτα, δοκιμάζουν γραμματοσειρές και βλέπουν σε live preview πως φαίνεται το website τους. Στο τέλος ενεργοποιούν τις γραμματοσειρές της επιλογή σους.
Αν το website σου είναι WordPress, τότε το https://wordpress.org/plugins/olympus-google-fonts/ είναι το κατάλληλο πρόσθετο (addon).
Αν είναι κάποια άλλη πλατφόρμα, τότε αναζητάς αν υπάρχει addon με όνομα «Google Fonts».
Οι περισσότερες πλατφόρμες υποστηρίζουν Web fonts μέσω του Google Fonts.