Sub-pixel
font rendering
Maggio 2007
Elementi di grafica
digitale – prof. Hmeljak
Francesco Pistis
• 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 PostScript.
• 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
• 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
• 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
• 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
• http://www.grc.com/cleartype.htm
• http://www.microsoft.com/typography/ClearTypeInfo.mspx
• http://en.wikipedia.org/wiki/Subpixel_rendering