Subpixel font rendering Maggio 2007 Elementi di grafica

Sub-pixel font rendering Maggio 2007 Elementi di grafica digitale – prof. Hmeljak Francesco Pistis

(( 1 )) Introduzione

• Computer font: “simboli” in formato elettronico (file) • Tre formati principali: – Bitmap – Outline – Stroke

• Nei font Bitmap ogni simbolo è composto da un array di pixel. Per ogni variante del font esiste un set completo di immagini per ogni carattere. Per esempio, se un font ha tre dimensioni, ed ognuna può essere bold e italic, allora ci saranno 12 set completi di immagini. – velocità e semplicità di renderizzazione, semplicità di creazione – resa scarsa se i caratteri vengono ridimensionati rispetto alla loro dimensione nativa o trasformati in qualche modo. • I primi computer utilizzavano bitmap fonts esclusivamente a causa della loro scarsa potenza di calcolo e memoria. Restano ancora in uso in sistemi embedded e in altre applicazioni in cui sono importanti velocità e semplicità.

• Outline fonts: detti anche vector font, sono collezioni di immagini vettoriali, vale a dire insiemi di linee e curve usati per definire i bordi dei simboli. Lo standard universale per i font vector è Adobe Post. Script. • Il vantaggio principale è che essi possono essere facilmente trasformati applicando funzioni matematiche oppure scalati senza causare pixellation. Questo però richiede una certa capacità di calcolo. . . • Inoltre, le curve di Bezier non possono essere renderizzate accuratamente su un display raster e il loro rendering può cambiare la forma a seconda della dimensione e posizione desiderate (da cui il font hinting).

• Nei font Stroke based la forma di un simbolo è definita dai vertici di tratti individuali. Rispetto agli outline font, quindi, viene ridotto il numero di vertici necessari per definire un simbolo. • Grande scalabilità.

• Font rasterization: convertire un simbolo “vector” in una descrizione bitmap.

• Rasterizzazione “semplice” – No antialiasing – Veloce – Perdita di definizione a piccole dimensioni

• Anti-aliasing – Usa “ombre” per smussare gli spigoli taglienti – Problemi in assenza di hinting

• Font hinting – “aiutare” il rasterizzatore ad allineare il font alla griglia – Importante a piccole dimensioni

(( 2 )) Sub-pixel font rendering

• In un monitor LCD, un pixel è composto da tre sottopixel R-G-B • Quando noi vediamo per es. una linea bianca: • Essa è in realtà:

• Questo significa che se trattassimo i sub-pixel individualmente, la risoluzione orizzontale di un LCD triplicherebbe! • Ad esempio, se hres = 800 pixel, abbiamo in realtà 800 R + 800 G + 800 B, per un totale di 2400 sub-pixel composti da un singolo colore. • Ma in che modo possiamo sfruttare tutto ciò?

• Supponiamo di voler disegnare un oggetto avente un bordo “pendente”. • Usando il pixel “normale”, riusciremo a creare un bordo particolarmente frastagliato.

• Sfruttando i sub-pixel, invece, si riesce ad ottenere una diagonale molto più gradevole. • Inoltre, i nostri occhi percepiscono come bianchi i pixel lungo il bordo diagonale, poiché le barrette di colore di un subpixel sono nelle immediate vicinanze degli altri colori primari. • Vediamo ora come si applica tutto ciò nel caso dei caratteri.

• “A” maiuscola, 8 punti, Times New Roman: si capisce cos’è , ma rispetto alla stampa su carta alla stessa dimensione, è molto meno “liscia”. Zoom: chi progetta font è decisamente limitato dalla risoluzione del display. Risoluzione triplicata: è possibile creare caratteri digitali che tengono testa a quelli stampati. Antialiasing: “ombre” di grigio dove i progettisti vorrebbero mostrare solo parte di un pixel. Si “prendono in prestito” sub-pixel dai pixel adiacenti.

• Kerning Spaziatura tra i caratteri • Emboldening Grassetto • Italicizing Corsivo K e r n i embold Italicizing

(( 3 )) Dettagli implementativi

• Sub-pixel rendering: posso sfruttare l’indirizzamento diretto dei sub-pixel per triplicare l’effettiva risoluzione orizzontale dell’LCD. • Quindi, anche per ogni testo dobbiamo triplicare la quantità di informazione, e lo possiamo fare triplicando la larghezza orizzontale di ogni font.

• Consideriamo, quindi, in che modo verrà mappata la lettera “m” sui sub-pixel di un LCD. • Ciascuna gamba verticale è larga 5 pixel… che non è multiplo di 3… Perciò, esse risultano circondate a sinistra e a destra da subpixel rossi. Local Color Imbalance

• Suddividiamo “l’energia” di ciascun sub-pixel su se stesso e sui suoi due vicini: • Così, se un sub-pixel e i suoi vicini sono tutti “ON”, allora esso sarà completamente acceso. Ma se esso e uno o due suoi vicini sono spenti, allora l’intensità risultante sarà rispettivamente 2/3, 1/3 o completamente spento.

• Un testo renderizzato in questo modo è solitamente affetto da blurring, causato dal fatto che i sub-pixel vicini hanno appena un po’ di energia in più rispetto a quello centrale. • E’ sufficiente ripetere il filtraggio: “five-element low-pass windowing filter with coefficients of [1/9, 2/9, 3/9, 2/9, 1/9]”

• Unfiltered • Filtered (5 -element) • Risultato finale

(( 4 )) Limitazioni

• Poiché un monitor CRT utilizza un fascio di elettroni per eccitare i pixel e non dispone di pixel specifici in posizioni specifiche, non è possibile godere degli stessi vantaggi ottenuti con uno schermo LCD. • Tuttavia, poiché questa tecnologia comprende comunque il supporto all’anti-aliasing, si possono in ogni caso notare dei lievi vantaggi attivando sub-pixel su uno schermo CRT.

• Meglio nero su bianco • Only landscape… not portrait • Ordine nel sub-pixel

(( 5 )) Link

• http: //www. grc. com/cleartype. htm • http: //www. microsoft. com/typography/Clear. Type. Info. mspx • http: //en. wikipedia. org/wiki/Subpixel_rendering

Grazie per la cortese attenzione