公開日: 2024 年 10 月 30 日
Chrome 131 以降では、CSS を使用して、ページの印刷時に余白にコンテンツを追加できます。この記事では、ページ メディアのページモデルと、この機能を使用してウェブページの印刷出力を改善する方法について説明します。
CSS には、ページ メディアを扱う仕様（CSS ページ メディア モジュールと CSS ページ メディアの生成コンテンツ）が含まれています。ページが印刷される（PDF への印刷を含む）場合にのみ使用される機能を定義します。この CSS をサポートし、HTML と CSS から書籍やその他の印刷物を作成できるユーザー エージェントがあります。しかし、アプリケーションから印刷したり PDF を作成したりする必要は頻繁にあるにもかかわらず、この機能はウェブブラウザで十分にサポートされていませんでした。
Chrome と Firefox は @page @ 規則をサポートしています。このルールでは、印刷するページのサイズと、コンテンツの周囲の余白のサイズを定義できます。Chrome 131 以降では、生成されたコンテンツを使用して、関連するマージン at-rule をターゲットにすることで、マージンにコンテンツを追加することもできます。
ページモデル
ページ メディアで使用されるページモデルは、ページボックスを定義します。これは用紙です。ページボックスの内側には、ページ マージン、ページ枠線、ページ パディングがあり、最後にコンテンツが表示されるページ領域があります。コンテンツを印刷すると、コンテンツを収めるのに必要なページ数に分割されます。
ページの余白は 16 個のボックスに分割され、それぞれに対応する @ 規則があります。
@top-left-corner@top-left@top-center@top-right@top-right-corner@left-top@left-middle@left-bottom@right-top@right-middle@right-bottom@bottom-left-corner@bottom-left@bottom-center@bottom-right@bottom-right-corner
マージン ボックスのサイズ設定
上部と下部のボックスの高さ、左側と右側のボックスの幅は、@page を使用して設定されたマージン サイズで定義されます。そのため、コーナー ボックスのサイズは、これらのマージンの交差によって作成される固定サイズになります。ただし、各コーナー間の 3 つのボックスは柔軟です。flex: auto を使用するフレックス レイアウトのボックスと同様に動作するため、スペースを埋めるように拡大されますが、1 つに長いテキスト文字列を入れ、他のものには何も入れないと、テキストを含むものが拡大され、テキストが折り返されません。
マージン ボックスにコンテンツを追加する
マージン ボックスにコンテンツを追加するには、::before 疑似要素や ::after 疑似要素の場合と同様に、CSS 生成コンテンツを使用します。この場合は、ターゲットにするボックスに関連する @ 規則を使用します。次の CSS を使用すると、左下のマージン ボックスまたは右側のページに「My book」というテキストが追加されます。また、そのテキストのスタイルも設定します。
@page :right {
@bottom-left {
content: "My book";
font-size: 9pt;
color: #333;
}
}
テキスト文字列だけでなく、ページ カウンタを余白に追加することもできます。事前定義された page カウンタには現在のページが含まれます。次の CSS を使用すると、右側のページの右下、左側のページの左下にページ番号が追加されます。
@page :right {
@bottom-right {
content: counter(page);
}
}
@page :left {
@bottom-left {
content: counter(page);
}
}
また、常に合計ページ数が含まれる pages カウンタもあります。
ページ余白を使用する際の注意事項
ブラウザから印刷する場合、表示する余白があれば、ブラウザによって自動的にページ余白コンテンツが追加されます。コンテンツを追加した場合でも、この処理は行われます。自動生成されたヘッダーとフッターは、印刷ダイアログでオフにできます。
ページの余白を 0 に設定した場合や、ブラウザのヘッダーとフッターを表示するスペースがないほど小さい値に設定した場合、ヘッダーとフッターは表示されません。
Chromium のデフォルトのページ レイアウトのコンセプトにより、印刷するドキュメントの最初のページに自動コンテンツを配置するスペースがない場合、後続のページにスペースがあっても、ブラウザのコンテンツが表示されなくなります。
ページ メディアの今後の可能性
ページ メディア仕様には、CSS を使用した印刷向けのデザインの記事で説明されている他の機能も含まれています。次の機能のいずれかのユースケースがある場合は、リンク先のバグに追加してください。
文字列を設定する
書籍では、現在の章のタイトルが余白に印刷されることがよくあります。このタイトルは、本を読み進めるにつれて変化するため、CSS にハードコードすることはできません。string-set プロパティを使用すると、HTML から値を設定して、生成されたコンテンツで使用できます。次の CSS は、章のタイトルが <h1> としてマークアップされていることを前提としています。各 <h1> の内容を取得し、右側のページの右上のマージンで使用します。次の <h1> に達すると、それ以降のマージンの値が更新されます。
h1 {
string-set: doctitle content();
}
@page :right {
@top-right {
content: string(doctitle);
margin: 30pt 0 10pt 0;
font-size: 8pt;
}
}
string-set と string() の Chromium バグ。
相互参照
ドキュメントを印刷すると、通常、他のページへの参照は、参照が見つかるページ番号で示されます。これらの相互参照は、target-counter を使用して作成できます。リンクに適用すると、リンクはウェブ上の参照にジャンプするようになり、印刷時にはページ番号が表示されます。
<a class="xref" href="#ref1">my reference</a>
a.xref:after {
content: " (page " target-counter(attr(href, url), page) ")";
}
脚注
脚注もページ メディア仕様の機能です。HTML では、脚注にするテキストを識別するためにクラスを使用します。例:
<p>This is some text <span class=”fn”>this is a footnote</span>.</p>
次に、float の footnote 値を使用して、このテキストを脚注に変換します。ドキュメントを印刷すると、段落から削除され、脚注として表示されます。
.fn {
float: footnote;
}