Kuidas panna tekst täiuslikult renderdama

Kauni kirjatüübi valimine on kasutu, kui see näib teie ekraanil kole. Hirmu tekitava - või veelgi hullema - loetamatu teksti vältimiseks peaksite alati testima, kas font töötab külastajate kasutatavates seadmetes hästi. Võite olla üllatunud; enamik teie külastajatest ei kasuta tõenäoliselt sama seadet, mida kasutate kujundamisel ja arendamisel. Tegelikult kasutab valdav enamus internetis surfavaid inimesi Androidi ja Windowsi masinaid.

Ülemaailmne operatsioonisüsteemi kasutamine vastavalt StatCounter Global Statsile (aprill 2017). Apple

Ülemaailmne operatsioonisüsteemi kasutamine vastavalt StatCounter Global Statsile (aprill 2017). Apple'i seadmed esindavad väikest osa ülemaailmsest kasutusest, samas kui domineerivad Android ja Windows.

Parim viis fondi käitumise testimiseks on fondi näidisteksti seadmine ja proovimine kõigis teie sihitud seadmetes. Halb renderdamine on eriti märgatav õhukeste raskuste korral.

Näiteks macOS-is hästi toimiv font võib Windowsis tunduda habras (vt allolevat pilti). Oluline on kasutada tõelisi seadmeid, kuna veebibrauseri testimistööriistad ja virtuaalsed masinad on sageli ebatäpsed (sellest hiljem lähemalt).

Jubilat Thin Windows 7-s (vasakul) ja macOS-is (paremal). Pange tähele, et macOS-is näib tekst ‘raskem’ kui Windows 7-s.

Jubilat Thin Windows 7-s (vasakul) ja macOS-is (paremal). Pange tähele, et macOS-is näib tekst ‘raskem’ kui Windows 7-s.

Kui teil pole veel oma saidi sisu (tsk!), Andke Tim Brownile Veebifondi näidis pöörlemine. See määrab sisu mitmes tekstisuuruses ja erineva taustavärviga. See ei asenda tegelikku sisu, kuid seda saab teha näpuotsaga.

Mõnikord on teil õnne ja teie valitud font on disainitud selgesõnaliselt ekraanide jaoks: Hoefler & Co's ScreenSmart, Monotype's eText ja Font Bureau's Reading Edge on näited kogudest, mis on spetsiaalselt silmas peetud ekraane ja peaksid kõikjal ilusad välja nägema. Muidugi tasub teksti renderdamine üle kontrollida, hoolimata fondi päritolust.

Kuid täpselt miks näeb tekst ühest brauserist erinev välja? Sellele küsimusele vastamiseks peame tegema kiire ümbersõidu teksti renderdamise nõtkete detailide juurde.

Rastreerimine ja antialiaseerimine

Fondi piirjoonte piksliteks muutmise protsessi nimetatakse rasteriseerimiseks. Operatsioonisüsteemi tekstiedastusmootor asetab iga märgi kontuuri (st kuju) pikslivõrku soovitud fondisuurusele. Järgmisena värvib see kõik pikslid, mille kese on kontuuri sees (vt allolevat pilti).

Bézieri kõverast piksliteni. Vasakul on märgi ‘a’ kontuur. Keskel on see kontuur paigutatud pikslivõrku; kõik pikslid, mille kese on kontuuri sees, on sisse lülitatud. Paremal on sellest tulenev rasteriseerimine.

Bézieri kõverast piksliteni. Vasakul on märgi ‘a’ kontuur. Keskel on see kontuur paigutatud pikslivõrku; kõik pikslid, mille kese on kontuuri sees, on sisse lülitatud. Paremal on sellest tulenev rasteriseerimine.

Selles näites on piksel kas sisse või välja lülitatud, olenemata sellest, kui palju kontuurist on pikslis olemas. Seda matemaatiliselt täiuslike piirjoonte lähendamist nimetatakse aliasinguks; antialiaseerivad katsed ekraanide piiratud eraldusvõimest põhjustatud jämeda trepilaadse välimuse leevendamiseks.

Antialiasimise idee on välja selgitada, kui suur osa kontuurist on igas pikslis, ja näidata seda hallskaala väärtusega. Teisisõnu, kui kontuur katab 50 protsenti pikslist, kasutab see selle piksli värvimiseks 50 protsenti mustast. Kui piksel on täielikult piirjoones, kasutatakse 100-protsendilist musta värvi jne. See viib antialiasse renderdamiseni, mis vähendab varjunime (vt allolevat pilti). Selle efekti kirjeldamiseks näete sageli terminit 'hallskaala antialiaseerimine'.

