Come browser diversi eseguono il rendering del testo PDF utilizzando motori di caratteri diversi
Quando apri lo stesso file PDF in Google Chrome e in Mozilla Firefox sullo stesso computer, due motori di rendering PDF completamente diversi elaborano il documento. Chrome utilizza PDFium, una libreria C++ originariamente sviluppata da Foxit e ora gestita da Google come parte del progetto Chromium. Firefox utilizza PDF.js, un renderer basato su JavaScript sviluppato da Mozilla che funziona interamente all'interno del motore JavaScript del browser. Questi due motori hanno approcci fondamentalmente diversi alla gestione dei caratteri e tali differenze producono variazioni visibili nella nitidezza del testo anche durante il rendering di file sorgente PDF identici.
PDFium esegue il rendering del testo utilizzando lo stack di rendering dei caratteri nativo del sistema operativo. Su Windows, ciò significa che utilizza DirectWrite, che applica l'anti-aliasing sub-pixel ottimizzato per i display LCD. Su Mac, utilizza Core Text, che applica un diverso algoritmo anti-aliasing che dà priorità alla fedeltà della forma rispetto all'allineamento della griglia di pixel. Queste differenze nel rendering dei caratteri a livello di sistema operativo fanno sì che Caratteri PDF nello stesso PDF possano apparire notevolmente diversi se aperti in Chrome su Windows rispetto a Chrome su Mac, prima ancora di considerare le differenze tra browser.
PDF.js adotta un approccio completamente diverso. Rende il testo su un elemento canvas HTML5 utilizzando l'API di rendering del testo canvas del browser. Ciò significa che la qualità del rendering del testo dipende dall'implementazione del canvas del browser, che varia tra Firefox e Chrome, e dalla logica di corrispondenza dei caratteri del browser, che determina il modo in cui vengono individuati e caricati i caratteri a cui si fa riferimento nel PDF. Un carattere che Chrome individua nella directory dei caratteri di sistema ed esegue il rendering con DirectWrite con accelerazione hardware può essere abbinato da Firefox a una variante di carattere leggermente diversa o renderizzato tramite un diverso percorso del codice anti-aliasing.
Prova Modifica PDF
Nessuna installazione necessaria. Funziona direttamente nel tuo browser.
Incorporamento, sostituzione dei caratteri e loro impatto sulla nitidezza del testo
Un PDF che incorpora completamente tutti i suoi caratteri dovrebbe teoricamente essere visualizzato in modo identico in ogni visualizzatore perché i dati esatti dei caratteri necessari per visualizzare il testo sono all'interno del file. In pratica, anche i caratteri completamente incorporati vengono visualizzati in modo diverso tra i browser perché il rasterizzatore dei caratteri, il componente che converte i contorni dei caratteri in pixel dello schermo, è diverso in ciascun motore di rendering. PDFium utilizza FreeType o il rasterizzatore nativo del sistema operativo a seconda della piattaforma. PDF.js si basa sul rendering del testo su tela del browser, che utilizza indirettamente lo stack di rendering del testo del sistema operativo tramite la pipeline di rendering del browser.
Quando i caratteri non sono incorporati nel PDF, cosa comune nei documenti creati dalle suite per ufficio e nei driver di stampa su PDF che fanno riferimento ai caratteri di sistema anziché incorporarli, l'esperienza Visualizzazione PDF diverge ancora di più tra i browser. Chrome e Firefox hanno ciascuno la propria logica di sostituzione dei caratteri e il proprio set di caratteri sostitutivi predefiniti. Un PDF che fa riferimento a "Helvetica" senza incorporarlo può essere visualizzato in Arial su un browser, in un diverso sostituto sans-serif su un altro e come rettangoli vuoti su un terzo se non è configurato alcun sostituto adatto.
Il suggerimento sui caratteri, il processo di regolazione dei contorni dei caratteri per allinearli con la griglia di pixel a piccole dimensioni per una visualizzazione più nitida sullo schermo, è un'altra fonte di variazione della nitidezza tra browser. I visualizzatori PDF desktop applicano le istruzioni sui suggerimenti sui caratteri incorporate nel file dei caratteri. PDF.js, durante il rendering tramite un'area di disegno del browser, potrebbe ignorare o applicare parzialmente le istruzioni di suggerimento poiché l'API dell'area di disegno non espone il controllo dei suggerimenti sui caratteri all'applicazione. Ciò significa che le dimensioni ridotte del testo, in genere 10 punti e inferiori, possono apparire più morbide o meno distinte nei visualizzatori basati su browser rispetto ai visualizzatori desktop sullo stesso computer.
Differenze di anti-aliasing e loro effetto sulla nitidezza percepita
L'antialiasing attenua i bordi frastagliati dei caratteri di testo colorando i pixel dei bordi con sfumature comprese tra il colore del testo e il colore dello sfondo. Diversi algoritmi di anti-aliasing producono diverse impressioni soggettive di nitidezza e diversi motori di rendering effettuano scelte algoritmiche diverse.
L'antialiasing subpixel, utilizzato da DirectWrite su Windows, sfrutta la disposizione fisica dei subpixel rossi, verdi e blu nei display LCD per triplicare la risoluzione orizzontale effettiva del rendering del testo. Il testo reso con l'antialiasing sub-pixel appare notevolmente più nitido a piccole dimensioni rispetto al testo reso con l'antialiasing in scala di grigi, che tratta ogni pixel come un'unità uniforme. Chrome su Windows utilizza l'antialiasing sub-pixel tramite DirectWrite. Firefox su Windows utilizza l'antialiasing in scala di grigi per impostazione predefinita per il testo visualizzato su tela, che include l'output PDF.js. Lo stesso PDF visualizzato in Chrome e Firefox sullo stesso computer Windows può apparire nitido in un browser e leggermente morbido nell'altro solo a causa delle differenze di anti-aliasing.
Sui display ad alto DPI, le differenze di anti-aliasing diventano meno visibili perché la maggiore densità di pixel fornisce una risoluzione fisica sufficiente per riprodurre il testo in modo pulito anche con algoritmi di anti-aliasing più semplici. Un monitor 4K con uno scaling del sistema operativo del 200% ha abbastanza pixel per carattere che le differenze tra sub-pixel e anti-aliasing in scala di grigi sono appena percettibili. Sui display standard 1080p con ridimensionamento del 100%, dove ogni carattere viene visualizzato con relativamente pochi pixel fisici, la scelta dell'anti-aliasing ha un impatto molto maggiore sulla qualità del testo percepita.
Passaggi pratici per garantire una resa coerente del testo PDF nei browser
Se il PDF verrà visualizzato principalmente tramite il rendering basato su browser Web to PDF, diverse pratiche migliorano la coerenza del testo tra browser. Incorpora tutti i caratteri nel PDF anziché fare affidamento sui riferimenti ai caratteri di sistema. I caratteri incorporati garantiscono che ogni motore di rendering abbia accesso esattamente agli stessi dati sui caratteri, eliminando la sostituzione dei caratteri come fonte di differenze di rendering.
Utilizza caratteri progettati per il rendering dello schermo con dimensioni di testo tipiche. I caratteri con buone istruzioni di suggerimento producono risultati più coerenti tra i motori di rendering rispetto ai caratteri che si affidano al rasterizzatore per produrre buoni risultati senza suggerimenti. I caratteri ottimizzati per il Web provenienti da servizi come Google Fonts sono in genere ben indicati per la visualizzazione sullo schermo con dimensioni di testo comuni e incorporarli nei PDF destinati alla visualizzazione nel browser produce risultati cross-browser più prevedibili rispetto all'utilizzo di caratteri ottimizzati per la stampa progettati per la stampa offset.
Testa il PDF in Chrome, Firefox e Edge prima di pubblicarlo in una posizione accessibile dal Web. Un confronto fianco a fianco con uno zoom al 100% su un display a risoluzione standard rivela differenze di nitidezza del testo che vale la pena affrontare prima che il documento raggiunga gli utenti finali. Se un browser mostra un testo significativamente più morbido rispetto agli altri, la regolazione delle impostazioni di incorporamento dei caratteri o l'aumento della dimensione del corpo del testo di un punto può spesso portare tutti e tre i browser ad un accordo visivo accettabile.
Le opzioni di esportazione PDF di WukongPDF includono impostazioni di incorporamento dei caratteri che garantiscono che tutti i caratteri siano completamente incorporati nel file di output, eliminando la sostituzione dei caratteri come fonte di differenze di rendering del testo tra browser.
La tendenza più ampia nel rendering dei PDF nei browser è verso la convergenza piuttosto che verso la divergenza. Sia PDFium di Chrome che PDF.js di Firefox ricevono aggiornamenti regolari che migliorano la qualità e la coerenza del rendering del testo. Due anni fa, le differenze di rendering tra questi motori erano significativamente maggiori rispetto a oggi. Il continuo sviluppo di entrambi i motori, guidato dalla crescente importanza della visualizzazione di documenti basata sul web, sta gradualmente riducendo il divario di qualità del testo tra browser. Per gli editori di documenti, questa tendenza significa che l'investimento nei test di rendering cross-browser produce oggi documenti che verranno visualizzati in modo ancora più coerente man mano che i motori sottostanti continuano a migliorare.
Ai fini dell'accessibilità, le differenze nel rendering del testo tra i browser hanno un effetto secondario che va oltre l'estetica. Gli screen reader che estraggono il testo dai PDF renderizzati dal browser dipendono dalla precisione di estrazione del testo del browser, che è direttamente correlata al modo in cui il motore PDF del browser rappresenta il testo internamente. Un browser che rende il testo in modo nitido in genere lo estrae anche in modo accurato per l'utilizzo con lo screen reader. Il test dell'accessibilità PDF con lettori di schermo su più browser garantisce che il documento non sia solo coerente visivamente ma anche accessibile a livello di programmazione, indipendentemente dal browser preferito dall'utente del lettore di schermo.
L'impatto pratico di queste differenze tra browser dipende fortemente dal pubblico del documento e dal canale di distribuzione. Un PDF destinato al download e alla visualizzazione nell'applicazione desktop preferita del destinatario, Acrobat, Anteprima o Foxit, non necessita dell'ottimizzazione del rendering del browser. Un PDF incorporato in una pagina Web e visualizzato direttamente nel browser da centinaia o migliaia di utenti trae notevoli vantaggi dalle pratiche di test e ottimizzazione descritte in questo articolo. Abbinare l'impegno di ottimizzazione al contesto di visualizzazione principale garantisce che le risorse vengano spese dove hanno il maggiore impatto per l'utente.
La scelta del formato del carattere per l'incorporamento del PDF influisce anche sulla coerenza del rendering tra browser. I caratteri TrueType con buone istruzioni di suggerimento generalmente producono risultati più coerenti tra i motori di rendering rispetto ai caratteri PostScript Type 1, che sono un formato più vecchio con un supporto di suggerimento meno sofisticato. I caratteri OpenType che includono sia contorni TrueType che profili PostScript nello stesso file, un formato chiamato OpenType CFF, possono produrre risultati di rendering diversi a seconda del formato di contorno selezionato dal motore di rendering. Per la massima coerenza tra browser, incorpora caratteri OpenType in stile TrueType con istruzioni di suggerimento ottimizzate per la visualizzazione sullo schermo con dimensioni di testo comuni.
La gestione del colore interagisce con il rendering del testo in modi sottili che influiscono sulla nitidezza percepita. Un PDF con un profilo colore RGB incorporato può riprodurre il testo con un contrasto leggermente diverso rispetto allo sfondo rispetto allo stesso PDF senza profilo colore o con un profilo CMYK. I browser variano nel supporto della gestione del colore per il contenuto PDF e l'interazione tra la gestione del colore del browser, la calibrazione del display del sistema operativo e il profilo colore incorporato del PDF può influenzare se il testo nero appare come nero puro o come un grigio scuro leggermente più chiaro, il che influisce percettivamente sulla nitidezza anche se la risoluzione di rendering del testo è identica.
Prova Modifica PDF
Nessuna installazione necessaria. Funziona direttamente nel tuo browser.