Firefoxでは印刷時にbox-shadow内のテキストが画像になってしまう
私はウェブページを印刷する際に、そのページをPDF形式で保存して、そのPDFファイルを開いて印刷する。紙に印刷せずにPDFファイルのまま保存することも多い。その時に利用するのがソースネクストの「いきなりPDF」やCubeSoftの【CubePDF】である。ブラウザはFirefoxを利用していて、現在のバージョンは34.0である。
今日、あるページをPDF形式で保存して見たら、テキストの部分が汚い。文字を選択しようとすると選択できず、画像に変換されている。【CubePDF】のバグだと思って「いきなりPDF」で確認したら同じだった。ウェブページを確認したら、PDFファイルで画像に変換されてしまった部分は画像ではなくテキストで、ちゃんと文字を選択できる。歌詞を紹介するサイトのように選択できない状態にはなってなかった。ソースにもちゃんと文字が書かれていた。
原因を探るためFirefoxでF12を押してツールボックス を開いて、テキストが画像になってしまう部分のスタイルシートを確認した。一つ一つチェックを外してから印刷(PDF形式で保存)したところ、【box-shadow】が指定されている部分に問題があることが分かった。
例えば次のように「style="box-shadow: 10px 10px;"」としてあるボックスであれば問題ない。
この部分のテキストは画像にならない。
この部分のテキストは画像にならない。
この部分のテキストは画像にならない。
この部分のテキストは画像にならない。
しかし、次のように「style="box-shadow: 10px 10px 10px rgba(0,0,0,0.4);"」としてあるボックスの中のテキストは【CubePDF】や「いきなりPDF」でPDFファイルを作ると、画像にされてしまう。
この部分のテキストが画像になってしまう。
この部分のテキストが画像になってしまう。
この部分のテキストが画像になってしまう。
この部分のテキストが画像になってしまう。
(このページをFirefoxで表示して「いきなりPDF」などで印刷すれば確認できるはず。)
サンプルのHTMLファイルを作ってIE8で確認したところ、そちらでは問題が生じなかった。だからFirefoxのバグかもしれない。PDF形式にせずに紙に印刷した場合については確認してない。もしも汚いようなら騒がれていると思うが、Googleで検索しても私は見つけられなかったので問題が無いのかもしれない。Firefoxユーザーで【CubePDF】や「いきなりPDF」を使ってPDF形式で保存する人がどの程度いるか分からないが、この問題について書いたサイトも見つけることができなかった。他のPDFファイル生成ソフトなら問題が無いのだろうか? もしもFirefoxの問題だとしたら、改善されるのだろうか? それが知りたい。とりあえず、問題が起こることと、対処法(box-shadow を無効にして印刷する)は分かったので、同じトラブルに遭った時に思い出せるように、ここに記録しておく。
追記(2015/1/11):
box-shadow を無効にするブックマークレットを作った。
【shadowオフ】
追記(2015/4/5)
「通りすがり」さんにコメントを頂いたので、今ではどうだろうかと確認したら、印刷プレビューに気になるチェックボックスがあった。どうやら、アドオン【Print Edit】の機能らしい。
この機能を使ってPDF形式で保存した場合、テキストは画像にならずに、拡大しても綺麗なテキストのままだった。ただし、「PDF」という文字が「P D F」になるなど、所々に不要なスペースが挿入されていた。印刷するときは綺麗でも、PDFからテキストを抽出する際に困るだろう。
追記(2015/9/23)
Firefox 41.0 + CubePDF で、このページをPDFにしてみたところ、上記の問題は一行目だけになった。
Firefox 41.0 ではアップデートで「box-shadow の描画がより高速になりました」とのこと。
【Firefox リリースノート バージョン 41.0 — 2015/09/22 リリース】
追記(2015/12/12)
Firefox 42.0 + CubePDF 1.0.0RC8 で、このページをPDFにしてみたところ、box-shadow 内の一行目だけではなく、box-shadow の真下の文字で box-shadow に重なる部分が画像になっていることに気付いた。
私も2週間ほど前にFirefox⇒Acrobatへ印刷したpdfファイルが画像データであることに気がつき、対策が見つからなかったので標準ブラウザをIEに戻しました。半年分のpdf魚拓、特にサイズを小さくしてpdfにしたものがゴミクズになりました…表示を拡大しても字が読めないorz
AndroidのFireFoxにはページをpdf化するアドイン?がありますが、これで作ったpdfはちゃんとテキストはテキストとして出力されています。PC版は一体どういうことなんでしょう…。
もしこの件でFireFox側から改善の動きが見られたら、どうかブログにアップしてやってくださいませ。
by 通りすがり (2015-04-05 16:22)
通りすがりさん、コメントありがとうございます。
Windows 7 にしたため「いきなりPDF」は使えなくて確認できませんが、Firefox 37.0.1+CubePDFでは画像になってしまうようです。
ただ、さっき気付いたのですが、FirefoxのアドオンPrint EditにPDFで出力する機能があるようです。気付いたばかりで詳細は分かりませんが、そちらでは、このブログの記事では画像にならずテキストのままでした。
「Print Edit :: Add-ons for Firefox」
https://addons.mozilla.org/ja/firefox/addon/print-edit/
とても気になります。Print Editは印刷したい部分を抜き出すためだけに使ってましたが、今日からはPDF形式で出力するためにも使ってみたいと思います。
by 正己 (2015-04-05 19:29)