Comment différents navigateurs affichent le texte PDF à l'aide de différents moteurs de police
Lorsque vous ouvrez le même fichier PDF dans Google Chrome et dans Mozilla Firefox sur le même ordinateur, deux moteurs de rendu PDF complètement différents traitent le document. Chrome utilise PDFium, une bibliothèque C++ initialement développée par Foxit et désormais maintenue par Google dans le cadre du projet Chromium. Firefox utilise PDF.js, un moteur de rendu basé sur JavaScript développé par Mozilla qui s'exécute entièrement dans le moteur JavaScript du navigateur. Ces deux moteurs ont des approches fondamentalement différentes en matière de gestion des polices, et ces différences produisent des variations visibles dans la netteté du texte, même lors du rendu de fichiers source PDF identiques.
PDFium restitue le texte à l'aide de la pile de rendu de polices native du système d'exploitation. Sous Windows, cela signifie qu'il utilise DirectWrite, qui applique un anticrénelage sous-pixel optimisé pour les écrans LCD. Sur Mac, il utilise Core Text, qui applique un algorithme d'anticrénelage différent qui donne la priorité à la fidélité de la forme plutôt qu'à l'alignement de la grille de pixels. Ces différences de rendu des polices au niveau du système d'exploitation signifient que les Polices PDF dans le même PDF peuvent être sensiblement différentes lorsqu'elles sont ouvertes dans Chrome sous Windows par rapport à Chrome sur Mac, avant même de prendre en compte les différences entre navigateurs.
PDF.js adopte une approche complètement différente. Il restitue le texte sur un élément de canevas HTML5 à l'aide de la propre API de rendu de texte de canevas du navigateur. Cela signifie que la qualité du rendu du texte dépend de l'implémentation du canevas du navigateur, qui varie entre Firefox et Chrome, et de la logique de correspondance des polices du navigateur, qui détermine la manière dont les polices référencées dans le PDF sont localisées et chargées. Une police que Chrome localise dans le répertoire des polices système et restituée avec DirectWrite accéléré par le matériel peut être mise en correspondance par Firefox avec une variante de police légèrement différente ou rendue via un chemin de code d'anticrénelage différent.
Essayez de modifier le PDF
Aucune installation nécessaire. Fonctionne directement dans votre navigateur.
Intégration, substitution de polices et leur impact sur la netteté du texte
Un PDF qui intègre entièrement toutes ses polices devrait théoriquement s'afficher de manière identique dans chaque visualiseur, car les données de police exactes nécessaires à l'affichage du texte se trouvent à l'intérieur du fichier. En pratique, même les polices entièrement intégrées s'affichent différemment selon les navigateurs, car le rastériseur de polices, le composant qui convertit les contours des polices en pixels d'écran, est différent dans chaque moteur de rendu. PDFium utilise FreeType ou le rastériseur natif du système d'exploitation en fonction de la plate-forme. PDF.js s'appuie sur le rendu du texte du canevas du navigateur, qui utilise indirectement la pile de rendu du texte du système d'exploitation via le pipeline de rendu du navigateur.
Lorsque les polices ne sont pas intégrées dans le PDF, ce qui reste courant dans les documents créés par les suites bureautiques et les pilotes d'impression au format PDF qui font référence aux polices système plutôt que de les intégrer, l'expérience Affichage PDF diverge encore plus selon les navigateurs. Chrome et Firefox ont chacun leur propre logique de substitution de polices et leur propre ensemble de polices de substitution par défaut. Un PDF qui fait référence à « Helvetica » sans l'intégrer peut s'afficher en Arial sur un navigateur, dans un autre substitut sans empattement sur un autre et sous forme de rectangles vides sur un troisième si aucun substitut approprié n'est configuré.
L’indication de police, le processus d’ajustement des contours de police pour les aligner sur la grille de pixels dans des tailles réduites pour un affichage à l’écran plus net, est une autre source de variation de netteté entre navigateurs. Les visionneuses PDF de bureau appliquent des instructions d'indication de police intégrées dans le fichier de police. PDF.js, rendu via un canevas de navigateur, peut ignorer ou appliquer partiellement les instructions d'indication, car l'API du canevas n'expose pas le contrôle des indications de police à l'application. Cela signifie que les textes de petite taille, généralement de 10 points et moins, peuvent apparaître plus doux ou moins distincts dans les visionneuses basées sur un navigateur que dans les visionneuses de bureau sur le même ordinateur.
Différences d'anti-aliasing et leur effet sur la netteté perçue
L'anticrénelage lisse les bords irréguliers des caractères du texte en colorant les pixels des bords dans des tons compris entre la couleur du texte et la couleur d'arrière-plan. Différents algorithmes d'anticrénelage produisent différentes impressions subjectives de netteté, et différents moteurs de rendu font différents choix d'algorithmes.
L'anticrénelage des sous-pixels, utilisé par DirectWrite sous Windows, tire parti de la disposition physique des sous-pixels rouges, verts et bleus dans les écrans LCD pour tripler la résolution horizontale effective du rendu du texte. Le texte rendu avec l'anticrénelage sous-pixel semble nettement plus net dans les petites tailles que le texte rendu avec l'anticrénelage en niveaux de gris, qui traite chaque pixel comme une unité uniforme. Chrome sous Windows utilise l'anticrénelage sous-pixel via DirectWrite. Firefox sous Windows utilise l'anticrénelage en niveaux de gris par défaut pour le texte rendu sur le canevas, qui inclut la sortie PDF.js. Le même PDF affiché dans Chrome et Firefox sur le même ordinateur Windows peut paraître net dans un navigateur et légèrement mou dans l'autre uniquement en raison des différences d'anticrénelage.
Sur les écrans à haute résolution, les différences d'anticrénelage deviennent moins visibles car la densité de pixels plus élevée offre une résolution physique suffisante pour restituer le texte proprement, même avec des algorithmes d'anticrénelage plus simples. Un moniteur 4K avec une mise à l'échelle du système d'exploitation de 200 % a suffisamment de pixels par caractère pour que les différences entre l'anticrénelage sous-pixel et l'anticrénelage en niveaux de gris soient à peine perceptibles. Sur les écrans 1080p standard à une mise à l'échelle de 100 %, où chaque caractère est rendu avec relativement peu de pixels physiques, le choix de l'anticrénelage a un impact beaucoup plus important sur la qualité perçue du texte.
Étapes pratiques pour garantir un rendu cohérent du texte PDF dans tous les navigateurs
Si le PDF doit être visualisé principalement via le rendu basé sur un navigateur Web vers PDF, plusieurs pratiques améliorent la cohérence du texte entre navigateurs. Intégrez toutes les polices dans le PDF plutôt que de vous fier aux références de polices système. Les polices intégrées garantissent que chaque moteur de rendu a accès exactement aux mêmes données de police, éliminant ainsi la substitution de polices comme source de différences de rendu.
Utilisez des polices conçues pour le rendu à l’écran avec des tailles de texte typiques. Les polices avec de bonnes instructions d'indication produisent des résultats plus cohérents dans les moteurs de rendu que les polices qui s'appuient sur le rastériseur pour produire de bons résultats sans indications. Les polices optimisées pour le Web provenant de services tels que Google Fonts sont généralement bien adaptées à l'affichage à l'écran dans des tailles de texte courantes, et leur intégration dans des PDF destinés à être visualisés par un navigateur produit des résultats multi-navigateurs plus prévisibles que l'utilisation de polices optimisées pour l'impression conçues pour la sortie sur presse offset.
Testez le PDF dans Chrome, Firefox et Edge avant de le publier sur un emplacement accessible sur le Web. Une comparaison côte à côte avec un zoom de 100 % sur un écran à résolution standard révèle des différences de netteté du texte qui méritent d'être corrigées avant que le document n'atteigne les utilisateurs finaux. Si un navigateur affiche un texte nettement plus doux que les autres, l'ajustement des paramètres d'intégration des polices ou l'augmentation de la taille du corps du texte d'un point peuvent souvent amener les trois navigateurs à un accord visuel acceptable.
Les options d'exportation PDF du WukongPDF incluent des paramètres d'intégration de polices qui garantissent que toutes les polices sont entièrement intégrées dans le fichier de sortie, éliminant ainsi la substitution de polices en tant que source de différences de rendu de texte entre navigateurs.
La tendance plus large dans le rendu PDF du navigateur est à la convergence plutôt qu'à la divergence. PDFium de Chrome et PDF.js de Firefox reçoivent des mises à jour régulières qui améliorent la qualité et la cohérence du rendu du texte. Il y a deux ans, les différences de rendu entre ces moteurs étaient nettement plus importantes qu'aujourd'hui. Le développement continu des deux moteurs, motivé par l'importance croissante de la visualisation de documents sur le Web, réduit progressivement l'écart de qualité des textes entre les navigateurs. Pour les éditeurs de documents, cette tendance signifie que l’investissement actuel dans les tests de rendu multi-navigateurs produit des documents dont le rendu sera encore plus cohérent à mesure que les moteurs sous-jacents continueront à s’améliorer.
Pour des raisons d'accessibilité, les différences de rendu du texte entre les navigateurs ont un effet secondaire qui va au-delà de l'esthétique. Les lecteurs d'écran qui extraient le texte des PDF rendus par le navigateur dépendent de la précision de l'extraction du texte du navigateur, qui est directement liée à la manière dont le moteur PDF du navigateur représente le texte en interne. Un navigateur qui restitue le texte de manière nette l'extrait généralement également avec précision pour une utilisation avec un lecteur d'écran. Tester l'accessibilité des PDF avec des lecteurs d'écran sur plusieurs navigateurs garantit que le document est non seulement visuellement cohérent, mais également accessible par programme, quel que soit le navigateur préféré de l'utilisateur d'un lecteur d'écran.
L'impact pratique de ces différences entre navigateurs dépend fortement de l'audience du document et du canal de distribution. Un PDF destiné à être téléchargé et visualisé dans l'application de bureau préférée du destinataire, Acrobat, Preview ou Foxit, ne nécessite pas d'optimisation du rendu du navigateur. Un PDF intégré dans une page Web et consulté directement dans le navigateur par des centaines ou des milliers d'utilisateurs bénéficie considérablement des pratiques de test et d'optimisation décrites dans cet article. Faire correspondre l'effort d'optimisation au contexte de visualisation principal garantit que les ressources sont dépensées là où elles ont le plus d'impact sur l'utilisateur.
Le choix du format de police pour l’intégration de PDF affecte également la cohérence du rendu entre navigateurs. Les polices TrueType dotées de bonnes instructions d'indication produisent généralement des résultats plus cohérents sur tous les moteurs de rendu que les polices PostScript Type 1, qui sont un format plus ancien avec une prise en charge des indications moins sophistiquée. Les polices OpenType qui incluent à la fois des contours TrueType et des contours PostScript dans le même fichier, un format appelé OpenType CFF, peuvent produire des résultats de rendu différents en fonction du format de contour sélectionné par le moteur de rendu. Pour une cohérence maximale entre les navigateurs, intégrez des polices OpenType de type TrueType avec des instructions d'indication optimisées pour l'affichage à l'écran dans des tailles de texte courantes.
La gestion des couleurs interagit avec le rendu du texte de manière subtile qui affecte la netteté perçue. Un PDF avec un profil de couleur RVB intégré peut restituer le texte avec un contraste légèrement différent par rapport à son arrière-plan par rapport au même PDF sans profil de couleur ou avec un profil CMJN. Les navigateurs varient dans leur prise en charge de la gestion des couleurs pour le contenu PDF, et l'interaction entre la gestion des couleurs du navigateur, l'étalonnage de l'affichage du système d'exploitation et le profil de couleur intégré du PDF peut affecter si le texte noir apparaît comme un noir pur ou comme un gris foncé légèrement plus clair, ce qui affecte perceptuellement la netteté même si la résolution de rendu du texte est identique.
Essayez de modifier le PDF
Aucune installation nécessaire. Fonctionne directement dans votre navigateur.