ブラウザの出力時にwebページの文字色を変更したい

Question

初めまして。
表題の件で行き詰まったので質問させていただきます。
有識者の方がいらっしゃいましたらご助言頂ければ幸いです。

html内に下記を埋め込みwebサイトの印刷を行ったところ
文字色が黒で表示されます。
どうにか文字色を白に変更したいのですが方法が分からず質問させて頂きました。

<p style="background:#000; color:#fff!important;">
印刷します
</p>
<button onclick="window.print();">このページを印刷する</button>

$(function(){
	$('button').click(function(){
		window.print();
	});
});

環境はmacで使用ブラウザはchromeです。
※safari/firefoxでも同現象を確認済です。

以上です
宜しくお願い致します。

Answer 1

以下は個人的見解です. 出典もありませんし, より適切な方法があるかもしれません.

---

HTML印刷時の文字の色はbackground-color等の背景設定と, ブラウザの印刷設定における「背景色・画像の印刷有無」によって変化します（印刷した文字を正しく読めるようにブラウザが勝手に設定を上書きしてしまう）.

そのため, いかなる場合においても「黒色背景で白抜き文字を印刷する」ことを実現するのは困難であり, 諦めた方がよいと思います.

なお文字の印字品質を犠牲にしてよいのであれば, 印刷専用のSVGフィルタを用意することで擬似的に「黒色背景の白抜き文字」を作ることは可能です.

div{
	background-color:black;
	color: white;
}
@media print{
	div{
		background-color:transparent;
		filter: url(#f);
	}
}

<svg width="0" height="0">
	<defs>
		<filter id="f" width="100%" height="100%">
			<feFlood flood-color="black" result="bg"/>
			<feFlood flood-color="white"/>
			<feComposite in2="SourceAlpha" operator="in"/>
			<feMerge>
				<feMergeNode in="bg"/>
				<feMergeNode/>
			</feMerge>
		</filter>
	</defs>
</svg>
<div>
ああああ
</div>

なおSVGフィルタの動作原理上, 白抜き対象のノードにはborderやbackground-image等の装飾スタイルを一切指定することが出来なくなるため, やはり事実上無理と捉えたほうが良いかもしれません.

※この他にも「canvas要素で画像にしてしまう」「SVGでテキストを表示する」と言った方法が考えられますが, 印刷のためだけにHTML構造を弄るのが適切かどうかは判断つきかねます.

Comments

[onobeka]

ご回答ありがとうございました＾＾