さまざまなブラウザがさまざまなフォント エンジンを使用して PDF テキストをレンダリングする方法
同じコンピュータ上の Google Chrome と Mozilla Firefox で同じ PDF ファイルを開くと、2 つのまったく異なる PDF レンダリング エンジンがドキュメントを処理します。 Chrome は、もともと Foxit によって開発され、現在は Chromium プロジェクトの一部として Google によって保守されている C++ ライブラリである PDFium を使用します。 Firefox は、Mozilla によって開発された JavaScript ベースのレンダラーである PDF.js を使用しており、完全にブラウザーの JavaScript エンジン内で実行されます。これら 2 つのエンジンはフォント処理に対するアプローチが根本的に異なり、これらの違いにより、同一の PDF ソース ファイルをレンダリングする場合でも、テキストの鮮明さに目に見える変化が生じます。
PDFium は、オペレーティング システムのネイティブ フォント レンダリング スタックを使用してテキストをレンダリングします。 Windows では、これは、LCD ディスプレイ用に最適化されたサブピクセル アンチエイリアスを適用する DirectWrite を使用することを意味します。 Mac では、ピクセル グリッドの配置よりも形状の忠実性を優先する別のアンチエイリアス アルゴリズムを適用する Core Text が使用されます。これらの OS レベルのフォント レンダリングの違いは、同じ PDF 内の PDF フォント が、ブラウザ間の違いを考慮する前に、Windows の Chrome と Mac の Chrome で開いた場合に著しく異なる可能性があることを意味します。
PDF.js はまったく異なるアプローチを採用しています。ブラウザー独自のキャンバス テキスト レンダリング API を使用して、テキストを HTML5 キャンバス要素にレンダリングします。つまり、テキスト レンダリングの品質は、Firefox と Chrome で異なるブラウザのキャンバス実装と、PDF で参照されるフォントがどのように配置され読み込まれるかを決定するブラウザのフォント マッチング ロジックに依存します。 Chrome がシステム フォント ディレクトリ内で検索し、ハードウェア アクセラレータの DirectWrite でレンダリングするフォントは、Firefox によってわずかに異なるフォント バリアントと照合されたり、別のアンチエイリアシング コード パスを通じてレンダリングされたりすることがあります。
フォントの埋め込み、置換、およびそれらがテキストの鮮明さに与える影響
すべてのフォントを完全に埋め込んだ PDF は、テキストを表示するために必要な正確なフォント データがファイル内にあるため、理論的にはどのビューアでも同じように表示されるはずです。実際には、フォントのアウトラインを画面ピクセルに変換するコンポーネントであるフォント ラスタライザーがレンダリング エンジンごとに異なるため、完全に埋め込まれたフォントでもブラウザーごとにレンダリングが異なります。 PDFium は、プラットフォームに応じて FreeType または OS ネイティブのラスタライザーを使用します。 PDF.js はブラウザのキャンバス テキスト レンダリングに依存しており、ブラウザのレンダリング パイプラインを通じて間接的に OS テキスト レンダリング スタックを使用します。
フォントが PDF に埋め込まれていない場合 (フォントを埋め込むのではなくシステム フォントを参照するオフィス スイートや Print-to-PDF ドライバーで作成された文書では一般的ですが、PDF 表示 エクスペリエンスはブラウザー間でさらに異なります)。 Chrome と Firefox にはそれぞれ、独自のフォント置換ロジックと独自のデフォルトの置換フォントのセットがあります。 「Helvetica」を埋め込まずに参照する PDF は、あるブラウザでは Arial で表示され、別のブラウザでは別のサンセリフ代替で表示され、適切な代替が設定されていない場合は 3 番目のブラウザでは空白の長方形として表示されることがあります。
フォント ヒンティングは、より鮮明な画面表示を実現するために小さなサイズのピクセル グリッドに合わせてフォントのアウトラインを調整するプロセスであり、ブラウザー間で鮮明度が変動するもう 1 つの原因です。デスクトップ PDF ビューアは、フォント ファイルに埋め込まれたフォント ヒント命令を適用します。キャンバス API はフォント ヒント制御をアプリケーションに公開しないため、ブラウザ キャンバスを介してレンダリングする PDF.js は、ヒント命令を無視したり、部分的に適用したりする場合があります。つまり、通常は 10 ポイント以下の小さなテキスト サイズは、同じコンピュータ上のデスクトップ ビューアに比べて、ブラウザ ベースのビューアでは柔らかく見えたり、鮮明に見えなかったりする可能性があります。
アンチエイリアシングの違いと知覚される鮮明さへの影響
アンチエイリアシングは、エッジ ピクセルをテキストの色と背景色の間の色合いで着色することにより、テキスト文字のギザギザのエッジを滑らかにします。アンチエイリアシング アルゴリズムが異なれば、シャープネスの主観的な印象も異なり、レンダリング エンジンが異なれば、アルゴリズムの選択も異なります。
Windows 上の DirectWrite で使用されるサブピクセル アンチエイリアスは、LCD ディスプレイの赤、緑、青のサブピクセルの物理的配置を利用して、テキスト レンダリングの実効水平解像度を 3 倍にします。サブピクセル アンチエイリアスでレンダリングされたテキストは、各ピクセルを均一な単位として扱うグレースケール アンチエイリアスでレンダリングされたテキストよりも、小さなサイズで著しく鮮明に見えます。 Windows 上の Chrome は、DirectWrite によるサブピクセル アンチエイリアスを使用します。 Windows 上の Firefox は、PDF.js 出力を含むキャンバスでレンダリングされたテキストに対してデフォルトでグレースケール アンチエイリアスを使用します。同じ Windows コンピュータ上の Chrome と Firefox で同じ PDF を表示すると、アンチエイリアシングの違いだけで、一方のブラウザでは鮮明に見え、もう一方のブラウザではわずかに柔らかく見えることがあります。
高 DPI ディスプレイでは、より単純なアンチエイリアシング アルゴリズムでもテキストをきれいにレンダリングするのに十分な物理解像度が高いピクセル密度によって提供されるため、アンチエイリアシングの違いは目立ちにくくなります。オペレーティング システムの 200% スケーリングの 4K モニターには、サブピクセルとグレースケールのアンチエイリアシングの違いがほとんど認識できないほど、文字ごとに十分なピクセルがあります。 100% のスケーリングでの標準の 1080p ディスプレイでは、各文字が比較的少ない物理ピクセルでレンダリングされるため、アンチエイリアシングの選択は、知覚されるテキストの品質にはるかに大きな影響を与えます。
ブラウザ間で一貫した PDF テキストのレンダリングを保証する実践的な手順
PDF が主に Web から PDF へのブラウザベースのレンダリングを通じて表示される場合、いくつかの方法によりブラウザ間のテキストの一貫性が向上します。システムのフォント参照に依存するのではなく、すべてのフォントを PDF に埋め込みます。埋め込みフォントは、すべてのレンダリング エンジンがまったく同じフォント データにアクセスできることを保証し、レンダリングの違いの原因となるフォントの置換を排除します。
一般的なテキスト サイズで画面をレンダリングするように設計されたフォントを使用します。適切なヒンティング命令を備えたフォントは、ラスタライザーに依存してヒントなしで良好な結果を生成するフォントよりも、レンダリング エンジン全体でより一貫した結果を生成します。 Google Fonts などのサービスの Web に最適化されたフォントは、通常、一般的なテキスト サイズでの画面表示用に適切にヒントが示されており、ブラウザーでの表示を目的とした PDF にフォントを埋め込むと、オフセット印刷出力用に設計された印刷用に最適化されたフォントを使用するよりも、ブラウザー間でより予測可能な結果が得られます。
Web アクセス可能な場所に PDF を公開する前に、Chrome、Firefox、Edge で PDF をテストしてください。標準解像度のディスプレイで 100% ズームで並べて比較すると、テキストの鮮明さの違いが明らかになり、文書がエンド ユーザーに届く前に対処する価値があります。 1 つのブラウザーで他のブラウザーよりも大幅に柔らかいテキストが表示される場合、フォントの埋め込み設定を調整するか、本文のテキスト サイズを 1 ポイント大きくすることで、3 つのブラウザーすべての視覚的な一致を許容できる場合がよくあります。
WukongPDF の PDF エクスポート オプションには、すべてのフォントが出力ファイルに完全に埋め込まれるようにするフォント埋め込み設定が含まれており、ブラウザ間のテキスト レンダリングの違いの原因となるフォントの置換を排除します。
ブラウザ PDF レンダリングにおける広範な傾向は、発散ではなく収束に向かっています。 Chrome の PDFium と Firefox の PDF.js は両方とも、テキスト レンダリングの品質と一貫性を向上させる定期的な更新を受け取ります。 2 年前、これらのエンジン間のレンダリングの違いは現在よりも大幅に大きかった。 Web ベースのドキュメント表示の重要性の高まりに後押しされて、両方のエンジンが継続的に開発されており、ブラウザ間のテキスト品質の差は徐々に減少しています。ドキュメント発行者にとって、この傾向は、今日のクロスブラウザー レンダリング テストへの投資により、基盤となるエンジンが向上し続けるにつれて、より安定してレンダリングされるドキュメントが生成されることを意味します。
アクセシビリティの目的で、ブラウザ間のテキストレンダリングの違いは、見た目の美しさを超えた二次的な影響を及ぼします。ブラウザでレンダリングされた PDF からテキストを抽出するスクリーン リーダーは、ブラウザのテキスト抽出精度に依存します。これは、ブラウザの PDF エンジンが内部でテキストを表現する方法に直接関係します。テキストを鮮明にレンダリングするブラウザは、通常、スクリーン リーダーで使用するためにテキストを正確に抽出します。複数のブラウザ間でスクリーン リーダーを使用した PDF のアクセシビリティをテストすると、スクリーン リーダー ユーザーがどのブラウザを好むかに関係なく、文書の視覚的な一貫性が確保されるだけでなく、プログラム的にアクセスできることも保証されます。
これらのブラウザ間の違いによる実際的な影響は、ドキュメントの閲覧者と配布チャネルに大きく依存します。ダウンロードして、受信者の優先デスクトップ アプリケーション (Acrobat、Preview、または Foxit) で表示することを目的とした PDF には、ブラウザーのレンダリングの最適化は必要ありません。 Web ページに埋め込まれ、数百または数千のユーザーが PDF をブラウザで直接閲覧すると、この記事で説明したテストと最適化の実践から大きなメリットが得られます。最適化の取り組みを主な表示コンテキストに一致させることで、ユーザーに最も影響を与える場所にリソースが確実に費やされます。
PDF 埋め込み用のフォント形式の選択は、ブラウザー間でのレンダリングの一貫性にも影響します。一般に、適切なヒンティング命令を備えた TrueType フォントは、ヒンティング サポートがあまり洗練されていない古い形式である PostScript Type 1 フォントよりも、レンダリング エンジン全体でより一貫した結果を生成します。同じファイル内に TrueType アウトラインと PostScript アウトラインの両方を含む OpenType フォント (OpenType CFF と呼ばれる形式) は、レンダリング エンジンが選択するアウトライン形式に応じて異なるレンダリング結果を生成する可能性があります。ブラウザ間の一貫性を最大限に高めるには、一般的なテキスト サイズでの画面表示用に最適化されたヒント命令を備えた TrueType 風味の OpenType フォントを埋め込みます。
カラー管理は、知覚される鮮明さに影響を与える微妙な方法でテキストのレンダリングと相互作用します。 RGB カラー プロファイルが埋め込まれた PDF では、カラー プロファイルなしまたは CMYK プロファイルを使用した同じ PDF と比較して、背景に対してわずかに異なるコントラストでテキストがレンダリングされる場合があります。 PDF コンテンツのカラー管理サポートはブラウザによって異なります。また、ブラウザのカラー管理、オペレーティング システムの表示調整、および PDF に埋め込まれたカラー プロファイルの間の相互作用は、黒いテキストが純粋な黒として表示されるか、わずかに明るいダーク グレーとして表示されるかに影響を与える可能性があり、テキスト レンダリングの解像度が同じであっても、知覚的には鮮明さに影響します。