公開日: 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 生成コンテンツを使用します。その場合はターゲットにするボックスの
@ルールを使用します次の 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>
次に、footnote の値 float を使用して、このテキストを脚注に変換します。ドキュメントが印刷されると、段落から削除され、脚注として表示されます。
.fn {
float: footnote;
}