Introduzione
L'antialiasing è un fenomeno non sfruttato per la grafica web; è per questo che sui nostri schermi sono presenti testo chiaro e forme vettoriali fluide. Attualmente esistono un paio di approcci all'antialiasing utilizzati nei browser che sono i più evidenti quando si tratta di rendering del testo. Quando l'algoritmo utilizzato per gli antialimentatori può portare a risultati visivi imprevisti. In questo articolo esamineremo gli approcci all'antialiasing e vedremo come vengono disegnati i pixel.
Tutti i nostri schermi, come tutti sappiamo, sono composti da pixel. È una gigantesca griglia di blocchi, ognuno dei quali contiene componenti rosso, verde e blu (RGB). Da lontano vediamo immagini, testo e icone, ma da vicino possiamo vedere la griglia dei componenti RGB e come tutto è composto.
Antialiasing
Quindi cosa succede quando stiamo disegnando una forma vettoriale che passa attraverso una "parte" di un pixel? Supponiamo che la forma che stiamo disegnando sia nera e che lo sfondo sia bianco. Dovremmo colorare affatto il pixel? Se lo coloriamo, di che colore dovrebbe essere? Nero, grigio, qualcos'altro?
Il processo di antialiasing determina il colore da utilizzare per la compilazione dei pixel. La versione più semplice è chiamata antialiasing in scala di grigi e tratta i tre componenti dei pixel in modo uguale. Quindi, se il pixel è mezzo coperto (per un secondo se ipotizziamo che il testo sia nero su bianco per un attimo) penseresti che ogni componente venga impostato alla metà della luminosità (lo so di sì), ma in realtà è più complesso: devi tenere conto della gamma, il che significa che probabilmente non lo imposterai mai su quel valore esatto. Ovviamente ciò rende le cose un po' più difficili, ma poiché questa è un'introduzione all'argomento, non ne tratterò in questa sede. La cosa importante da sapere è che l'antialiasing in scala di grigi viene gestito a livello di pixel e possiamo, di fatto, fare molto meglio.
Nella Figura 2 puoi vedere che il triangolo è stato disegnato, ma sulla sinistra è attivato l'antialiasing e sulla destra è disattivato. Come puoi vedere, quando l'antialiasing è attivato, i pixel sono tonalità di grigio quando il triangolo attraversa solo una parte del pixel. Quando è disattivato, tuttavia, il pixel viene riempito in nero o bianco in tinta unita e la forma appare frastagliata.
Rendering del testo
Ogni volta che un browser esegue il rendering del testo, che è essenzialmente una forma vettoriale, ci troveremo contro lo stesso problema: i caratteri del testo riempiranno solo parzialmente alcuni pixel, quindi sarà necessario elaborare una strategia per l'inserimento di questi pixel. Idealmente, il testo deve essere antialias, in quanto risulterà più semplice e piacevole da leggere.
Tuttavia, risulta che l'approccio in scala di grigi all'antialiasing è solo un modo per gestirlo. Un approccio che viene spesso adottato consiste nell'essere un po' più selettivi nell'ambito delle modalità di abilitazione dei componenti RGB dei pixel. Questo processo è chiamato antialiasing dei sottopixel e nel corso degli anni il team di ClearType di Microsoft in particolare ha investito una grande quantità di tempo e impegno per realizzarlo. Ora è molto più ampiamente utilizzato e tutti i principali browser lo utilizzano in misura maggiore o minore.
In primo luogo, dato che ogni pixel è di fatto costituito da componenti rossi, verdi e blu separati, rileviamo quanto deve essere "attivato" per il pixel in questione. Pertanto, se un pixel è "mezza coperto" dal lato sinistro, potremmo passare completamente al componente rosso, passare al componente verde a metà e tenere spento il blu. Questo processo è spesso descritto come "triplicando la risoluzione orizzontale dello schermo" e si basa sul fatto che ogni pixel è in realtà i tre componenti separati affiancati piuttosto che una singola unità.
Nella figura 3 sopra puoi vedere che sulla sinistra trattiamo ogni componente allo stesso modo e ciascuno è attivato o disattivato in modo uguale (scala di grigi). Sul lato destro, tuttavia, utilizziamo l'approccio basato sui sottopixel, consentendo a ogni componente (rosso, verde e blu) in modo diverso a seconda di quanto si sovrapponga alla forma disegnata.
Detto questo, tuttavia, la visione umana non pesa in modo uguale la luce rossa, verde e blu. Siamo molto più sensibili al verde che al rosso o al blu e questo significa che, sebbene ci sia un netto vantaggio rispetto all'antialiasing in scala di grigi, come note Darel Rex Finley, l'attivazione separata di ciascun componente non produce effettivamente un miglioramento di chiarezza di 3 volte. Tuttavia, l'antialiasing dei pixel secondari è molto utile e significa che il testo è visibile in modo più chiaro rispetto all'uso dell'antialiasing in scala di grigi.
Andare avanti
Cosa significa tutto questo per noi sviluppatori? Beh, dal punto di vista di Chrome almeno una combinazione di antialiasing in scala di grigi e sottopixel è utilizzata per il rendering del testo e quale soluzione si ottiene dipende da alcuni criteri. Per cominciare, tuttavia, abbiamo bisogno di capire un po' di più sui livelli, poiché questo è il criterio principale in gioco. Se non hai trovato i livelli e come vengono utilizzati internamente da Chrome, Tom Wiltzius ha scritto un'introduzione fantastica all'argomento che dovresti leggere per primo.
Supponendo che tu abbia familiarità con i livelli o che tu li abbia appena consultati, continuiamo. Se la composizione hardware è abilitata per la pagina e hai contenuti di testo su un livello che non è il livello principale, per impostazione predefinita il rendering verrà eseguito utilizzando l'antialiasing in scala di grigi. Gli sviluppatori spesso notano che se applicano attacchi agli elementi per inserirli nei propri livelli (non-root) (ad esempio utilizzando TraduttoreZ), il testo viene visualizzato in modo diverso. Spesso gli sviluppatori applicano attivatori di "nuovo livello" al volo tramite JavaScript o CSS, causando il passaggio del rendering del testo da sottopixel a scala di grigi; se non sai cosa ha attivato la modifica del rendering, può creare confusione. Se il testo si trova nel livello principale, tuttavia, dovrebbe essere visualizzato con antialiasing dei sottopixel e di conseguenza sarà molto più chiaro da leggere.
Ma, come tutto il web, sta cambiando. È in corso l'attivazione dell'antialiasing dei pixel secondari in Chrome per il testo in livelli non principali, a condizione che il livello soddisfi tre criteri. Vale la pena dire che questi criteri si applicano oggi, ma è probabile che cambino e che nel tempo verranno trattati più casi. Oggi questi criteri sono:
- Il livello ha un colore di sfondo completamente opaco. In particolare, se utilizzi
border-radiuso un valorebackground-clipnon predefinito, il livello viene considerato come non opaco e il rendering del testo torna all'antialiasing in scala di grigi. - Al livello può essere applicata solo una trasformazione dell'identità o una traduzione integrale. Per integrale si intendono i valori arrotondati. Quindi, ad esempio,
translate(20.2px, 30px)comporterebbe un antialiasing in scala di grigi poiché il componente x,20.2px, non è integrato. La trasformazione dell'identità implica semplicemente che non vengono applicati ulteriori rotazioni, traslazione o scalabilità, oltre a quelli predefiniti. - Il livello ha un'opacità di 1,0. Qualsiasi modifica di opacità modificherà l'antialiasing da pixel secondario a scala di grigi.
Un'ultima cosa da notare è che l'applicazione di un'animazione CSS potrebbe causare la creazione di un nuovo livello, al contrario dell'uso di requestAnimationFrame. Per alcuni sviluppatori, le differenze di rendering del testo che implicano hanno escluso l'uso di animazioni CSS. Quindi, se hai utilizzato JavaScript per animare gli elementi a causa di differenze di rendering del testo, verifica se questo aggiornamento risolve il problema.
Tutto questo con Chrome. Per quanto riguarda gli altri browser, Opera, nel passaggio a Chromium, dovrebbe corrispondere da vicino ai comportamenti di Chrome. Internet Explorer sembra utilizzare l'antialiasing dei sottopixel per quasi tutto il testo (se hai abilitato ClearType, ovviamente!), anche se apparentemente non nella modalità Metro di Windows 8. Safari, data la vicinanza di WebKit a Blink, si comporta in modo molto simile a Chrome, seppure senza questi miglioramenti più recenti che consentono un antialiasing più secondario dei pixel. Firefox si comporta in gran parte come Internet Explorer in quanto utilizza l'antialiasing dei subpixel per quasi tutto il testo. Ovviamente questo non è un elenco esaustivo ed è probabile che ci siano casi in tutti i browser in cui viene utilizzato l'antialiasing in scala di grigi al posto del pixel secondario, ma è bene sapere che l'antialiasing dei sottopixel è ampiamente utilizzato nell'insieme principale di browser.
Conclusione
Ora sai un po' come funziona l'antialiasing e perché potresti notare differenze di rendering del testo nei tuoi siti e nelle tue applicazioni oggi, in particolare sui dispositivi con DPI inferiore. Se ti interessa seguire l'implementazione di Chrome in merito al rendering del testo, devi aggiungere a Speciali i seguenti bug:
- Anti-aliasing automatico in scala di grigi dei caratteri sopra i 48 px non sostituibili
- Rendering orribile dei caratteri con Google Web Fonts su Chrome per Windows)
- Assistenza per DirectWrite