Cómo los diferentes navegadores procesan texto PDF utilizando diferentes motores de fuentes
Cuando abres el mismo archivo PDF en Google Chrome y Mozilla Firefox en la misma computadora, dos motores de renderizado de PDF completamente diferentes procesan el documento. Chrome utiliza PDFium, una biblioteca C++ desarrollada originalmente por Foxit y ahora mantenida por Google como parte del proyecto Chromium. Firefox utiliza PDF.js, un renderizador basado en JavaScript desarrollado por Mozilla que se ejecuta completamente dentro del motor JavaScript del navegador. Estos dos motores tienen enfoques fundamentalmente diferentes para el manejo de fuentes, y esas diferencias producen variaciones visibles en la nitidez del texto incluso cuando se procesan archivos fuente PDF idénticos.
PDFium renderiza texto utilizando la pila de renderizado de fuentes nativas del sistema operativo. En Windows, esto significa que utiliza DirectWrite, que aplica suavizado de subpíxeles optimizado para pantallas LCD. En Mac, utiliza Core Text, que aplica un algoritmo anti-aliasing diferente que prioriza la fidelidad de la forma sobre la alineación de la cuadrícula de píxeles. Estas diferencias en la representación de fuentes a nivel del sistema operativo significan que las Fuentes PDF en el mismo PDF pueden verse notablemente diferentes cuando se abre en Chrome en Windows versus Chrome en Mac, incluso antes de considerar las diferencias entre navegadores.
PDF.js adopta un enfoque completamente diferente. Representa texto en un elemento de lienzo HTML5 utilizando la API de representación de texto del lienzo del navegador. Esto significa que la calidad de la representación del texto depende de la implementación del lienzo del navegador, que varía entre Firefox y Chrome, y de la lógica de coincidencia de fuentes del navegador, que determina cómo se ubican y cargan las fuentes a las que se hace referencia en el PDF. Firefox puede hacer coincidir una fuente que Chrome ubica en el directorio de fuentes del sistema y representa con DirectWrite acelerado por hardware con una variante de fuente ligeramente diferente o representada a través de una ruta de código anti-aliasing diferente.
Incrustación y sustitución de fuentes y su impacto en la nitidez del texto
En teoría, un PDF que incrusta completamente todas sus fuentes debería mostrarse de manera idéntica en cada visor porque los datos de fuente exactos necesarios para mostrar el texto están dentro del archivo. En la práctica, incluso las fuentes totalmente integradas se procesan de manera diferente en todos los navegadores porque el rasterizador de fuentes, el componente que convierte los contornos de las fuentes en píxeles de la pantalla, es diferente en cada motor de procesamiento. PDFium utiliza FreeType o el rasterizador nativo del sistema operativo según la plataforma. PDF.js se basa en la representación de texto del lienzo del navegador, que utiliza la pila de representación de texto del sistema operativo indirectamente a través del canal de representación del navegador.
Cuando las fuentes no están incrustadas en el PDF, lo cual sigue siendo común en los documentos creados por suites ofimáticas y controladores de impresión a PDF que hacen referencia a las fuentes del sistema en lugar de incrustarlas, la experiencia de Visualización de PDF diverge aún más entre los navegadores. Chrome y Firefox tienen cada uno su propia lógica de sustitución de fuentes y su propio conjunto de fuentes sustitutas predeterminadas. Un PDF que haga referencia a 'Helvetica' sin incrustarlo puede mostrarse en Arial en un navegador, en un sustituto sans-serif diferente en otro y como rectángulos en blanco en un tercero si no se configura un sustituto adecuado.
La sugerencia de fuentes, el proceso de ajustar los contornos de las fuentes para alinearlas con la cuadrícula de píxeles en tamaños pequeños para una visualización más nítida en la pantalla, es otra fuente de variación de nitidez entre navegadores. Los visores de PDF de escritorio aplican instrucciones de sugerencias de fuentes incrustadas en el archivo de fuente. PDF.js, al renderizarse a través de un lienzo de navegador, puede ignorar o aplicar parcialmente instrucciones de sugerencias porque la API del lienzo no expone el control de sugerencias de fuentes a la aplicación. Esto significa que los tamaños de texto pequeños, normalmente de 10 puntos o menos, pueden aparecer más suaves o menos distintos en los visores basados en navegador que en los visores de escritorio en la misma computadora.
Diferencias de suavizado y su efecto en la nitidez percibida
El suavizado suaviza los bordes irregulares de los caracteres de texto coloreando los píxeles del borde en tonos entre el color del texto y el color de fondo. Diferentes algoritmos de suavizado producen diferentes impresiones subjetivas de nitidez y diferentes motores de renderizado toman diferentes decisiones de algoritmo.
El suavizado de subpíxeles, utilizado por DirectWrite en Windows, aprovecha la disposición física de los subpíxeles rojos, verdes y azules en las pantallas LCD para triplicar la resolución horizontal efectiva de la representación de texto. El texto renderizado con suavizado de subpíxeles se ve notablemente más nítido en tamaños pequeños que el texto renderizado con suavizado en escala de grises, que trata cada píxel como una unidad uniforme. Chrome en Windows utiliza suavizado de subpíxeles a través de DirectWrite. Firefox en Windows utiliza suavizado en escala de grises de forma predeterminada para el texto renderizado en lienzo, que incluye la salida PDF.js. El mismo PDF visto en Chrome y Firefox en la misma computadora con Windows puede verse nítido en un navegador y ligeramente suave en el otro únicamente debido a las diferencias de suavizado.
En pantallas de alto DPI, las diferencias de suavizado se vuelven menos visibles porque la mayor densidad de píxeles proporciona suficiente resolución física para representar el texto de manera limpia incluso con algoritmos de suavizado más simples. Un monitor 4K con una escala del 200 por ciento del sistema operativo tiene suficientes píxeles por carácter como para que las diferencias entre el suavizado de subpíxeles y en escala de grises sean apenas perceptibles. En pantallas estándar de 1080p con una escala del 100 por ciento, donde cada carácter se representa con relativamente pocos píxeles físicos, la opción de suavizado tiene un impacto mucho mayor en la calidad del texto percibido.
Pasos prácticos para garantizar una representación coherente del texto PDF en todos los navegadores
Si el PDF se verá principalmente a través de Web to PDF representación basada en navegador, varias prácticas mejoran la coherencia del texto entre navegadores. Incruste todas las fuentes en el PDF en lugar de depender de las referencias de fuentes del sistema. Las fuentes integradas garantizan que cada motor de renderizado tenga acceso exactamente a los mismos datos de fuente, eliminando la sustitución de fuentes como fuente de diferencias de renderizado.
Utilice fuentes diseñadas para la representación en pantalla en tamaños de texto típicos. Las fuentes con buenas instrucciones de sugerencias producen resultados más consistentes en los motores de renderizado que las fuentes que dependen del rasterizador para producir buenos resultados sin sugerencias. Las fuentes optimizadas para la web de servicios como Google Fonts suelen estar bien diseñadas para su visualización en pantalla en tamaños de texto comunes, e incrustarlas en archivos PDF destinados a la visualización en el navegador produce resultados más predecibles en todos los navegadores que el uso de fuentes optimizadas para impresión diseñadas para la impresión en offset.
Pruebe el PDF en Chrome, Firefox y Edge antes de publicarlo en una ubicación accesible desde la web. Una comparación lado a lado con un zoom del 100 por ciento en una pantalla de resolución estándar revela diferencias en la nitidez del texto que vale la pena abordar antes de que el documento llegue a los usuarios finales. Si un navegador muestra un texto significativamente más suave que los demás, ajustar la configuración de incrustación de fuentes o aumentar el tamaño del texto del cuerpo en un punto a menudo puede hacer que los tres navegadores tengan un acuerdo visual aceptable.
Las opciones de exportación de PDF de WukongPDF incluyen configuraciones de incrustación de fuentes que garantizan que todas las fuentes estén completamente incrustadas en el archivo de salida, eliminando la sustitución de fuentes como fuente de diferencias en la representación de texto entre navegadores.
La tendencia más amplia en la representación de PDF del navegador es hacia la convergencia en lugar de la divergencia. Tanto PDFium de Chrome como PDF.js de Firefox reciben actualizaciones periódicas que mejoran la calidad y la coherencia de la representación del texto. Hace dos años, las diferencias de renderizado entre estos motores eran significativamente mayores que hoy. El desarrollo continuo de ambos motores, impulsado por la creciente importancia de la visualización de documentos basados en la web, está reduciendo gradualmente la brecha en la calidad del texto entre navegadores. Para los editores de documentos, esta tendencia significa que la inversión actual en pruebas de renderizado entre navegadores produce documentos que se renderizarán de manera aún más consistente a medida que los motores subyacentes sigan mejorando.
A efectos de accesibilidad, las diferencias en la representación del texto entre navegadores tienen un efecto secundario que va más allá de la estética. Los lectores de pantalla que extraen texto de archivos PDF renderizados por el navegador dependen de la precisión de la extracción de texto del navegador, que está directamente relacionada con la forma en que el motor PDF del navegador representa el texto internamente. Un navegador que representa el texto de forma nítida normalmente también lo extrae con precisión para su uso como lector de pantalla. Probar la accesibilidad de PDF con lectores de pantalla en múltiples navegadores garantiza que el documento no solo sea visualmente consistente sino también accesible mediante programación, independientemente del navegador que prefiera el usuario del lector de pantalla.
El impacto práctico de estas diferencias entre navegadores depende en gran medida de la audiencia del documento y del canal de distribución. Un PDF destinado a descargarse y visualizarse en la aplicación de escritorio preferida del destinatario, Acrobat, Preview o Foxit, no necesita optimización de procesamiento del navegador. Un PDF incrustado en una página web y visto directamente en el navegador por cientos o miles de usuarios se beneficia sustancialmente de las prácticas de prueba y optimización descritas en este artículo. Hacer coincidir el esfuerzo de optimización con el contexto de visualización principal garantiza que los recursos se gasten donde tienen el mayor impacto de cara al usuario.
La elección del formato de fuente para la incrustación de PDF también afecta la coherencia de la representación en todos los navegadores. Las fuentes TrueType con buenas instrucciones de sugerencias generalmente producen resultados más consistentes en los motores de renderizado que las fuentes PostScript Type 1, que son un formato más antiguo con soporte de sugerencias menos sofisticado. Las fuentes OpenType que incluyen contornos TrueType y PostScript en el mismo archivo, un formato llamado OpenType CFF, pueden producir diferentes resultados de renderizado según el formato de esquema que seleccione el motor de renderizado. Para obtener la máxima coherencia en todos los navegadores, incorpore fuentes OpenType con sabor TrueType con instrucciones de sugerencias optimizadas para la visualización en pantalla en tamaños de texto comunes.
La gestión del color interactúa con la representación del texto de maneras sutiles que afectan la nitidez percibida. Un PDF con un perfil de color RGB incrustado puede representar texto con un contraste ligeramente diferente respecto al fondo en comparación con el mismo PDF sin perfil de color o con un perfil CMYK. Los navegadores varían en su soporte de administración de color para contenido PDF, y la interacción entre la administración de color del navegador, la calibración de pantalla del sistema operativo y el perfil de color incrustado del PDF puede afectar si el texto negro aparece como negro puro o como un gris oscuro ligeramente más claro, lo que afecta perceptivamente la nitidez incluso aunque la resolución de representación del texto sea idéntica.