Hogyan lehet a szöveget tökéletesen megjeleníteni?

Ismerje meg, hogyan működik a szövegmegjelenítés, és győződjön meg arról, hogy a betűtípusok szépen jelenjenek meg.

Hiába választ egy szép betűtípust, ha csúnyán néz ki a képernyőn. A szörnyű - vagy ami még rosszabb - olvashatatlan szöveg elkerülése érdekében mindig tesztelnie kell, hogy a betűtípus jól működik-e a látogatók által használt eszközökön. Lehet, hogy meglepődsz; látogatóinak többsége valószínűleg nem ugyanazt az eszközt használja, amelyet a tervezéshez és fejlesztéshez használ. Valójában az interneten böngésző emberek döntő többsége Android és Windows gépeket használ.

A betűtípus viselkedésének tesztelésének legjobb módja az, ha beállít egy mintaszöveget a betűtípusba, és kipróbálja az összes megcélzott eszközön. A rossz renderelés különösen vékony súlyokon figyelhető meg.

Például a macOS-on jól megjelenő betűtípus törékenynek tűnhet a Windows rendszeren (lásd az alábbi képet). Fontos a valós eszközök használata, mert az online böngészőtesztelő eszközök és a virtuális gépek gyakran pontatlanok (erről bővebben később).

Ha még nem rendelkezik webhelye tartalmával (tsk!), Akkor pörgesse meg Tim Brown Web betűtípus-mintáját. A tartalmat többféle szövegméretben és különböző háttérszínnel állítja be. Ez nem pótolja a valódi tartalmat, de egy csipetnyi módon megteszi.

Néha szerencséje van, és a választott betűtípust kifejezetten a képernyőkhöz tervezték: a Hoefler & Co ScreenSmart, a Monotype eText és a Font Bureau Reading Edge példái a kifejezetten képernyőket szem előtt tartó kollekcióknak, és mindenhol gyönyörűnek kell lenniük. Természetesen érdemes még egyszer ellenőrizni a szöveg megjelenítését, függetlenül a betűtípus eredetétől.

De pontosan miért néz ki másként a szöveg az egyik böngészőben? A kérdés megválaszolásához gyors kitérőt kell tennünk a szövegmegjelenítés nyálkás szemcsés részleteiben.

Raszterizálás és antialiasizálás

A betűtípus körvonalainak pixelekké alakításának folyamatát raszterizálásnak nevezzük. Az operációs rendszer szövegmegjelenítő motorja az egyes karakterek körvonalát (azaz alakját) a kívánt betűméretre helyezi egy pixel rácson. Ezután kiszínezi az összes pixelt, amelynek középpontja a körvonalon belül található (lásd az alábbi képet).

Ebben a példában egy pixel be vagy ki van kapcsolva, függetlenül attól, hogy a körvonal mekkora része van a képpontban. A matematikailag tökéletes körvonalak ezt a közelítését aliasingnak nevezzük; antialiasing kísérletek a képernyők korlátozott felbontása által okozott durva lépcsőszerű megjelenések enyhítésére.

Az antialiasing ötlete az, hogy kitaláljuk, hogy a körvonal mekkora része van az egyes pixelekben, és ezt szürkeárnyalatos értékkel jelenítse meg. Más szavakkal, ha a körvonal a pixel 50% -át lefedi, akkor a fekete 50% -át használja a pixel színezéséhez. Ha a képpont teljes egészében a körvonalon belül van, akkor 100% -ban fekete színt használunk stb. Ez antialias rendereléshez vezet, amely csökkenti az álnevet (lásd az alábbi képet). Gyakran látni fogja a „szürkeárnyalatos antianizálás” kifejezést, amely leírja ezt a hatást.

Míg az antialiasing javítja a szövegmegjelenítés minőségét, tovább javíthatja az eredményt a subpixel antialiasing használatával. A szubpixeles antialiasing a képernyők tulajdonságait használja a raszterizált szöveg felbontásának növelésére. A kijelző minden képpontja három hosszúkás alpixelből áll: piros, zöld és kék (más konfigurációk léteznek, de ugyanazok az elvek érvényesek). Az operációs rendszer ezeket az alpixeleket egyedileg vezérelheti; A subpixel antialiasing kihasználja, hogy a lefedettség számítását alkalmazza az egyes subpixelekre (lásd az alábbi képet).

A szövegmegjelenítési lehetőségek közötti különbség akkor válik nyilvánvalóvá, ha kisebb szövegmérettel kezd dolgozni. Antiazia nélkül a karakterek gyorsan elveszítik jellegzetes körvonalaikat. A szürkeárnyalatos antialiasítás elmosódottá teszi a karaktereket, de megtartja formájukat. A Subpixel antialiasing éles karaktereket jelenít meg, de a szín szélén körül néhány színt is felvázol.

Antialiasing tippek

Az antialiasing beállításokat a nem szabványos módon módosíthatja -webkit-font-simítás és -moz-osx-font-simítás CSS tulajdonságok. Sajnos sok CSS keretrendszer és könyvtár használja a antialias és szürkeárnyalatos értékeket, hogy a szöveg könnyebbnek tűnjön a macOS-on. A legtöbb fejlesztő és tervező azonban nem veszi észre, hogy ez letiltja a szubpixel antialiasizálást, és a szöveg elmosódottabbá válik, ezáltal sérti az olvashatóságot.

Nagyon figyelmetlen, ha valaki más által előnyben részesített szövegmegjelenítést kevésbé olvashatóvá változtat. Ha könnyebb szövege van, használjon kisebb súlyt ahelyett, hogy letiltaná az alpixeles megjelenítést.

