Webページ印刷時に pre ブロックの中で改ページしたい

技術ネタ

ブログやメモページにコードを貼り付けるときに<pre><code>を使っているのだけど， これだと印刷時に長いコードの直前で改ページが入ってしまい，見栄えが非常によろしくない． これをどうにかしようと悪戦苦闘した．

もともと長い<pre>ブロックの直前で改ページが入るのは， ブラウザのデフォルトスタイルシートで<pre>ブロック内の改ページが抑制されている からだと思っていた． 実際に，firefoxのデフォルトスタイルシートではそのような記述がある．

@media print {
    pre {
        page-break-inside: avoid;
    }
}

よって，この設定をcssで上書きしてやれば問題は解決されるはずだ．

/* 自作スタイルシートに以下を追加 */
@media print {
    pre {
        page-break-inside: auto;
    }
}

しかし，実際にやってみると firefox でも IE6 でも問題は解決されない． <pre> ブロック内での改ページは抑制されたままだ．

よくよく調べると，このpage-break-insideに対しては firefoxは1.x系，2系ともに未対応であるらしい (Bugzilla@Mozilla - Bug 132035)． デフォルトスタイルシートで指定してあるので油断していた． 結局，CSS2対応度が高いOpera9を使うことで実際に<pre>タグ内の改ページは実現できた．

CSS周りのブラウザ実装状況にはいつも苦労させられる．