Nilalaman
Ang pagpili ng isang magandang typeface ay walang silbi kung ito ay mukhang pangit sa iyong screen. Upang maiwasan ang nakakatakot - o mas masahol pa - hindi nababasa na teksto, dapat mong palaging subukan kung gumagana ang font nang maayos sa mga aparato na ginagamit ng iyong mga bisita. Baka magulat ka; karamihan sa iyong mga bisita ay marahil ay hindi gumagamit ng parehong aparato na ginagamit mo upang magdisenyo at bumuo. Sa katunayan, ang karamihan sa mga tao na nag-i-surf sa internet ay gumagamit ng mga makina ng Android at Windows.
Ang pinakamahusay na paraan upang subukan kung paano kumilos ang isang font ay upang magtakda ng isang sample na teksto sa font at subukan ito sa lahat ng mga aparato na iyong na-target. Ang masamang pag-render ay lalong kapansin-pansin sa manipis na timbang.
Halimbawa, ang isang font na mahusay na nai-render sa macOS ay maaaring magmukhang marupok sa Windows (tingnan ang imahe sa ibaba). Mahalagang gumamit ng mga totoong aparato, dahil ang mga tool sa pagsubok sa online browser at mga virtual machine ay madalas na hindi tumpak (higit pa sa paglaon).
Kung wala ka pang nilalaman ng iyong site (tsk!), Bigyan ng paikutin ang Tim Brown's Web Font Specimen. Nagtatakda ito ng nilalaman sa maraming laki ng teksto at may iba't ibang mga kulay sa background. Hindi ito kapalit ng totoong nilalaman, ngunit gagawin ito sa isang kurot.
Minsan swerte ka, at ang font na pinili mo ay malinaw na idinisenyo para sa mga screen: Hoefler & Co's ScreenSmart, Monotype's eText, at Font Bureau's Reading Edge ay mga halimbawa ng mga koleksyon na partikular na idinisenyo na may mga screen na nasa isip at dapat magmukhang maganda saanman. Siyempre, nagbabayad ito upang suriin ulit ang pag-render ng teksto, hindi alintana ang mga pinagmulan ng font.
Ngunit eksaktong bakit magkakaiba ang hitsura ng teksto mula sa isang browser hanggang sa susunod? Upang sagutin ang katanungang iyon, kakailanganin nating kumuha ng mabilis na pagliko sa mga nakakatawang detalye ng pag-render ng teksto.
Rasterizing at antialiasing
Ang proseso ng pagbabago ng mga balangkas ng font sa mga pixel ay tinatawag na rasterization. Inilalagay ng engine-rendering engine ng operating system ang balangkas (ibig sabihin ang hugis) ng bawat character sa nais na laki ng font sa isang pixel grid. Susunod, kulay nito ang lahat ng mga pixel na ang sentro ay nasa loob ng balangkas (tingnan ang imahe sa ibaba).
Sa halimbawang ito, ang isang pixel ay alinman sa o naka-off, gaano man karami ng balangkas ang naroroon sa pixel. Ang pamamaraang ito ng perpektong balangkas sa matematika ay tinatawag na aliasing; mga pagtatangka na antialiasing na pagaanin ang mga magaspang na mala-hagdan na hitsura na dulot ng limitadong resolusyon ng mga screen.
Ang ideya sa likod ng antialiasing ay upang malaman kung magkano ang balangkas na naroroon sa bawat pixel at kinakatawan iyon sa isang greyscale na halaga. Sa madaling salita, kung ang balangkas ay sumasakop sa 50 porsyento ng isang pixel, gumagamit ito ng 50 porsyento ng itim upang kulayan ang pixel na iyon. Kung ang pixel ay nasa loob ng balangkas, 100 porsyento na itim ang ginagamit, at iba pa. Humantong ito sa isang antialiased rendering na binabawasan ang aliasing (tingnan ang imahe sa ibaba). Madalas mong makita ang term na 'greyscale antialiasing' na ginamit upang ilarawan ang epektong ito.
Habang pinapabuti ng antialiasing ang kalidad ng pag-render ng teksto, posible na mapabuti ang resulta sa karagdagang paggamit ng subpixel antialiasing. Ginagamit ng subpixel antialiasing ang mga katangian ng mga screen upang madagdagan ang paglutas ng rasterized na teksto. Ang bawat pixel sa isang display ay binubuo ng tatlong pahaba na subpixel: pula, berde, at asul (mayroon pang ibang mga pagsasaayos, ngunit nalalapat ang parehong mga prinsipyo). Indibidwal na makontrol ng operating system ang mga subpixel na ito; subpixel antialiasing exploits na sa pamamagitan ng paglalapat ng pagkalkula ng saklaw sa bawat subpixel (tingnan ang imahe sa ibaba).
Ang pagkakaiba sa pagitan ng mga pagpipilian sa pag-render ng teksto ay magiging maliwanag kapag nagsimula kang magtrabaho sa mas maliit na mga laki ng teksto. Nang walang antialiasing, mabilis na nawala ng mga character ang kanilang natatanging mga balangkas.Ang Greyscale antialiasing ay ginagawang malabo ang mga character ngunit pinapanatili ang kanilang hugis. Ang subpixel antialiasing ay nag-render ng matalim na mga character ngunit nagpapakilala din ng ilang mga kulay sa gilid ng mga gilid ng character.
Mga tip sa Antialiasing
Maaari mong baguhin ang mga setting ng antialiasing sa pamamagitan ng hindi pamantayan -webkit-font-smoothing at -moz-osx-font-smoothing Mga katangian ng CSS. Sa kasamaang palad, maraming mga framework at aklatan ng CSS ang gumagamit ng antialiased at grayscale mga halagang gagawing mas magaan ang teksto sa macOS. Gayunpaman, karamihan sa mga tagabuo at taga-disenyo ay hindi napagtanto na hindi pinagana nito ang subpixel antialiasing at pinapalabas na mas malabo ang teksto, at dahil doon ay nasasaktan ang pagiging epektibo.
Ang pagpapalit ng ginustong pag-render ng teksto ng ibang tao na hindi gaanong mabasa ay napaka-konsiderasyon. Kung kailangan mong magkaroon ng mas magaan na teksto, gumamit ng mas magaan na timbang sa halip na huwag paganahin ang pag-render ng subpixel.
Mga engine sa pag-render ng teksto
Karamihan sa mga operating system ay gumagamit ng kanilang sariling pagmamay-ari na text-rendering engine, habang ang iba ay gumagamit ng parehong open-source engine (kahit na hindi kinakailangan na may parehong pagsasaayos). Gayunpaman, lahat sila ay sumusuporta sa antialiasing at subpixel antialiasing ngunit naiiba nang kaunti sa kanilang pagpapatupad. Sa maraming mga operating system, ang pagpipilian ng paraan ng antialiasing ay mapipili ng gumagamit. Halimbawa sa Windows, ang subpixel antialiasing ay tinatawag na ClearType; sa macOS, tinatawag itong LCD Font Smoothing.
Kasalukuyang mayroong apat na pangunahing mga engine sa pag-render ng teksto: ang Graphics Device Interface (kilala rin bilang GDI) at DirectWrite sa Windows; Core Graphics sa macOS at iOS; at ang open-source na FreeType sa Linux, Chrome OS, at Android.
Sa pangkalahatan, ang isang browser ay gagamit ng text-rendering engine na katutubong sa operating system na ito ay tumatakbo. Halimbawa, ang Chrome ay gumagamit ng DirectWrite sa Windows, Core Graphics sa macOS, at FreeType sa Android. Natatangi ang Windows sa pag-aalok nito ng dalawang mga engine sa pag-render ng teksto: GDI at ang mas bagong DirectWrite.
Ang lahat ng mga modernong browser ay gumagamit ng DirectWrite, kaya't hindi mo kailangang mag-alala tungkol sa pag-save ng GDI para sa isang pagbubukod: ang ilang mga browser ay bumalik sa mas mababang pag-render ng GDI kung ang machine ay walang dedikadong graphics hardware. Ang mga tool sa pagsubok sa online na browser at mga virtual machine ay madalas na walang dedikadong hardware ng graphics, kaya't ang pag-render ng teksto sa mga tool na ito ay hindi tumpak.
Sa isip, ang lahat ng teksto ay nai-render gamit ang subpixel antialiasing dahil lumilikha ito ng pinaka nabasang teksto. Sa kasamaang palad, hindi palaging posible iyon - halimbawa, ang subpixel antialiasing ay madalas na hindi pinagana sa mga aparato na maaaring paikutin, tulad ng mga tablet at telepono. Kapag binuksan mo ang screen ng mga aparatong ito, ang mga subpixel ay hindi na nakaayos sa pattern na inaasahan ng rasterizer at magiging sanhi ng subpixel antialiasing na mukhang pangit.
Hindi rin pinagana ng mga browser ang subpixel antialiasing sa mga katulad na sitwasyon, halimbawa kapag ang teksto ay pinaikot o na-animate. Sa kasong ito, ang rasterized na teksto ay hindi na tumutugma sa layout ng subpixel ng orihinal na posisyon ng teksto at kailangang muling i-rasterize. Mahal ito, lalo na para sa mga animasyon, kaya't ang karamihan sa mga browser ay bumalik sa greyscale antialiasing, na hindi nagdurusa sa parehong problema at gumagana sa anumang orientation.
Ang ilang mga browser - Ang Chrome sa macOS, halimbawa - ay hindi rin pinagana ang subpixel antialiasing sa mga screen na may mataas na resolusyon upang makapagbigay ng isang mas pare-pareho na karanasan ng gumagamit. Pinapagana lamang ng ibang mga browser ang subpixel antialiasing sa maliit na teksto, dahil ang mga menor de edad na pagbabago sa pag-render ng teksto ay hindi gaanong nakikita sa mas malaking sukat.
Mayroong maraming iba pang mga kaso kung saan hindi pinagana ng mga browser ang subpixel antialiasing. Ang mga patakaran na ginagamit ng mga browser upang mapili ang pamamaraang antialiasing ay patuloy na na-update bilang mga bagong kaso ng sulok, at mga problema, ay matatagpuan. Ang mga madalas na pagbabagong ito ay napakahirap upang subaybayan kung ano ang nangyayari sa iyong pag-render ng teksto. Ang dating ginamit na subpixel antialiasing ay maaaring bumalik sa greyscale sa susunod na pag-update ng browser. Ang tanging paraan upang malaman sigurado kung paano nag-render ang iyong teksto ay upang subukan sa aktwal na mga aparato.
Marahil ay sanay ka sa pagsubok sa iyong site sa maraming mga browser. Ang pagsubok ng pag-render ng teksto ay nagdaragdag ng dami ng pagsubok na kailangan mong gawin sa sari-sari. Hindi lamang kailangan mong suriin ang lahat ng mga kumbinasyon ng mga operating system at browser, ngunit pati na rin ang lahat ng mga karaniwang setting ng rendering ng teksto.
Ang ilang mga aparato ay maaaring mai-configure upang magamit ang greyscale antialiasing habang ang iba ay gumagamit ng isang halo ng greyscale at subpixel antialiasing. Upang gawing mas mahirap ito, hindi posible na gumamit ng mga tool sa pagsubok sa online-browser o mga virtual machine, dahil ang pag-render ng teksto ay madalas na naiiba sa mga tunay na aparato.
Kapag sumusubok, laging gumamit ng isang kinatawan ng sample ng iyong nilalaman. Ang isang pattern library ay angkop na angkop para sa pagsubok sa pag-render ng uri sapagkat nagsasama ito ng isang malawak na sample ng iyong nilalaman: mga header, teksto ng katawan, mga label, kulay ng background, at animasyon. Ang pagkakaroon ng mga halimbawa ng iyong nilalaman sa isang solong pahina ay nagbibigay-daan sa iyo upang suriin ang lahat ng mga kumbinasyon ng mga estilo at mga kulay sa background nang mabilis.
Maging maingat sa teksto na hindi nababasa o lumilitaw na payat sa ilang mga operating system. Kung nakakita ka ng isang isyu, magpalit ng ibang timbang sa iisang pamilya ng font, gawing mas madidilim ang teksto, o pumili ng ibang typeface. Swerte naman
Ang artikulong ito ay orihinal na na-publish sa isyu na 301 ng net, ang pinakamabentang magazine sa buong mundo para sa mga web designer at developer. Bumili ng isyu 301 o mag-subscribe sa net.
