Τυπογραφικός χάρακας
Δες πόσο φυσικό χώρο πιάνει το κείμενό σου σε διάφορες γραμματοσειρές, πάνω σε μιλιμετρέ χαρτί. Πρώτα πες μου το DPI της οθόνης σου, ώστε τα εκατοστά και οι στιγμές (points) να είναι αληθινά, όχι υποθετικά.
Μετατροπή pixel ↔ στιγμές
Επίλεξε ποιες να συγκρίνεις. Το εγκατεστημένη σημαίνει ότι υπάρχει στο σύστημά σου· το υποκατάστατο ότι ο browser τη δείχνει με άλλη (άρα η μέτρηση αφορά την άλλη).
Η στιγμή (point, pt) είναι φυσική μονάδα: 1 pt = 1/72 της ίντσας, σταθερό πάνω στο τζάμι. Το CSS pixel δεν είναι, το μέγεθός του εξαρτάται από την οθόνη. Η γέφυρα χρειάζεται δύο πράγματα: το DPI (τα device pixel ανά ίντσα, το δίνεις εσύ) και το DPR (πόσα device pixel αντιστοιχούν σε 1 CSS pixel, το διαβάζει ο browser).
Ο τύπος: 1 CSS px = (72 × DPR) / DPI στιγμές. Στη δική σου οθόνη: DPI —, DPR —, άρα CSS ppi — (= DPI/DPR, πόσα CSS px χωράνε σε μία φυσική ίντσα). Από εκεί: 1 px = — pt, 1 pt = — px. Και το device pixel (= css ÷ DPR, ίσο με hardware μόνο χωρίς scaling): 1 device pixel = — pt.
Τέσσερα «pixel» που συχνά μπερδεύονται, από το πιο νοητό στο πιο υλικό:
| Όνομα | Τι είναι | Σταθερό; | Το έχουμε; |
|---|---|---|---|
| css pixel | η λογική μονάδα του browser για τη διάταξη | Όχι, αλλάζει με το zoom | ✓1 |
| logical pixel | λογικό pixel του λειτουργικού (point / DIP) | Όχι, αλλάζει με το scaling | ✓ |
| device pixel | η επιφάνεια που renderάρει ο browser (css/logical × DPR) | Όχι, αλλάζει με scaling + zoom | ✓2 |
| hardware pixel | η υλική κουκίδα, η native ανάλυση της οθόνης | Ναι, καρφωμένο στο hardware | ✗3 |
1 css pixel: το μετράμε στο /tools/monitor_dpi/ · 2 device pixel: υπολογισμένο, όχι το ίδιο το panel · 3 hardware pixel: δεν έχουμε πρόσβαση, δεν το μετράμε
Το DPR = πόσα device pixel πέφτουν σε 1 CSS pixel (μπλέκει μαζί scaling, zoom και πυκνότητα). Το DPI = πόσα device pixel σε μία ίντσα.
Το φόντο πίσω από κάθε κείμενο είναι πραγματικό μιλιμετρέ, σχεδιασμένο με βάση το DPI που έδωσες. Σε cm: μικρό τετράγωνο = 1 mm, χοντρή γραμμή = 1 cm. Σε pt: μικρό τετράγωνο = 1 pt, χοντρή γραμμή = 12 pt (μία πίκα). Ο αριθμημένος χάρακας από πάνω δίνει την κλίμακα. Αν το DPI είναι λάθος, τα τετράγωνα δεν θα είναι πραγματικά cm/pt, γι' αυτό αξίζει να το βαθμονομήσεις πρώτα.
Το ch είναι το πλάτος του χαρακτήρα «0» στη συγκεκριμένη γραμματοσειρά και μέγεθος. «Το κείμενο είναι ≈ N ch» σημαίνει ότι απλώνεται σε όσο χώρο N μηδενικά. Χρήσιμο για στήλες/πλάτη σε ch στο CSS.
Ο λόγος ch ÷ πλήθος χαρακτήρων = το μέσο πλάτος χαρακτήρα, μετρημένο σε ch. Σε monospace είναι ακριβώς 1.00 (κάθε χαρακτήρας = ένα «0»). Σε αναλογικές είναι < 1 όταν οι χαρακτήρες κατά μέσο όρο είναι στενότεροι από το «0» (πυκνότερο κείμενο), ή > 1 αν είναι πλατύτεροι. Ζωντανά, για τις επιλεγμένες:
| Γραμματοσειρά | ch | χαρακτ. | ch÷χαρ. |
|---|
Το «μέγεθος» που ορίζεις (π.χ. — px = — pt = — mm) είναι το ύψος του em (το νοητό τετράγωνο της γραμματοσειράς), όχι το ύψος των ίδιων των γραμμάτων. Τα πραγματικά μαύρα γράμματα είναι πιο κοντά: το cap-height = ύψος των κεφαλαίων (π.χ. «Η»), το x-height = ύψος των πεζών χωρίς ουρές (π.χ. «x»). Δύο γραμματοσειρές στο ίδιο μέγεθος px μπορεί να δείχνουν πολύ διαφορετικές, ακριβώς λόγω διαφορετικού x-height. Ζωντανά (σε στιγμές):
| Γραμματοσειρά | em (pt) | cap (pt) | x (pt) |
|---|
Ο browser δείχνει μια γραμματοσειρά μόνο αν υπάρχει στο σύστημα· αλλιώς βάζει άλλη στη θέση της. «Εγκατεστημένη» εδώ σημαίνει ότι αποδίδεται ως ξεχωριστή γραμματοσειρά, «υποκατάστατο» ότι πέφτει σε άλλη (οπότε οι μετρήσεις αφορούν την άλλη). Προσοχή στο Linux: το fontconfig κάνει aliasing (π.χ. «Arial» → Liberation Sans), οπότε «εγκατεστημένη» μπορεί να σημαίνει «αποδίδεται ως ξεχωριστό σχέδιο», όχι απαραίτητα ότι υπάρχει αρχείο με αυτό ακριβώς το όνομα.