Parem tulemuse annab antialiaseerimine, kasutades hallskaala väärtusi iga piksli kontuurse katvuse esitamiseks.

Parem tulemuse annab antialiaseerimine, kasutades hallskaala väärtusi iga piksli kontuurse katvuse esitamiseks.

Kuigi antialiasimine parandab teksti renderdamise kvaliteeti, on subpixel-antialiaseerimise abil tulemust võimalik veelgi parandada. Alampikslite antialiasing kasutab rasterdatud teksti eraldusvõime suurendamiseks ekraanide omadusi. Iga kuvari piksel koosneb kolmest piklikust pikslist: punane, roheline ja sinine (on olemas ka teisi konfiguratsioone, kuid kehtivad samad põhimõtted). Operatsioonisüsteem saab neid alampiksleid eraldi juhtida; alampikslite antialiasimine kasutab seda ära, rakendades katvuse arvutamise igale alampikslile (vt allolevat pilti).

Üksikute alampikslite sihtimisega suurendab alampikslite antialiasimine renderdatud teksti eraldusvõimet tõhusalt. Palja silmaga tajutavad värvid (vasakul) on iga alampiksli (paremal) individuaalsete katvuse väärtuste määramise tulemus; punase, rohelise ja sinise alampikslid moodustavad ühtse tajutava värvi.

Üksikute alampikslite sihtimisega suurendab alampikslite antialiasimine renderdatud teksti eraldusvõimet tõhusalt. Palja silmaga tajutavad värvid (vasakul) on iga alampiksli (paremal) individuaalsete katvuse väärtuste määramise tulemus; punase, rohelise ja sinise alampikslid moodustavad ühtse tajutava värvi.

Nende tekstide renderdamise valikute erinevus ilmneb siis, kui hakkate töötama väiksemate tekstisuurustega. Ilma antialiaseerumiseta kaotavad tegelased kiiresti oma eripärased piirjooned. Halltoonide antialiaseerimine muudab tegelased uduseks, kuid säilitab nende kuju. Alampikslise antialiaseerimine muudab teravaid märke, kuid toob ka tegelase servade ümber mõne värvi.

Antialiaseerimise näpunäited

Antialiaseerimise seadeid saate muuta mittestandardse kaudu -webkit-font-silumine ja -moz-osx-font-silumine CSS-i atribuudid. Kahjuks kasutavad paljud CSS-i raamistikud ja raamatukogud antialiased ja halltoon väärtused, et muuta tekst macOS-is kergemaks. Kuid enamik arendajaid ja disainereid ei mõista, et see keelab alampikslite antialiaseerimise ja muudab teksti udusemaks, kahjustades seeläbi loetavust.

Kellegi teise eelistatud teksti renderdamise muutmine vähem loetavaks on väga kaalutu. Kui teil peab olema heledam tekst, kasutage alampikslite renderdamise keelamise asemel kergemat kaalu.

Teksti renderdamise mootorid

Enamik operatsioonisüsteeme kasutab oma patenteeritud teksti renderdamise mootorit, teised aga sama avatud lähtekoodiga mootorit (kuigi mitte tingimata sama konfiguratsiooniga). Kuid kõik need toetavad antialiaseerimist ja alampikslite antialiasimist, kuid erinevad nende rakendamise osas veidi. Paljudes opsüsteemides on antialiaseerimise meetodi kasutaja valida. Näiteks Windowsis nimetatakse alampikslite antialiasimist ClearType; macOS-is nimetatakse seda LCD-fondi silumiseks.

Praegu on neli suurt tekstiedastuse mootorit: graafikaseadmete liides (tuntud ka kui GDI) ja DirectWrite Windowsis; Põhigraafika macOS-is ja iOS-is; ja avatud lähtekoodiga FreeType Linuxis, Chrome OS-is ja Androidis.

Üldiselt kasutab brauser tekstiedastusmootorit, mis on omane operatsioonisüsteemile, kus see töötab. Näiteks Chrome kasutab Windowsis DirectWrite'i, macOS-is Core Graphics'i ja Androidis FreeType'i. Windows on ainulaadne selle poolest, et pakub kahte teksti renderdamise mootorit: GDI ja uuemat DirectWrite'i.

