結構古い Working Draft だけどこの辺
https://www.w3.org/TR/2014/WD-css-gcpm-3-20140513/
string-set プロパティと string 関数が使えるので セクションタイトルをページの右上に常に表示したいなら
<!doctype html>
<meta charset="utf-8" />
<title>title</title>
<style>
@page {
size: A4;
@top-right {
content: string(heading);
}
}
h1 {
string-set: heading content();
}
</style>
<h1>h1</h1>
<p>p</p>
という感じで h1 のスタイルで string-set を指定して heading に h1 タグ内の content を設定
右上のヘッダ部分の content で heading を参照
これでヘッダにセクションタイトルを設定できる
それならドキュメントタイトルを左上に表示にしたければ title タグに同じようなことをすればできるはず
<style>
@page {
size: A4;
@top-left {
content: string(title);
}
@top-right {
content: string(heading);
}
}
title {
string-set: title content();
}
h1 {
string-set: heading content();
}
</style>
これで表示されるかと思ったけど表示されない
title タグは head タグの中だからスタイルの対象外？
調べると head タグの中ではなく display: none の要素は対象外らしい
https://github.com/Kozea/WeasyPrint/issues/473
回避策は head と title タグを display: none じゃなくすることらしい
だけど head タグを block にすると表示対象になるのでその中も表示される
head タグ内の他のタグ(style タグなど)は display: none だから 問題は title タグ自身も表示されること
これを避けるために visibility を hidden にする
それだけだと見えないだけでレイアウトに影響するのでサイズを 0 にする
これで左上にドキュメントタイトルが表示できるようになった
head, head title {
display: block;
visibility: hidden;
width: 0;
height: 0;
}
結構前からある問題みたいだし そろそろ修正されて欲しいけど
