公開日: 2024 年 10 月 30 日
Chrome 131 以降では、CSS を使用して、ページの印刷時にページの余白にコンテンツを追加できます。この記事では、ページ分割されたメディアのページモデルと、この機能を使用してウェブページからの印刷出力を改善する方法について説明します。
CSS には、ページ付きメディアを扱う仕様、CSS ページ付きメディア モジュール、ページ付きメディア用の CSS 生成コンテンツが含まれています。ページが印刷（PDF への印刷を含む）される場合にのみ使用される機能が定義されます。この CSS をサポートするユーザー エージェントがあり、HTML と CSS から書籍などの印刷物を生成できます。ただし、アプリケーションから PDF を印刷または作成する必要があるにもかかわらず、この機能はウェブブラウザで十分にサポートされていません。
Chrome と Firefox は @page アットルールをサポートしています。このルールを使用すると、印刷するページのサイズと、コンテンツの周囲の余白のサイズを定義できます。Chrome 131 以降では、生成されたコンテンツを使用して、関連するマージン at-rule をターゲットに設定し、マージンにコンテンツを追加することもできます。
ページモデル
ページ形式のメディアで使用されるページモデルは、ページボックスを定義します。これは紙のシートです。ページ ボックス内には、ページの余白、ページの枠線、ページの余白、最後にコンテンツが表示されるページ領域があります。コンテンツが印刷されると、コンテンツを収めるのに必要な数のページに分割されます。
ページの余白は 16 個のボックスに分割され、それぞれに対応する at ルールが設定されます。
@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 生成コンテンツを使用します。この場合は、ターゲットとするボックスに関連する at ルールを使用します。次の 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" hr>ef="#re<f1>"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;
}