[CSS組版]グラフィックは2つに分けられる

本記事はCSS組版アドベントカレンダー2024の4日目の記事です。

https://adventar.org/calendars/10448

多分いっぱい図を使って説明すべき記事だけど間に合わなかった。

導入

グラフィックについて、ここでは文書のメインのテキストコンテンツ以外を指すものとします。いまいち不明瞭な書き方ですが、HTMLのfigureに入れがちなものと、あとテーブルを包括したい故にこんな書き方に。或いは、キャプションを付けるコンテンツ。

扨、**グラフィックは2つに分けられる。分けられるものと分けられないものに。**あ、アトムとかモナドの話ではないです。

それはそうと、今日の投稿はidea分類での投稿です。

ページ分割を許容するグラフィック・そうでないグラフィック

ページメディアにおける文字モノのタイポグラフィは、ページ分割を超えるためのデザインがされています。この辺りは別に記事にする予定ですが、端的には別のページという切断を超えて同じグループと認識させるデザインです。これは文字という絵の完結性と、同一のフォント、もっと緩くは文字という規則による類似性、それらを組み上げることによるグルーピングの再構成といった諸々の結実です。では、通常のテキスト以外はどうか？

写真やイラストは行進行方向（横組での上下方向）の分割はNGということは明らかです。これはPDFでページを縦スクロールで読むようなケースでは実感しづらいことですが、冊子本の形態では分割されたグラフィックは下端と上端に分かれてしまい、ちょっと見られたものではありません。（これは、結合が強すぎるため切断が強調されてしまう例といえるんじゃないでしょうか。）

preformatted text；引用ブロックやコードブロックは普通に文字モノです。従って、結合の強度は通常のテキストと同じ程度になります。（逆に離れが良すぎるので、グルーピングのために装飾などで結合を強化する必要がある。）

テーブルは注意が必要で、特に罫線でrowを区切っているようなケースでrowが良い感じにページで分かれてしまうと、ページを跨いだとき、前のページの続きなのか新しいテーブルが始まったのか判別しにくいということがあります。罫線（本文と同じ色とする）は強いので。

チャート図など各種グラフは、その区分けよりもグラフごとの特徴によりけりです。円グラフはイラストに近い全体で1個のオブジェクトでしょうし、棒グラフでは目盛さえ再表示させられるならページが分かれても機能するでしょう。

そして大事なのは数式。数式はグラフィックです。少なくともCSS組版がHTMLを主要なターゲットとし、HTMLが数式についてMathMLをサポートしているので。
数式にも色々ありますが、本質的にはある程度ページ分割を許容するでしょう。ところが、MathMLにはページ分割を扱えません。よって分割されるかもしれない長さの数式を書くときは注意が必要です。

例えばtableのtr内でrowごとに数式を書くことでページ分割に耐えることができます。しかし、1行毎にMathMLを書いてtableのrowに収めると、それぞれが別のグラフィックとして扱われてしまうため、本来MathML処理系が調整してくれるはずの行同士のアキ調整を外側で調整してやらねばならなくなります。

キャプション、上から見るか下から見るか

グラフィックのキャプション位置は、組版ルールというよりは、ハウスルールに類する性質のものでしょう。（たとえばJIS X 4051は工業、基、産業規格での組版ルールであって、The Chicago Manual of Style然り、支配的であっても原理の位置にはない、はず。）

それはそれとして、基本的に文書は前から後ろへ読まれます。必然的に、グラフィックがページで分割されるとき、キャプションは上下であればどちらに書かれるべきか？と考えたとき、「そのグラフィックが何であるか」を説明するのは上；ページ分割で前側のページに配置された方が実用で有利と考えられます。すると先の項で触れたようにグラフィックの種類、ページ分割され得るかどうかによってキャプション配置の要請の強さも変わることになります。

キャプションを上側に配置する優位は述べました。しかし近年の現実の書籍やメディアで優勢なのは下側に配置されるキャプションです（要出典）。The Cicago Manual of Styleのテーブルキャプション位置のスタイルだっていつの間にか下側です。この理由について私見を述べるなら、グラフィックはそれ自体が本文に対し切断力を持ちますが、キャプションは文字で構成されるために本文と結び付きを持ってしまいます。

• （上）本文→（切断強）→グラフィック→キャプション（下）
• （上）本文→（切断弱）→キャプション→グラフィック（下）

ページ分割による切断がないWebページのようなスクロールメディアでは下に配置するキャプションが優勢になり、それに慣れた読者が大勢になるのであれば「キャプションは下」で統一した方が混乱を避けられる、のかもしれません。

もう一つの視点として、とても長いテーブルやコードブロックでは最初にちょこっとキャプションがあったところで覚えてられないというのもあります。

ソースコードが上側キャプションにされやすい一方、引用ブロックは下に置かれることも多いです。引用ブロックの場合、構造としてのページ分割云々の前に「適切な引用の長さ」というものがあるので、1ページを超えるような引用は起こりにくいということもあるかもしれません。

実際のところ、「分割されたら両方のページにキャプションを載せる」ということができれば上の議論の半分はいらないのですが、昨日の記事で触れたようにCSS組版はbreakable boxについての機能が貧弱であるので、この辺りを考えなければなりません^[1]。

脚注

1. （頑張ってCSS組版を絡めています）