Προβλήματα με γραμματοσειρές και ελληνικά (πρόβλημα με μ και π)

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

Πρόκειται για πρόβλημα στην επιλογή των γραμματοσειρών που θα απεικονίσουν τους χαρακτήρες ενός κειμένου.

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

Ποια γραμματοσειρά χρησιμοποιεί ο δικτυακός τόπος; Είναι η Lora, όπως φαίνεται στο δικτυακό τόπο.

Γραμματοσειρά Lora.

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

Ιστοσελίδα https://fonts.google.com

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

Γραμματοσειρά Lora

Πράγματι έχει η γραμματοσειρά 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 που υποστηρίζουν ελληνικά.

  1. Roboto, από Christian Robertson
  2. Roboto Condensed, από Christian Robertson
  3. Roboto Slab, από Christian Robertson
  4. Roboto Mono, από Christian Robertson
  5. Open Sans, από Steve Matteson
  6. Open Sans Condensed, από Steve Matteson
  7. Source Sans Pro, από Paul D. Hunt
  8. Ubuntu, από Dalton Maag
  9. Ubuntu Condensed, από Dalton Maag
  10. Ubuntu Mono, από Dalton Maag
  11. Noto Sans, από Google
  12. Noto Serif, από Google
  13. Arimo, από Steve Matteson
  14. Fira Sans, από Carrois Apostrophe
  15. Fira Sans Condensed, από Carrois Apostrophe
  16. Fira Sans Extra Condensed, από Carrois Apostrophe
  17. Fira Mono, από Carrois Apostrophe
  18. Advent Pro, από Andreas Kalpakidis
  19. Alegreya, από Huerta Tipográfica
  20. Alegreya Sans, από Juan Pablo del Peral
  21. Alegreya Sans SC, από Juan Pablo del Peral
  22. Alegreya SC, από Huerta Tipográfica
  23. Anonymous Pro, από Mark Simonson
  24. Cardo, από David Perry
  25. Caudex, από Nidud
  26. Comfortaa, από Johan Aakerlund και Cyreal
  27. Cousine, από Steve Matteson
  28. Didact Gothic, από Daniel Johnson και Cyreal
  29. EB Garamond, από Georg Duffner και Octavio Pardo
  30. GFS Didot, από Greek Font Society
  31. GFS Neohellenic, από Greek Font Society
  32. Jura, από Daniel Johnson και Cyreal
  33. M PLUS 1p, από Coji Morishita και M+ Fonts Project
  34. M PLUS Rounded 1c, από Coji Morishita και M+ Fonts Project
  35. Nova Mono, από Wojciech Kalinowski
  36. Play, από Jonas Hecksher
  37. Press Start 2P, από CodeMan38
  38. Tinos, από Steve Matteson
  39. Vollkorn, από Friedrich Althausen

Επίλογος

Όταν χρησιμοποιούμε κάποια διαδικτυακή υπηρεσία συγγραφής ή σχεδίασης που επιτρέπει να επιλέξουμε γραμματοσειρές, και χρειάζεται να γράψουμε στα ελληνικά, τότε πρέπει να επιλέξουμε μια γραμματοσειρά που πραγματικά υποστηρίζει ελληνικά.

Στο διαδίκτυο ο προσεκτικός παρατηρητής μπορεί να εντοπίσει κάποιες εικόνες με ελληνικά που κάποιοι από τους χαρακτήρες όπως το μ και το π δεν ταιριάζουν με τα υπόλοιπα γράμματα. Είναι ένα απλό ζήτημα που μπορούμε εύκολα να το αντιμετωπίσουμε, επιλέγοντας τη σωστή γραμματοσειρά.

Permanent link to this article: https://blog.simos.info/%cf%80%cf%81%ce%bf%ce%b2%ce%bb%ce%ae%ce%bc%ce%b1%cf%84%ce%b1-%ce%bc%ce%b5-%ce%b3%cf%81%ce%b1%ce%bc%ce%bc%ce%b1%cf%84%ce%bf%cf%83%ce%b5%ce%b9%cf%81%ce%ad%cf%82-%ce%ba%ce%b1%ce%b9-%ce%b5%ce%bb%ce%bb/

2 comments

  1. Θαυμάσιο το άρθρο σας, αν και το μεγαλύτερο μέρος δεν το καταλαβαίνει μια άσχετη σαν και εμένα. Αναζητώ όμορφες γραμματοσειρές για την ιστοσελίδα μου – την έχω φτιάξει μόνη μου και δεν βλέπεται σχεδόν, αλλά προσπαθώ ;-). Εννοείτε πως μόνο αυτές οι 39 γραμματοσειρές τελικά υποστηρίζουν σωστά τους ελληνικούς χαρακτήρες, ώστε να εμφανίζονται σωστά σε διαφορετικές συσκευές; Γιατί έχω βρει και άλλες όμορφες γραμματοσειρές για τα Ελληνικά, απλά δεν έχει νόημα να εγκαταστήσω κάποια από αυτές αν τελικά δεν εμφανίζονται στη συσκευή του κάθε χρήστη. Σας ευχαριστώ για τον χρόνο σας!

    1. Τα περισσότερα 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.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.