CSS Generated Content for Paged Media Module 3
概要
書籍のようなページ分割されたメディアのための仕様です。ページ上部の欄外に毎ページ表示される見出し (running head) であったり、ページ下の欄外に表示される脚注などのために、ページの欄外にコンテンツを生成できるようになります。
ページ欄外にはコンテンツを配置するためのボックスが定義され、ページの上下に 5 つずつ、左右に 3 つずつのボックスがあります。
この仕様では Named strings と Running elements という 2 つの言葉が定義されます。
Named strings
string-set プロパティーは、その値を名前とした変数を作り、要素のテキストコンテンツを保存します。この変数は named string と呼ばれます。Named string のテキストコンテンツは string() 関数を使って受け取ることができます。この変数はページごとに値を変更することができます。
次のように変数を定義することができます。この例の場合、foo 変数にその要素のテキストコンテンツである Hello world が設定されます。また、bar 変数には、h2::before のテキストコンテンツと in wonderland を結合した alice in wonderland が設定されます。
code:html
<h1>Hello world</h1>
<h2>I'm bob</h2>
<style>
h1 {
string-set: foo content();
}
h2::before {
content: 'alice';
}
h2 {
string-set: bar content(before) ' in wonderland';
}
</style>
変数には、その要素のコンテンツボックスが作成されたときに値が割り当てられます。
変数にはページごとに開始値 (entry value) と終了値 (exit value) という概念があります。これは string(foo, first) や string(foo, last) のようにして取得することができます。ページ内で最初に現れた要素の値が開始値に、最後の要素の値が終了値になります。また、要素が次のページにもまたぐ場合、その要素の値が string(foo, start) で取得できます。
これらの変数は、次のようにしてページ欄外に表示することができます。この例では左上の欄外に alice in wonderland が表示されます。
code:css
@page {
@top-left {
content: string(bar);
}
}
Running elements
Named strings では値を生成して欄外に表示することができましたが、running elements では既存の要素を欄外に移動させて表示することができます。
※構文を見直して、移動だけではなくコピーもできるようにしたほうが良いかもっていう提案がされてます。
例えば、次の例では左上の欄外に h1 要素が移動します。
code:html
<h1>Hello world</h1>
<style>
@page {
@top-left {
content: element(foo);
}
}
h1 {
position: running(foo);
}
</style>