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

Presentazione sul tema: "Sub-pixel font rendering Francesco Pistis Elementi di grafica digitale – prof. Hmeljak Maggio 2007."— Transcript della presentazione:

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

2

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

4 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à.

5 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).

6 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à.

7 Font rasterization: convertire un simbolo vector in una descrizione bitmap.

8 Rasterizzazione semplice – No antialiasing – Veloce – Perdita di definizione a piccole dimensioni

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

10 Font hinting – aiutare il rasterizzatore ad allineare il font alla griglia – Importante a piccole dimensioni

11

12

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

14 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ò?

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

16 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.

17 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. Antialiasing: ombre di grigio dove i progettisti vorrebbero mostrare solo parte di un pixel. Risoluzione triplicata: è possibile creare caratteri digitali che tengono testa a quelli stampati. Si prendono in prestito sub-pixel dai pixel adiacenti.

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

19

20

21 Sub-pixel rendering: posso sfruttare lindirizzamento diretto dei sub-pixel per triplicare leffettiva risoluzione orizzontale dellLCD. Quindi, anche per ogni testo dobbiamo triplicare la quantità di informazione, e lo possiamo fare triplicando la larghezza orizzontale di ogni font.

22 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 sub- pixel rossi. Local Color Imbalance

23 Suddividiamo lenergia 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 lintensità risultante sarà rispettivamente 2/3, 1/3 o completamente spento.

24 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]

25 Unfiltered Filtered (5-element) Risultato finale

26

27 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 allanti-aliasing, si possono in ogni caso notare dei lievi vantaggi attivando sub-pixel su uno schermo CRT.

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

29

30 http://www.grc.com/cleartype.htm http://www.microsoft.com/typography/ClearTypeInfo.mspx http://en.wikipedia.org/wiki/Subpixel_rendering

31