鴨のいいカモです

ここでアヒルの話題は出てきません。予めご了承下さい。

@pageでの長さ単位はem,ex以外にしよう

css

とあるWebサイトをPDF化するにあたり、偶数ページと奇数ページでマージンを変更する必要があったのですが(いわゆるノド余白)、OS標準の機能やAcrobatでもなかなかうまくいかず、以下の助言が。

そうかPaged Mediaって聞いたことがあったわ。Paged Mediaは印刷など、ページの概念が存在するメディアに関する仕様です。@pageは、印刷時のCSSを指定するものと考えるといいでしょう。そして@page:leftで左側ページ、@page:rightで右側ページのCSSを指定することができます。早速以下のCSSを適用してみました。

@page { margin: 1em; }
@page: left { margin-right: 3em; }
@page: right { margin-left: 3em; }

しかし効かない。ちょろっと調べてみると、:left - CSS | MDNではFirefox未実装、Chromeは？なのでまだ実装されてないのかな、とその場はさっくり諦めました。

しかし、その後帰路にて「もしかしたらベンダプレフィックスが必要だったのかも」と気になってきたので、まずは仕様から読んでみることにしました。

仕様はこちら。CSS2.1のお話です。

Paged media

で、@pageについて書いてある13.2.1 Page marginsのところを見てみると、こんな文が。

The page context has no notion of fonts, so 'em' and 'ex' units are not allowed.

emとexは使えないとな！これか！ということで以下を試してみたところ、

@page { margin: 1cm; }
@page: left { margin-right: 5cm; }
@page: right { margin-left: 5cm; }

できた！

f:id:labduck:20140114223207p:plain

言われてみればたしかにpage contextにはフォントの概念はないよな…

これでやりたかったことが1つ解決しました。@ さん、ありがとうございます！

ちなみにPaged Mediaの次の仕様はCSS Paged Media Module Level 3として標準化中、現在Workind Draftです。ヘッダやフッタを挿入したり、ページ数を入れたりとかできるらしいです。楽しみですね。