☰

インターネットブラウザに表示されるPDFページとフォントの色を変更する

tag-icon • tag-icon google-chrome firefox browser pdf colors
インターネットブラウザに表示されるPDFページとフォントの色を変更する

Chrome、Firefox、その他のブラウザで開いたときに、PDF ファイルのページの表示色やフォントを変更できますか?

ノートパソコンで長いPDFテキストを読みながら、ページの背景とテキストの両方の色を変更する。 私はない色を反転することに興味がある — 暗い黒の背景に明るい白のテキストが表示される

ここに画像の説明を入力してください

ただし、これら 2 つの要素のそれぞれの色を調整して、電子書籍リーダーが電子書籍を表示する方法と同様に、よりバランスが取れて見た目に美しいものを実現します。

ここに画像の説明を入力してください

これはさまざまなPDFリーダーで可能です。LinuxではAdobe Reader、Foxit Reader、 そして特にマスターPDFエディターは、テキストベースのPDF（PDFとして保存/エクスポート/印刷されたテキスト文書）だけでなく、画像ベースのPDF（紙のテキストをスキャンしてPDFとして保存したもの）でも表示されるページとフォントの色を変更できます。詳細については、ここ。

インターネット ブラウザについてはどうでしょうか? 主要なブラウザは PDF ファイルの読み取りに優れていることは知っています。

答え1

うーん、Chromeは現在まだできませんが、古いブラウザは機能の範囲内で好きなだけカスタマイズできます。ここで反転するには、単にI ここに画像の説明を入力してください ここに画像の説明を入力してください

現在のFirefoxでは、色を変更するブックマークレットを設定できますが、結果は異なる場合があります。
https://stackoverflow.com/questions/61814564/how-can-i-enable-dark-mode-when-viewing-a-pdf-file-in-firefox

次の例では、こことで示されているようにトグルバリアントを使用しています。https://stackoverflow.com/a/71777470/10802527

ここに画像の説明を入力してください

PDF を「ブラウザ」で表示するには、実際にはダウンロードする必要がある (ページのコピーが HTML テキスト オーバーレイの画像として偽装されている場合を除く) ことを理解している人は多くありません。したがって、Chromium/Edge では「ダウンロードのみ」に設定し、PDF を「ダーク リーダー」で開くことができます。ブラウザがキャッシュされたコピーを処理するのと同じように、不要になった PDF は後で破棄できます。 ここに画像の説明を入力してください

Windows の場合は、SumatraPDF (上記) または Okular (下記) を使用できます。Linux の場合は、Okular ネイティブまたは Wine の SumatraPDF (32/64/Arm) を使用できます。
ここに画像の説明を入力してください

答え2

Firefox バージョン 112.02 では、これが機能します:

Firefox PDF ビューアの背景色と前景色を強制する

アドレスバーに次のように入力します:

about:config

検索フィールドに次のように入力します:

pdfjs

次の構成オプションを設定します。

pdfjs.forcePageColors          true
pdfjs.pageColorsBackground     #202020 
pdfjs.pageColorsForeground     #d1d1d1

PDF が読み込まれたタブに切り替えて、F5 (更新) を押して結果を確認します。

背景色と前景色のみが強制されるため、PDF 内の画像はそのまま残り、非常に便利です (他の古いソリューションでは、PDF が完全に反転されていました)。

サンプル画像1

対

サンプル画像2

答え3

ChromiumベースのブラウザとEdgeをチェックしましたが、答えはノーです。付属のPDFビューアは非常に基本的なものです。サードパーティの拡張機能に注目してください。私は見つけられませんでした。

答え4

おそらくこの回避策で:

これをブラウザコンソール（Ctrlshifti）に貼り付けてクリックしますenter

function toggle() {
    let q = document.querySelectorAll('#nightify')
    if(q.length) {
        q[0].parentNode.removeChild(q[0])
        return false
    }
    var h = document.getElementsByTagName('head')[0],
        s = document.createElement('style');
    s.setAttribute('type', 'text/css');
    s.setAttribute('id', 'nightify');
    s.appendChild(document.createTextNode('html{-webkit-filter:invert(100%) hue-rotate(180deg) contrast(70%) !important; background: #fff;} .line-content {background-color: #fefefe;}'));
    h.appendChild(s); 
    return true
}

toggle()

ソース：https://dev.to/jochemstoel/re-add-dark-mode-to-any-website-with-just-a-few-lines-of-code-phl

その他のオプション:

var cover = document.createElement("div");
let css = `
position: fixed;
pointer-events: none;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: #cecece;
mix-blend-mode: difference;
z-index: 1;
`
cover.setAttribute("style", css);
document.body.appendChild(cover);

出典:https://windowsreport.com/invert-colors-pdf/

関連情報