Como diferentes navegadores processam texto PDF usando diferentes mecanismos de fonte
Quando você abre o mesmo arquivo PDF no Google Chrome e no Mozilla Firefox no mesmo computador, dois mecanismos de renderização de PDF completamente diferentes processam o documento. O Chrome usa PDFium, uma biblioteca C++ desenvolvida originalmente pela Foxit e agora mantida pelo Google como parte do projeto Chromium. O Firefox usa PDF.js, um renderizador baseado em JavaScript desenvolvido pela Mozilla que roda inteiramente dentro do mecanismo JavaScript do navegador. Esses dois mecanismos têm abordagens fundamentalmente diferentes para o manuseio de fontes, e essas diferenças produzem variações visíveis na nitidez do texto, mesmo ao renderizar arquivos PDF de origem idênticos.
PDFium renderiza texto usando a pilha de renderização de fontes nativa do sistema operacional. No Windows, isso significa que ele usa DirectWrite, que aplica anti-aliasing de subpixel otimizado para monitores LCD. No Mac, ele usa Core Text, que aplica um algoritmo anti-aliasing diferente que prioriza a fidelidade da forma em vez do alinhamento da grade de pixels. Essas diferenças de renderização de fontes no nível do sistema operacional significam que Fontes PDF no mesmo PDF podem parecer visivelmente diferentes quando abertas no Chrome no Windows versus Chrome no Mac, antes mesmo de considerar as diferenças entre navegadores.
PDF.js adota uma abordagem completamente diferente. Ele renderiza texto em um elemento de tela HTML5 usando a API de renderização de texto de tela do próprio navegador. Isso significa que a qualidade da renderização do texto depende da implementação da tela do navegador, que varia entre Firefox e Chrome, e da lógica de correspondência de fontes do navegador, que determina como as fontes referenciadas no PDF são localizadas e carregadas. Uma fonte que o Chrome localiza no diretório de fontes do sistema e renderiza com DirectWrite acelerado por hardware pode ser combinada pelo Firefox com uma variante de fonte ligeiramente diferente ou renderizada por meio de um caminho de código anti-aliasing diferente.
Experimente Editar PDF
Nenhuma instalação necessária. Funciona diretamente no seu navegador.
Incorporação, substituição de fontes e seu impacto na nitidez do texto
Um PDF que incorpora totalmente todas as suas fontes deveria, teoricamente, ser renderizado de forma idêntica em todos os visualizadores, porque os dados exatos da fonte necessários para exibir o texto estão dentro do arquivo. Na prática, mesmo as fontes totalmente incorporadas são renderizadas de maneira diferente nos navegadores porque o rasterizador de fontes, o componente que converte os contornos das fontes em pixels da tela, é diferente em cada mecanismo de renderização. PDFium usa FreeType ou rasterizador nativo do sistema operacional, dependendo da plataforma. PDF.js depende da renderização de texto da tela do navegador, que usa a pilha de renderização de texto do sistema operacional indiretamente por meio do pipeline de renderização do navegador.
Quando as fontes não estão incorporadas no PDF, o que permanece comum em documentos criados por suítes de escritório e drivers de impressão em PDF que fazem referência a fontes do sistema em vez de incorporá-las, a experiência Visualização de PDF diverge ainda mais entre os navegadores. O Chrome e o Firefox têm sua própria lógica de substituição de fontes e seu próprio conjunto de fontes substitutas padrão. Um PDF que faz referência a 'Helvetica' sem incorporá-lo pode ser exibido em Arial em um navegador, em um substituto sem serifa diferente em outro e como retângulos em branco em um terceiro, se nenhum substituto adequado for configurado.
A dica de fonte, o processo de ajustar os contornos da fonte para alinhá-los com a grade de pixels em tamanhos pequenos para uma exibição de tela mais nítida, é outra fonte de variação de nitidez entre navegadores. Os visualizadores de PDF para desktop aplicam instruções de dicas de fonte incorporadas no arquivo de fonte. PDF.js, renderizado por meio de uma tela do navegador, pode ignorar ou aplicar parcialmente instruções de dicas porque a API da tela não expõe o controle de dicas de fonte ao aplicativo. Isso significa que tamanhos de texto pequenos, normalmente de 10 pontos ou menos, podem parecer mais suaves ou menos distintos em visualizadores baseados em navegador do que em visualizadores de desktop no mesmo computador.
Diferenças de anti-aliasing e seus efeitos na nitidez percebida
A suavização de serrilhado suaviza as bordas irregulares dos caracteres de texto, colorindo os pixels das bordas em tons entre a cor do texto e a cor de fundo. Diferentes algoritmos de anti-aliasing produzem diferentes impressões subjetivas de nitidez, e diferentes mecanismos de renderização fazem diferentes escolhas de algoritmos.
O anti-aliasing de subpixel, usado pelo DirectWrite no Windows, aproveita o arranjo físico dos subpixels vermelhos, verdes e azuis em monitores LCD para triplicar a resolução horizontal efetiva da renderização de texto. O texto renderizado com anti-aliasing de subpixel parece visivelmente mais nítido em tamanhos pequenos do que o texto renderizado com anti-aliasing em escala de cinza, que trata cada pixel como uma unidade uniforme. O Chrome no Windows usa anti-aliasing de subpixel por meio do DirectWrite. O Firefox no Windows usa suavização de escala de cinza por padrão para texto renderizado em tela, que inclui saída PDF.js. O mesmo PDF visualizado no Chrome e no Firefox no mesmo computador Windows pode parecer nítido em um navegador e ligeiramente suave no outro apenas devido às diferenças de anti-aliasing.
Em telas de alto DPI, as diferenças de anti-aliasing tornam-se menos visíveis porque a maior densidade de pixels fornece resolução física suficiente para renderizar o texto de forma limpa, mesmo com algoritmos de anti-aliasing mais simples. Um monitor 4K com escala de sistema operacional de 200 por cento tem pixels por caractere suficientes para que as diferenças entre subpixel e anti-aliasing em escala de cinza sejam quase imperceptíveis. Em telas padrão de 1080p com escala de 100 por cento, onde cada caractere é renderizado com relativamente poucos pixels físicos, a escolha de anti-aliasing tem um impacto muito maior na qualidade percebida do texto.
Etapas práticas para garantir uma renderização consistente de texto em PDF em todos os navegadores
Se o PDF for visualizado principalmente por meio da renderização baseada em navegador Web para PDF, diversas práticas melhoram a consistência do texto entre navegadores. Incorpore todas as fontes no PDF em vez de depender de referências de fontes do sistema. As fontes incorporadas garantem que cada mecanismo de renderização tenha acesso exatamente aos mesmos dados de fonte, eliminando a substituição de fontes como fonte de diferenças de renderização.
Use fontes projetadas para renderização de tela em tamanhos de texto típicos. Fontes com boas instruções de dicas produzem resultados mais consistentes em mecanismos de renderização do que fontes que dependem do rasterizador para produzir bons resultados sem dicas. Fontes otimizadas para a Web de serviços como o Google Fonts são normalmente bem indicadas para exibição na tela em tamanhos de texto comuns, e incorporá-las em PDFs destinados à visualização no navegador produz resultados mais previsíveis em vários navegadores do que usar fontes otimizadas para impressão projetadas para impressão offset.
Teste o PDF no Chrome, Firefox e Edge antes de publicá-lo em um local acessível pela web. Uma comparação lado a lado com zoom de 100% em uma tela de resolução padrão revela diferenças de nitidez do texto que valem a pena abordar antes que o documento chegue aos usuários finais. Se um navegador mostrar um texto significativamente mais suave do que os outros, ajustar as configurações de incorporação de fonte ou aumentar o tamanho do corpo do texto em um ponto pode muitas vezes fazer com que todos os três navegadores tenham uma concordância visual aceitável.
As opções de exportação de PDF do WukongPDF incluem configurações de incorporação de fontes que garantem que todas as fontes sejam totalmente incorporadas no arquivo de saída, eliminando a substituição de fontes como uma fonte de diferenças de renderização de texto entre navegadores.
A tendência mais ampla na renderização de PDF em navegador é de convergência e não de divergência. Tanto o PDFium do Chrome quanto o PDF.js do Firefox recebem atualizações regulares que melhoram a qualidade e consistência da renderização de texto. Há dois anos, as diferenças de renderização entre esses motores eram significativamente maiores do que são hoje. O desenvolvimento contínuo de ambos os motores, impulsionado pela crescente importância da visualização de documentos baseada na Web, está gradualmente a reduzir a lacuna na qualidade do texto entre navegadores. Para os editores de documentos, essa tendência significa que o investimento atual em testes de renderização entre navegadores produz documentos que serão renderizados de forma ainda mais consistente à medida que os mecanismos subjacentes continuarem a melhorar.
Para fins de acessibilidade, as diferenças de renderização de texto entre navegadores têm um efeito secundário que vai além da estética. Os leitores de tela que extraem texto de PDFs renderizados pelo navegador dependem da precisão da extração de texto do navegador, que está diretamente relacionada à forma como o mecanismo de PDF do navegador representa o texto internamente. Um navegador que renderiza o texto com nitidez normalmente também o extrai com precisão para uso no leitor de tela. Testar a acessibilidade do PDF com leitores de tela em vários navegadores garante que o documento não seja apenas visualmente consistente, mas também acessível programaticamente, independentemente do navegador de preferência do usuário do leitor de tela.
O impacto prático dessas diferenças entre navegadores depende muito do público do documento e do canal de distribuição. Um PDF destinado a download e visualização no aplicativo de desktop preferido do destinatário, Acrobat, Preview ou Foxit, não precisa de otimização de renderização do navegador. Um PDF incorporado em uma página da web e visualizado diretamente no navegador por centenas ou milhares de usuários se beneficia substancialmente das práticas de teste e otimização descritas neste artigo. Combinar o esforço de otimização com o contexto de visualização principal garante que os recursos sejam gastos onde têm maior impacto voltado para o usuário.
A escolha do formato da fonte para incorporação de PDF também afeta a consistência da renderização entre navegadores. Fontes TrueType com boas instruções de dicas geralmente produzem resultados mais consistentes em mecanismos de renderização do que fontes PostScript Type 1, que são um formato mais antigo com suporte a dicas menos sofisticado. Fontes OpenType que incluem contornos TrueType e contornos PostScript no mesmo arquivo, um formato chamado OpenType CFF, podem produzir resultados de renderização diferentes dependendo do formato de contorno selecionado pelo mecanismo de renderização. Para máxima consistência entre navegadores, incorpore fontes OpenType com sabor TrueType com instruções de dicas otimizadas para exibição na tela em tamanhos de texto comuns.
O gerenciamento de cores interage com a renderização do texto de maneiras sutis que afetam a nitidez percebida. Um PDF com um perfil de cores RGB incorporado pode renderizar texto com contraste ligeiramente diferente em relação ao plano de fundo em comparação com o mesmo PDF sem perfil de cores ou com perfil CMYK. Os navegadores variam em seu suporte de gerenciamento de cores para conteúdo PDF, e a interação entre o gerenciamento de cores do navegador, a calibração de exibição do sistema operacional e o perfil de cores incorporado do PDF pode afetar se o texto preto aparece como preto puro ou como um cinza escuro ligeiramente mais claro, o que afeta perceptualmente a nitidez, mesmo que a resolução de renderização do texto seja idêntica.
Experimente Editar PDF
Nenhuma instalação necessária. Funciona diretamente no seu navegador.