[CSS組版]腑分けして理解したいCSS組版 フロート・脚註
CSS組版アドベントカレンダー2024の15日目の記事です。
ナビゲーションの後半は真面目に書くのは結構重いのでまだ日を置きたい。
Web一般のフロートの使われ方のことは取り敢えず忘れる
leftかrightしか位置の選択肢が無い上に、扱いが難しくCSS FlexibleBoxやCSS Gridに役目の殆どを奪われたFloatさんの今までのことは忘れましょう。組版では、というより自動組版に於いて、フロートの役割は非常に重要です。
紙面上の決まった座標に図版を配置するものではない
CSS組版に於けるフロートも、Webでのフロート機能への期待の殆どであったであろう、そして期待を裏切り続けた**「固定的な座標への配置」のための機能ではありません**。
では何かというと、フロートとは「アンカ（非a要素）を基点に自分が嵌りそうな位置までプカプカ浮いて移動するもの」です。
ページで分断されると困るコンテンツ→フロートにして、収まりそうな位置まで移動してもらう
主にイラストやグラフといったグラフィックが、ページで分断されると困るコンテンツの代表格です。なのでfigure（図版）要素をそのままフロート指定してしまうことが多いでしょう。
figure:has(img) {
float: right;
float-wrap: wrap;
}
フロートのもう1つのポイントは、「そのままの位置では表示できないなら移動」まではいいとして「ある位置までには表示させたい」という要求です。論文誌で、自分の論文の図版が別の著者の論文の図版と同じページにまとめて表示された、なんてことになると大いに混乱するでしょうね。
図版をその位置までには表示したい、これを指定するのがclearです。
/* 論文がarticle単位であるとする */
article {
clear: both;/*次のarticleの開始位置前でフロート待機は解消される*/
}
フローコンテンツ（通常のコンテンツ）とフロート、アンカ
FlexibleBoxやGridの話はややこしくなるので考慮しない。
コンテンツが、コンテンツが配置可能な領域；本文領域上に、文字進行方向や行進行方向、ページ進行方向という流れに沿って配置されていきます。これをフローコンテンツと呼びます。
通常のコンテンツは領域の端から順に詰められていきますが、フロートはこの配置処理に猶予があります。
フロートとは「アンカ（非
a要素）を基点に自分が嵌りそうな位置までプカプカ浮いて移動するもの」
アンカは、通常、CSSによってフロートを指定したコンテンツが文書上で記述されていた位置です。
<p><figure id="figA" style="float:right";float-wrap:wrap;><img src="..."><figcaption>画像A</figcaption></figure>
<a href="#figA">画像A</a>は、○○というもので、……</p>
上の例では、figureが記述された位置がフロートfigAのアンカということになります。float:rightなので、（ページ）領域の右側でfigAが収まりそうな位置を探してfigAがフローコンテンツ「画像Aは、○○というもので、……」を押し分けて移動し、結果右端に配置されることになります。
figAが唯一のフロートで、他が残り押し退けられる対象のコンテンツだけであればそれだけの話ですが、figB、figCと同様にフロートするものがあったとき、これは押し退けられません。押し退けられなければそれの隣に次のフロートが置かれます。これを繰り返すと横幅いっぱいにフロートが並びます（stackする）。そうするとフロートは縦方向に浮動していきます。
<p><figure id="figA" style="float:right";float-wrap:wrap;><img src="..."><figcaption>画像A</figcaption></figure>
<figure id="figB" ...>...</figure>
<figure id="figC" ...>...</figure>
<figure id="figD" ...>...</figure>...
<a href="#figA">画像A</a>は、○○というもので、……</p>
「収まりそうな位置」と書きました。基本、Webページ；スクロールメディアでは行進行方向の限界はありません。しかしページメディアには一定の長さ毎に上端、下端があります。
ページフロート 行進行方向の指定拡張
「大きい図版について、ページの上端とか下端とか、テキストを読むのに邪魔にならない位置に移動したい」という要求は学術論文などでは割と頻出のものです。
inline-start・inline-end・block-start・block-end・left・right・top・bottom・noneと、かなり増えたように見えて、論理方向も増えているだけで、従来的な書き方でいえばtopとbottomが追加されたというだけです。だけと書くには利便性が段違いですが。
ややふわっとした話になりますが、図版（やコラム）というのは、テキストのを読む流れを物心の両面で中断させます。「説明上この位置に置きたいが、流して読むには邪魔だよな」というようなコンテンツを配置する必要があるとき、脇に配置して説明を続けたいというのは文書構造では割に頻出する問題です。
ところが脇に置けないものもある。
- 幅を取り過ぎる
- 主張が強すぎる
- （逆に）本文と見分け辛い
そうなってくると、ページの上端下端にあった方がより分かり易く助かります。
figure:has(>img) {
float: block-end;/* ページ下部 */
}
フロート位置の微調整 float-offset
細かい座標位置指定のためのものではないといっても、実際ちょっと動かしたりしたいときはありまして、float-offsetで指定します。基本的には文字進行方向のフロート指定なら文字進行方向、行進行方向であれば行進行方向のオフセットです[1]。
フロートの位置決定にあたっての参照エリアはその場単位か段単位かページ単位か
「収まりそうな位置」の話題ですが、「どの範囲を空いた領域と見做すか」という問題があります。
ホテルの大きい宴会場などでは、仕切りによって部屋を小さくして使ったりします。仕切りをどの程度使うかによって広さが変わるということです。フロート移動に於けるそれをフロートの参照（float-reference）エリアと呼びます。
-
inline（Antenna House Formatterではnormalが相当のはず。自信無し） -
column現在の段内で移動 -
region（Antenna House Formatterではmulticolが相当のはず。自信無し） -
pageページ（本文領域）内で移動
脚註 float: footnote
CSS組版での脚註については、根幹としてフロート機能を使うものとして挙動を理解することが重要です。脚註も役割として「説明上この位置に置きたいが、流して読むには邪魔だよな」というような内容を記述する箇所と考えれば、自然と言えるでしょう。
脚註は、ページの下部に配置されます。（日本語縦組で行進行方向の奇数ページ左端のものも脚註と呼んだりすることもありますが、とりあえず横組の話として読んでください。）
ページレイアウト、ナビゲーションの柱の話でページマージンボックスの話が出ました。脚註の置かれる領域は、ページマージンボックスではなく本文領域となります[2]。
@page {
@footnote { /*脚註領域を用意し、スタイルを記述する*/
font-size: smaller; /* 脚註の文字サイズを小さめに指定 */
}
}
おまけ 脚註の配置方法（block or inline）
脚註は基本的に1つずつブロックで並べられます。*1と*2の脚註は同じ行に並びません。ただ、そのように並べていると、脚註が沢山ある場合にページの領域を結構使います。前の脚註の終了した行内で次の行を始められると全体を圧縮可能です。これを実現するのが仕様としてはfootnote-displayです。
ただ、比較的新しめのプロパティなので、PrinceXMLではfootnote-displayで使えますが、Antenn House Formatterでは-ah-footnote-stackingという名前でcompatは無かったりします。
おまけ 脚註内容の途中ページ分割 footnote-policy
指定値がlineやらblockなのでfootnote-displayとちょっとややこしい。
脚註は基本フロートの性質を持ちますが、しかし脚註は基本的に文字列で構成されるため、脚註途中でのページ分割処理についても考える余地があります。
PrinceXMLは非対応、Vivliostyleはlineまたはautoなのでblockの挙動はしない？(未検証)
Antenna House Formatterは-ah-footnote-max-heightの指定で、アルゴリズムではなくユーザによる明示で実質的に同じ動作になるはず。
Discussion