Szövegmegjelenítő motorok

A legtöbb operációs rendszer saját, saját szövegmegjelenítő motorját használja, míg mások ugyanazt a nyílt forráskódú motort használják (bár nem feltétlenül azonos konfigurációval). Mindegyikük azonban támogatja az antialiasing és subpixel antialiasing kialakítását, de megvalósításukban kissé eltér egymástól. Számos operációs rendszerben az antialiasing módszer választása a felhasználó által választható. Például Windows rendszeren az alpixel-antialiazást ClearType-nek hívják; macOS-on LCD betűkészlet-elsimításnak hívják.

Jelenleg négy fő szövegmegjelenítő motor létezik: a Graphics Device Interface (más néven GDI) és a DirectWrite Windows rendszeren; Core Graphics MacOS és iOS rendszereken; valamint a nyílt forráskódú FreeType Linux, Chrome OS és Android rendszereken.

Általánosságban elmondható, hogy a böngésző a futó operációs rendszerben honos szövegmegjelenítő motort fogja használni. A Chrome például a DirectWrite-et használja a Windows-on, a Core Graphics-ot a macOS-on és a FreeType-t az Android-on. A Windows egyedülálló abban, hogy két szövegmegjelenítő motort kínál: a GDI-t és az újabb DirectWrite-et.

Minden modern böngésző a DirectWrite-et használja, így egyetlen kivétellel nem kell aggódnia a GDI-mentés miatt: egyes böngészők visszaesnek az alacsonyabb szintű GDI-megjelenítéssel, ha a gépnek nincs külön grafikus hardvere. Az online böngésző-tesztelő eszközök és a virtuális gépek gyakran nem rendelkeznek külön grafikus hardverrel, így ezeken az eszközökön a szövegmegjelenítés nem pontos.

Ideális esetben az összes szöveget subpixel antialiasing segítségével renderelik, mert ez hozza létre a legolvashatóbb szöveget. Sajnos ez nem mindig lehetséges - például az elforgatható eszközökön, például táblagépeken és telefonokon gyakran le van tiltva a subpixel antialiasing. Amikor elfordítja ezen eszközök képernyőjét, az alpixelek már nem a raszterizáló által elvárt sorrendben vannak elrendezve, és az alpixelek antialiasizálódását csúnyának tűnik.

A böngészők hasonló helyzetekben, például amikor a szöveget elforgatják vagy animálják, a szubpixel antialiazítást is letiltják. Ebben az esetben a raszterizált szöveg már nem egyezik a szöveg eredeti helyzetének alpixeles elrendezésével, és újra raszterezni kellene. Ez drága, főleg az animációk esetében, így a legtöbb böngésző visszaesik a szürkeárnyalatos antialiazításra, amely nem szenved ugyanabban a problémában, és bármilyen irányban működik.

Néhány böngésző - például a MacOS-on futó Chrome - szintén letiltja az alpixeles antialiasztást a nagy felbontású képernyőkön, hogy következetesebb felhasználói élményt nyújtson. Más böngészők csak kis szöveg esetén engedélyezik az alpixeles antialiazítást, mert a szöveges megjelenítés kisebb változásai nagyobb méretnél kevésbé láthatóak.

Számos más olyan eset is előfordul, amikor a böngészők letiltják a subpixel antialiasing funkciót. A böngészők által az antialiasing módszer kiválasztásához használt szabályok folyamatosan frissülnek, mivel új sarokeseteket és problémákat találnak. Ezek a gyakori változások nagyon megnehezítik annak nyomon követését, hogy mi történik a szövegmegjelenítéssel. A korábban használt subpixeles antialiasing a következő böngészőfrissítéssel szürkeskálára eshet. Az egyetlen módja annak, hogy biztosan megismerje a szöveg megjelenítését, a tényleges eszközökön történő tesztelés.

Valószínűleg több böngészőben is szokta tesztelni webhelyét. A szövegmegjelenítés tesztelése növeli a sokrétű tesztelés mennyiségét. Nemcsak az operációs rendszerek és a böngészők összes kombinációját, hanem az általános szövegmegjelenítési beállításokat is ellenőriznie kell.

Bizonyos eszközök előkonfigurálhatók a szürkeárnyalatos antialiasing használatára, míg mások a szürkeárnyalatos és a subpixeles antialiasing keverékét használják. A még nehezebbé téve nem lehet online böngésző tesztelő eszközöket vagy virtuális gépeket használni, mert a szövegmegjelenítés gyakran eltér a valós eszközökét.

Teszteléskor mindig használjon reprezentatív mintát a tartalmáról. A mintakönyvtár ideálisan alkalmas a típusmegjelenítés tesztelésére, mert a tartalom széles mintáját tartalmazza: fejléceket, törzsszöveget, címkéket, háttérszíneket és animációt. Ha egyetlen oldalon egyetlen példája van a tartalmának, akkor gyorsan ellenőrizheti a stílusok és a háttérszín összes kombinációját.

Figyeljen olyan szövegre, amely nem olvasható vagy vékonynak tűnik egyes operációs rendszereken. Ha problémát talál, váltson másik súlyra ugyanazon betűtípuscsaládban, tegye sötétebbé a szöveget, vagy válasszon másik betűtípust. Sok szerencsét.

Ezt a cikket eredetileg a net 301. számában tették közzé, a világ legnépszerűbb webtervezőknek és fejlesztőknek szóló magazinjában. Vásárolja meg a 301. számot, vagy iratkozzon fel a netre.