MD-Blog_Web Creative

どうもどうもこんにちは。食べることが大好きなマークアッパーです。ダイエットの進捗、ぜんぜんダメです(¯―¯٥)

印刷対応

ところで皆さん、ウェブサイトの印刷対応って、どこまで対応されてますか？

最近は、印刷対応するケース自体が減っている気がしますし、対応するとしても、ブラウザでの見た目そのままではなく、不要な要素（ナビゲーションなど）を省いたシンプルなコンテンツを印刷できるように対応するケースも多いのではないでしょうか。
ブラウザのデフォルト設定だと背景色や背景画像が印刷されなかったりしますもんね（Microsoft Edge以外は背景を印刷するオプションが付いてますが）。

とはいえ、「ブラウザでの見た目そのままで印刷したい！」というご要望をいただくことも、ままあったりしますよね。

アイコン画像

いろいろ検討した結果、私はアイコン画像にはSVG形式を使うことが多いです。
特に、ラベルが付いているなどでアイコン画像を補助的に使う場合には、CSSの background-image プロパティで指定しています。

背景SVG × 印刷 × IE

この background-image プロパティで指定したSVG画像を、Internet Explorer（以下IE）で印刷しようとすると、問題が起こります。
きちんと画像が印刷されてくれないのです。

img要素を使った場合や、CSSの content プロパティで指定した場合には、問題は起こらず、IEでもちゃんと印刷されるんですけどね。謎です。

どんな現象が起きるのか？

たとえば、こんなSVG画像があったとしまして...

これを background-image で指定したものを印刷してみます。

IE以外のブラウザでは問題なく印刷されるのですが、
（↓Chromeでの印刷プレビュー画面のスクリーンショット）

IEではこの通り。
（↓IE11での印刷プレビュー画面のスクリーンショット）

欠けてしまうのです...。

SVGファイルの記述に問題があるのか、CSSの指定の仕方に問題があるのか...。いろいろ修正を試みてみたのですが、解決できず。IEのバグなんじゃないかなぁ...。

回避方法 その1

簡単な回避策としては、SVG形式をやめてPNG形式にするという方法があります。

が。それではSVG形式のメリットであるスケーラビリティが損なわれてしまい、ひとつの画像を複数箇所で、異なる大きさで使用している場合に、キレイに表示されない可能性がある、もしくは複数の画像を用意しなければいけない可能性がある、というデメリットが生じてしまいます。

回避方法 その2

なんとかSVG形式のままでいけないものかと足掻いていたところ、友人のアドバイスにより回避策を発見できました。
それは、viewBox の width/height の値を大きくするという方法です。

印刷結果を見るに、左上を起点として全体の6割程度しか表示されていないように見えます。なので、6割程度に全体が収まるように、viewBox の width/height の値を、たとえばわかりやすく倍にするのです。そして、background-size プロパティの値も倍にして、background-position プロパティの値を調整すれば...

（↓IE11での印刷プレビュー画面のスクリーンショット）

IEでも全体がきちんと印刷されるようになりましたー！　わーい！

ただし、気を付けなければいけないこともありますので、併せて紹介しておきますね。

注意点 その1

viewBoxの値を大きくしており、SVG画像には余計な余白ができていることになるので、背景画像を繰り返し（ background-repeat: repeat; など）で使用したい場合には、隙間ができてしまってダメ、ということになります。

それも、viewBox の width/height の値をちょうど倍にしていれば、うまく回避することができます。背景画像を複数（ background-repeat プロパティの値が repeat であれば4つ、repeat-x または repeat-y であれば2つ）指定して、それぞれの background-position プロパティの値を調整して重ならないように並べることができれば、解決！
ちょっと強引な方法ですけどネ。

注意点 その2

私が出くわした範囲での話になるのですが、「 clipPath 」が作られていると、この回避方法を用いてもIEでは画像全体が印刷されてくれませんでした。

もし不要な clipPath であれば、それを削除することで回避できます。が、必要なものであれば、残念ながら今のところ回避策を見つけられていません。何か（SVGの利用 or IEでの印刷）を諦めるしかないかもしれません...。

さいごに...

回避方法があるとは言え、けっこう強引ですし、数が多いとなかなか大変だったりもしますので、ご利用は計画的に...(笑)。

まぁ、こういう問題に直面してる人、そんなにいらっしゃらないような気がしますので、大丈夫なのかな？　どうなのかな？
できればIEさんのバグが直ってくれるとありがたいのですけどね。あと、Edgeでも背景が印刷できるようになると助かるのですけどね！　ね！！