[CSS]私的に組版で使うセレクタ（と結合子）

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

https://adventar.org/calendars/10448

タイトルから逃げをうっていますね。
『Web技術で本が作れるCSS組版 Vivliostyle入門』（リブロワークス, C&R研究所,2023）と被らないようにするとあんまり無かった。

sectionの最後の子pとかのmargin-bottomを消す

sectionの区切りにはセクションのマージン長が欲しいが、子孫の要素のbottom-marginはそのままでは消えない（隣接ではないので）。

section {
  margin-bottom: 2rem;/*この長さだけほしい*/
}

section > :where(p,table,figure,ul,ol,dl):last-child {
  margin-bottom:0pt;
}

言語ごとに装飾方法を変える :lang()

疑似クラス:lang()で言語ごとにスタイルを変えられます。日本語で斜体フォントが無いので圏点による強調にしたい、そんなときに使えます。

@font-face {
 font-family: sesameFont;
 unicode-range: U+FE45;
 src: local('Kenten Generic');/*https://github.com/adobe-fonts/kenten-generic*/
}

em {
    font-style: italic;
}

em:lang(ja) {
  font-style: normal;
  font-family: sesameFont, serif;
  text-emphasis: filled sesame;
}

CSS仕様範囲内でtext-emphasis用のフォントを切り換えたい、そんなときにも@font-face。
本文中にSESAME DOTの文字を使うことは稀だと思うので、利用フォント全てでfaceを作る必要は多分無いです。

ラベルの相対的絶対配置

組版テクというより基礎知識的な話よりだしあんまりセレクタパズルもしていませんが、position:relativeの要素Aの子要素Bでposition:absoluteを指定した場合、Bの座標の基準はAになります。

コラム欄のタイトルやコードブロックにファイル名のキャプションを付けるときに便利。

div.note::before {
  position: absolute;
  top: -0.5rem;
  left: -0.5rem;
  z-index: 3;
  content: "NOTE";
  background-color: gray;
  
}
div.note {
  position: relative;
  margin-top: 3rem;
  border: 3pt solid black;
  padding: 1rem; 
}

セクションタイトルと本文最初の段落の泣き別れ抑制

隣接兄弟セレクタ+を使うタイミングと、page-break-beforeとpage-break-afterどっちを使おうか悩むタイミングというのが結構あります。

:is(h1,h2,h3,h4,h5,h6) {/*見出し内の*/
 break-inside: avoid-column;
}

section > :where(hgroup:has(h2), h2) + p {/*サブタイトルとしてpを使う場合にそっちに適用されてしまうけど許容ということで */
  break-before: avoid-column;
}

break-*系の紹介はまだ記事が書き上がっていないので、そのうちそっちに書いてリンクを張る方針で。

脚註間の関係でのセレクタは困難

社のウェビナーネタにも使いましたが、CSS組版に於ける個々の脚註は、「フロートされたコンテンツがページ下部に集まっている」というような状態なので、脚註同士の関係をセレクタに落とし込むのは困難です。:nth-child()や:nth-of-type()って個々の構造内でカウントをするので「n番目の脚註にどうこう」という指定よりもidを振って#<id>のように指定した方がジッサイハヤイ。

<p>……はA<span class="footnote">A is ...</span>で……。</p>
<p>……はB<span class="footnote">B is ...</span>で……。</p>

.footnote {
  float: footnote;
}

/*構造上の位置は隣接していないので実質無意味*/
.footnote + .footnote` {...}