サイトリニューアルと同時に印刷用スタイルも書いてみたんですが、ふと気がついたのは、pre 要素の中身って印刷するとき紙からはみ出しちゃって全部印刷できてないじゃんっていうこと。
Blog の記事を印刷する人ってそんなにはいないと思いますが、一応対策しておくかということで書いてみました。と言っても、別に目新しいことはしていませんので期待せずにお願いします。
さて、当サイトで使用している pre 要素には、画面表示用のスタイルとして、「overflow: scroll;」 を指定、改行せずにはみ出した部分はスクロールバーで表示させていますが、当然ながら印刷時はスクロールバーなんて出ないので、普通に紙からはみ出して終了と。
なので、印刷スタイルでは pre 要素を基本的に整形済みテキスト （Preformatted Text） として表示しつつも、印刷領域からはみ出してしまう場合のみ適当に改行が入ってうまく収まるようにしてあげないといけません。
基本的に各ブラウザのデフォルトスタイルでは、pre 要素に対して、「white-space: pre;」 が指定されているわけです。これは空白文字はそのまま、改行も入れずに記述されたまま表示するための指定。目的を達成するためにはこれをうまいこと上書きしてやればいいわけですね。
で、まずは一番簡単な方法として、CSS 2.1 で white-space プロパティの値として定義された、「pre-wrap」 を指定してあげる方法があります。これは基本的に 「white-space: pre」 と同様に表示しつつも、行ボックスがいっぱいになったら自動で改行するという指定。まさに求めている通りってことで、ブラウザさえ対応していればこれだけで対策は終わり。
しかし、残念ながら今のところこいつに対応しているのは Opera 8 以降のみなので、これだけだと駄目。
Firefox は独自拡張という形で 「pre-wrap」 と同じ役割を持つ 「-moz-pre-wrap」 という独自拡張の値をサポートしているので、それを追加。
次に IE は 5.5 以降から word-wrap プロパティ （CSS3で策定中） を独自拡張としてサポートしているので、「word-wrap: break-word;」 と指定して解決。ちなみに、Safari もこの指定を解釈するので、IE と Safari がこれで解決。これで現状の主要ブラウザはカバーしましたね。
ここまででどういう感じになるかというと、
pre {
white-space: pre-wrap; /* CSS3 対応ブラウザ向け （Opera 8 以降とか） */
white-space: -moz-pre-wrap; /* Firefox （Mozilla） 向け */
word-wrap: break-word; /* IE5.5 以降と Safari 向け */
}
こんな感じですね。
あと、Opera 7 だと 「-o-pre-wrap」 が使えたり、Opera 6 以前だと 「-pre-wrap」 だったり古いブラウザを挙げれば色々あるけどあんまり気にしない。
まとめると、CSS の最後の方に
@media print {
pre {
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -o-pre-wrap;
white-space: -pre-wrap;
word-wrap: break-word;
}
}
とか書いておけば OK ということで。
ただし、すごーく長い URI とか、空白を含まず長い半角文字列に関しては、Firefox で折り返しが発生しないので、ご注意ください。
