🙆

[CSS組版]breakable boxの夢(検討のみ)

に公開

本記事はCSS組版アドベントカレンダー2024の3日目の記事です。ヘビーな記事書く余裕が無かったので記事トピックが差し換わっています。多分週末ぐらいまでズレていきます。

https://adventar.org/calendars/10448

breakable box

LaTeXのtcolorboxというパッケージにはbreakable boxという存在があります。敷衍すると、ボックス装飾について、ページ分割のときに分割時だけの特殊な挙動をさせられます。

どういうときに役立つのかといえば、まあボックスがページを跨ぐときですね。……具体的・実務的には、ソースコードを貼り付けて数ページになりそうなとき「次ページに続く」とか「前のページの続き」とか表示させたい。そういう組版要求があります。

CSSのボックス装飾の分割制御(貧弱)

CSSではどうするのか。実は、CSSによる情報の追加の類は無く、できるのは分割時に端の装飾を表示するか、しないかを決定することだけです。


.breakable {
    border: wavy black 1pt;
    box-decoration-break: slice; /*分割されるとき、その端を描画しない*/
    /*box-decoration-break: clone; *//*分割されるとき、その端をページの両方で描画する*/
}

slice

slice

clone

clone

没案(string-setstring()

没というかやってみて上手くいかなかった話の断片。

  • string-set: break-head;のように名前付き文字列を用意し、ページ分割を挟むかどうかで、tableのthead(テーブルのヘッダは分割前後で両方表示されるが、仕様のどこでその挙動が決定しているのかよく分からない)に指定したcontent: string(break-head)の評価値が変わるようにする。

  • ダメだったポイント:参照しているstring-setを上手く変えられなかった。

検討案(実現可能性不明)

borderにはborder-imageという亜種があって、SVGを枠に使える。

  • 既定でボックスの右下、右上に「次ページへ」「前ページへ」と表示するようにしておく
  • SVG枠によっていい感じに隠し、ページ分割を挟む場合だけ隠している箇所が表示されるようにする(box-decoration-break:sliceとかで)。

終わりに

「できたよ!」ってアンサー記事を登録してもらえると嬉しいです。「これができなかったよ」という記事でもこんな感じに登録してもらえると嬉しいです。

4日目はhidarumaさんです。

参考資料

組版・ドキュメンテーション勉強会

Discussion