[CSS組版]腑分けして理解したいCSS組版　ナビゲーション ターゲット～赤い衝撃～

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

https://adventar.org/calendars/10448

CSS組版の該当機能の話はそんなに分量がない一方、組版一般の話としてはかなり奥深いのがナビゲーションです。

読み物としては『索引　～の歴史　書物史を変えた大発明』がおすすめ

https://www.kobunsha.com/shelf/book/isbn/9784334100315

『索引　～の歴史　書物史を変えた大発明』（デニス・ダンカン/著　小野木明恵/訳，2023年，光文社）

本を頭から読むのとは別の流れである箇所にアクセスするシステム、それがページとページ番号という単位とアドレッシングによって大きく重要度を上げ利便性を獲得していく様子が描かれています。

ちなみに本記事では索引個別の機構についてはあんまりやりません。

ページ位置（番号）が確定していないものを参照するということ

先にページ番号について。

おさらい。ナビゲーションを2つに分類しました。

現在地の情報を示すもの ex.「ここは地獄の一丁目です」
目的地の情報 ex.「この先3kmで地獄の一丁目」

相互参照、目次、索引などは「目的地の情報」にあたります。自動組版で重要なのは、この「目的地の情報」が事前に確定してはいない、ということにあります。（目次や索引を後付けすることはできますが、ここでは説明を単純にするため一気通貫に組版処理を走らせるものとします。)

組版前に分かる情報というのは、通常は、目的の箇所のIDとなります。構造上のIDは論理的な位置を示しますが、ページ組版後の物理的なアドレス（ページ番号）ではありません。組版工程を処理系に任せる以上、そこで確定する内容については処理系に頑張って変換してもらわなければなりません。

<a href="#figA" class="xref">< /a>を参照。

target-counter()

該当位置でのカウンタの値を示します。参照できる（同一文書内）にないといけません。

a.xref::after {
/*hrefの値 idを想定 位置でのpageカウンタ → リンク先のページ番号 */
  content: target-counter(attr(href), page);
}

counter-styleを追加の引数で指定可能です。

a.xref::after { /*ローマ数字*/
  content: target-counter(attr(href), page, 'i');
}

（でも前書きとかのページ書式指定ってページ側にある方がいいよねぇ。）

target-counters()は使い所が難しい

couters()のターゲット版なのでセクション番号とか取れはするのですが、ナビゲーション文脈では、純粋なカウンタ数値が必要ない場合はどうせセクション番号を::beforeに入れたりしているのでtarget-text()で足りてしまうことが殆ど。

target-text()で対象のテキストを取れる

「図番号1 画伯のイラスト」のように図版のキャプションをfigcaptionに振っているとして、原稿テキストに直接「図番号1」のように書いてしまうのは最終手段です。その前に、そのfigcaptionをターゲットにテキストを取得可能です。

a.xref {
  content: target-text(attr(href), before) target-text(attr(href), text);
}

contentを疑似要素ではなく要素のスタイルに記述した場合、対応している処理系では要素のコンテンツを上書きします。

これを使うと、目次はol,li.a要素を書いて内容テキスト無しで済ませることが可能に。自動組版ポイント、プラス30点です。

nav.toc ol {list-style:none;}

nav.toc a::before { /*セクション番号用*/
content: target-text(attr(href, before));
margin-right: 1em;
}
nav.toc a {
content: target-text(attr(href));
}
nav.toc a { /*ページ番号*/
content: leader('.') target-counter(attr(href), page);
text-align-last: justify;
}

<nav class="toc">
<ol>
<li><a href="#topicA"></a></li>
<li><a href="#topicB"></a></li>
<li><a href="#topicC"></a></li>
</ol>
</nav>

target-counter()にしてもtarget-text()にしても、通常はa要素へのスタイルで使われます。a要素の他に他を参照する値を持っているテキスト系の構造がほぼないためですが、ターゲットを指定する引数にはurlだけではなくstringも許容しています。何に使うのか。

索引に必要な機能

see やsee alsoといった機能は置いておいて。
実際的な課題として、idを参照する方法では「同一ページを指す索引の番号の重複削除（「1,1,1,1」み→「1」）」「連続する複数ページの表記の結合（「1,2,3,4」→「1-4」（ここでは横着して記号にハイフンマイナスを使用））ができません。

ハイパーリンクを前提とするならこれらが同一ページや連続ページであろうと個別の参照を持つ理由はありますが、印刷してしまうとただただ冗長です。特に、索引の重要度が高い長大な書籍ほど索引項目が多くなり参照するページ数も多くなりがちであるため、索引のページ数を少なく保つ機構が働かないことの影響は大きくなります。組版後のページ番号の話なのでJavaScriptによる前処理なども効果的に行うのは難しいのではないでしょうか。

しおり

ニューキーボードに慣れていない&メインマシンを修理に出してしまったので時間切れ。後日追記予定です。