Kõik tänapäevased brauserid kasutavad DirectWrite'i, nii et ühe erandi jaoks ei pea te GDI salvestamise pärast muretsema: mõned brauserid jäävad tagasi madalama GDI renderdamise juurde, kui masinal pole spetsiaalset graafika riistvara. Veebibrauseri testimistööriistadel ja virtuaalsetel masinatel pole sageli spetsiaalset graafilist riistvara, seega pole nende tööriistade teksti renderdamine täpne.

Ideaalis renderdatakse kogu tekst alampikslite antialiaseerimise abil, kuna see loob kõige loetavama teksti. Kahjuks pole see alati võimalik - näiteks alampikslite antialiaseerimine on sageli keelatud seadmetel, mida saab pöörata, näiteks tahvelarvutites ja telefonides. Nende seadmete ekraani pööramisel ei ole alampikslid enam paigutatud rasterija eeldatavasse mustrisse ja see põhjustab alampikslite antialiaseerimise inetu väljanägemise.

Lisalugemine: valikust optimeerimiseni näitab Webfonti käsiraamat teile, kuidas veebifondid võivad muuta veebi visuaalselt mitmekesisemaks, tõhusamaks ja loetavamaks keskkonnaks.

Lisalugemine: valikust optimeerimiseni Veebifondi käsiraamat näitab, kuidas veebifondid võivad muuta veebi visuaalselt mitmekesisemaks, tõhusamaks ja loetavamaks keskkonnaks.

Samuti keelavad brauserid alampikslite antialiaseerimise sarnastes olukordades, näiteks teksti pööramise või animeerimise korral. Sellisel juhul ei ühti rasterdatud tekst enam teksti algpositsiooni alampiksliga paigutusega ja vajaks uuesti rasterimist. See on kallis, eriti animatsioonide puhul, nii et enamik brausereid langeb tagasi halliskaala antialiaseerimisele, mis ei kannata sama probleemi all ja töötab mis tahes suunas.

Mõni brauser - näiteks MacOS-i Chrome - keelab järjepidevama kasutuskogemuse tagamiseks ka kõrglahutusega ekraanidel alampikslite antialiaseerimise. Teised brauserid võimaldavad alampikslite antialiasimist vaid väikese teksti puhul, kuna väiksemad muudatused teksti renderdamises on suuremate suuruste korral vähem nähtavad.

On veel mitmeid juhtumeid, kus brauserid keelavad alampikslite antialiaseerimise. Reeglid, mida brauserid kasutavad antialiaseerimise meetodi valimiseks, värskendatakse pidevalt kujul leitakse uued nurgajuhtumid ja probleemid . Need sagedased muudatused muudavad teie teksti renderdamisel toimuva jälgimise väga raskeks. See, mida kunagi kasutati alampikslite antialiaseerimiseks, võib järgmise brauseri värskenduse korral hallskaalale tagasi minna. Ainus viis oma teksti renderdamiseks kindlalt teada saada on testimine tegelikes seadmetes.

Ilmselt olete harjunud oma saiti mitmes brauseris testima. Teksti renderdamise testimine suurendab mitmekordse testimise hulka. Lisaks operatsioonisüsteemide ja brauserite kõigi kombinatsioonide kontrollimisele peate kontrollima ka kõiki tavalisi teksti renderdamise seadeid.

Mõni seade võib olla hallskaala antialiaseerimise eelkonfigureeritud, teised aga halliskaala ja alampikslite antialiaseerimise segu. Veelgi raskemaks muutmiseks ei ole võimalik kasutada veebibrauseri testimistööriistu ega virtuaalmasinaid, sest teksti renderdamine erineb sageli reaalsete seadmete omast.

Testimisel kasutage alati oma sisu esindavat valimit. Mustrikogu sobib ideaalselt tüübi renderdamise testimiseks, kuna see sisaldab teie sisu laia valimi: päiseid, põhiteksti, silte, taustavärve ja animatsiooni. Oma sisu näidete olemasolu ühel lehel võimaldab teil kiiresti kontrollida kõiki stiilide ja taustavärvide kombinatsioone.

Otsige teksti, mis pole loetav või tundub mõnes operatsioonisüsteemis õhuke. Kui leiate probleemi, muutke samas fontide perekonnas teiseks kaaluks, muutke tekst tumedamaks või valige mõni teine ​​kirjatüüp. Edu.

See artikkel ilmus algselt maailma enimmüüdud veebidisainerite ja -arendajate ajakirja net 301. väljaandes. Osta väljaanne 301 või tellige net .

Seotud artiklid: