Metrikára illesztett tartalék betűtípus
Amikor a webes betű megérkezik, a szöveg átrendeződik. Ez nem elkerülhetetlen — csak ki kell számolni, mekkora helyet foglaljon addig a tartalék.
A jelenség ismerős: a lap betöltődik, egy pillanatig rendszerbetűvel látszik, aztán megjön a webes betű, és minden elmozdul. A sorok máshol törnek, a bekezdések magassága változik, a kép lejjebb csúszik. Aki épp olvasni kezdett, elveszti a helyét.
A bevett tanács erre a font-display beállítása. Csakhogy
egyik értéke sem oldja meg a problémát, csak eldönti, melyik
rosszat választjuk: vagy látszik a tartalék és ugrik a szöveg,
vagy nem látszik semmi, amíg a betű megérkezik, vagy a végleges betű
sosem lép be.
Az igazi ok
A szöveg nem azért ugrik, mert két betűtípus van, hanem mert különböző helyet foglalnak. Két dologban térnek el:
Szélességben. Ugyanaz a szó ugyanakkora betűméretnél eltérő hosszúságú a két betűvel. Ettől a sortörés máshová esik, és a bekezdés akár egy sorral hosszabb vagy rövidebb lesz.
Magasságban. A sormagasságot nem a betűméret adja, hanem a betű felső és alsó nyúlványának aránya — ez pedig betűkészletenként eltér. Két betű azonos méretnél is más sortávolságot eredményez.
- illesztés nélkültartalék · más szélesség és magasság
- illesztésseltartalék · illesztett metrika
- illesztés nélküla végleges betű · minden elmozdul
- illesztéssela végleges betű · azonos hely
a csere ugyanaz — a különbség az, hogy látszik-e
A négy tulajdonság
A megoldás az, hogy a tartalékot nem úgy használjuk, ahogy van, hanem saját szabállyal vesszük fel, és megigazítjuk a metrikáit.
A size-adjust százalékos szorzót ad a tartalék rajzolt
méretére, anélkül hogy a megadott betűméret változna — ezzel a
karakterszélesség hozzáigazítható a véglegeshez. Ha ez stimmel,
a sortörések ugyanoda esnek mindkét állapotban.
Az ascent-override és a descent-override a felső
és alsó nyúlványt állítja be, tehát a sormagasságot. E
kettő nélkül a sorok hossza már jó lenne, a bekezdés magassága viszont
még mindig ugrana. A line-gap-override a sorok közti
alaptávolságot rendezi, ahol az számít.
A számolás
Az értékek nem próbálgatásból jönnek, hanem a két betű metrikáiból. A
szélességi arányból adódik a size-adjust; a felső és alsó
nyúlvány méretéből — a betű egységnégyzetéhez viszonyítva, majd a
szorzóval korrigálva — a két override.
A lényeg az, hogy a végeredményt mérni kell, nem szemrevételezni. A helyes beállításnál egy adott bekezdés magassága pixelre azonos a csere előtt és után. Ha eltér, valamelyik érték rossz — és a szem ezt a néhány pixeles különbséget nem fogja megmondani.
Egy dolgot érdemes tudni: a tartalék betűnek tényleg
léteznie kell a látogató gépén, különben az illesztés
olyasmire vonatkozik, ami nem fut. Ezért a szabályban a
local() alak áll, több elterjedt névvel, hogy a
leggyakoribb rendszereken biztosan legyen találat.
Mit ad ez cserébe
A látható eredmény az, hogy a betűcsere észrevehetetlen: a szöveg a helyén marad, csak a betű alakja változik. Aki nem figyel rá, nem veszi észre — és pontosan ez a cél.
Van ennek egy tágabb tanulsága is: a betűtöltés is olyan átmenet, aminek a köztes állapota látszik — ugyanaz a kérdés, mint a görgetésvezérelt animációnál, ahol a hibás köztes állapot üres lapot ad.
A mérhető eredmény az elrendezés-elmozdulás megszűnése. Ez az egyik olyan mutató, amit a keresők is figyelnek, de a fontosabb ok nem ez: aki egy ugráló lapon próbál olvasni, az a második ugrásnál elmegy.
Kérdések a témáról
Miért ugrik a szöveg a betűtípus betöltésekor?
Mert amíg a webes betű meg nem érkezik, a böngésző a rendszer betűjével rajzol, aminek más a karakterszélessége és más a sormagassága. Amikor a webes betű megjön, a szöveg újratördelődik: a sorok hossza változik, a bekezdés magassága ugrik, és ami alatta van, elmozdul.
Mit csinál a size-adjust?
Százalékos szorzót ad a tartalék betű rajzolt méretére, anélkül hogy a megadott betűméret változna. Ezzel a tartalék karakterszélessége hozzáigazítható a végleges betűéhez, tehát a sortörések ugyanoda esnek mindkét állapotban.
Miért kell az ascent-override és a descent-override is?
Mert a size-adjust csak a szélességet rendezi. A sormagasságot a betű felső és alsó nyúlványának aránya adja, és ez betűnként eltér. E kettő nélkül a sorok hossza már stimmelne, a bekezdés magassága viszont még mindig ugrana.
Honnan tudom, milyen értékeket írjak be?
A két betű metrikáiból számolva: a szélességi arányból jön a size-adjust, a felső és alsó nyúlvány méretéből pedig a két override. Ezek kiolvashatók a betűfájlból, és a végeredményt érdemes mérésel ellenőrizni — a helyes beállításnál a bekezdés magassága a csere előtt és után azonos.