🔥

[CSS組版]腑分けして理解したいCSS組版 導入

に公開

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

https://adventar.org/calendars/10448

年明けくらいから例示とか書き足していきたい。

導入(の導入)

ブラウザでWebページを印刷した結果なりMicrosoft Wordや一太郎で書き上げた原稿なりをそのまま自宅のプリンタで印刷してホチキス留めすれば印刷物にはなります。手書きの文章をコピー機で刷ったって良い。問題がコンテンツ以外のクオリティにあるのであれば、プロフェッショナルに依頼する方が余程完成度が高いものが仕上がります。では貴方は何故そうしないのか。

金額面での妥協であったり、有名ソフトウェアとの相性の悪さであったり、自己表現の一部であったりと理由は様々でしょう。しかし、結実として、「このようにしたい」という要求があり、その実現方法を自分で学ぶつもりがあるということです。

「なんか長そう」と思った方は本記事よりも『CSS組版の紹介:ページメディアのための CSS入門
Introduction to CSS for Paged Media(Markup UK 2023)』[1]という動画を見ることをおすすめします。

CSS→CSS組版

(完全にグラフィカルでその場その場で調整が利くようなシステムと比べれば)CSSというのは宣言的です。「どの要素をどのように表示したい」という要求は、要素を指定するセレクタとそれに合うように該当箇所に適用するプロパティによって実現されます。

<p>我輩は猫である。名前はまだない。</p>
p {/* p要素のコンテンツに対して */
text-indent: 1em; /* 1行目の開始位置を1emずらす */
}

当然、セレクタやプロパティとして示せない指示をすることはできません。「何となくなんだけれどここバランス良くないから良い感じにできる?」と言われても困りますよね。「何となく」の部分や「バランス」の具体的内容があればいいのですが。逆に、指示を明瞭に言語化できていれば(かつ対応するセレクタ・プロパティが実装されていれば)具体的な結果を見ずともCSSを調整すれば同様の問題箇所全てで要求の実現が可能です。

そんなCSSを使ってページメディアを良い感じに作りたいという次の要求が出てきますね。しかしこれは良くありません。「良い感じ」って何ですか。先刻そういう曖昧な表現に困ってたじゃないですか貴方。

ということで、CSS組版の「良い感じ」について理解をね、してもらいたい。そういう話です。

注意事項

CSS組版といったとき、一般的にはW3CのCSS規格をベースとした組版処理系による組版を指します。注意点として、HTMLをブラウザの印刷機能で単純に印刷したものではありません。CSSのうち、ページメディアに関連する仕様を実装しているプロダクトであることが重要です。この仕様を中心に解説を試みるのが今回の記事群となりますが、そこは一度置いて、組版システムという枠組みでCSS組版について考えてみましょう。

CSS組版の特徴を明瞭に述べることは難しい(プロダクトも実はそこそこあるので)。難しいですが、個人的には次をピックアップします:

  • 組版処理の途中に介入できない
  • CSSセレクタで指定できるものが対象である

ページネーション←大体コイツのせい

組版には様々なポイントがありますが、事象の殆どはコンテンツを、四方に区切られた領域に分割して配置していく、則ちページネーションという処理に関係します。

  • 媒体の都合で分割されたものを一連のコンテンツとして連続しているように扱いたい
    • ページレイアウトの規則性によって「このページの内容は前のページの続きである」という認識をさせる
    • ページ終端の行末から次ページの行頭の内容が繋がる本文レイアウト
    • ページが分かれてしまうと不都合なコンテンツ(見出しがページ最下部にくるとか)の分離制御
  • ページ数を節約したい、或いは主従関係のあるコンテンツを適切な位置関係に配置したい(フローティング)
    • 分離できないコンテンツ(イラストなど)のフロート(浮動配置)
    • フロート配置の移動許容位置、脚註
  • コンテンツの位置関係を一瞥して把握したい(ナビゲーション)
    • ページ表示
    • 相互参照

これらページネーション絡みの課題に取り組むのが、CSS組版に関連する次の仕様です。

上のように分けられてはいるものの、これらは絡みあった仕様で、Paged Media Moduleで扱う柱はGenerated Content for Paged Moduleで内容の生成仕様があったり、脚註は実際にはPage Floatsと関係が深い処理であったりするので、hidaruma基準で分けて説明をしていきます。といっても割と『ページメディアのための CSS入門』の2番煎じ的内容になりそうなんですよね。

で、ページネーション以外にも当然ポイントはあります。Webページではあまり気にしないけれど気になるポイント、みたいのが対象になります。それらについては別にフォローアップしていく感じです。

脚注
  1. CSS組版の紹介:ページメディアのための CSS入門
    Introduction to CSS for Paged Media(Markup UK 2023) https://www.antenna.co.jp/AHF/presentation/index.html#markupUK2023
    ↩︎

  2. https://gihyo.jp/list/group/Vivliostyleが拓くCSS組版の可能性#rt:/article/2024/01/vivliostyle-01 ↩︎

  3. https://www.c-r.com/book/detail/1493 ↩︎

  4. https://www.w3.org/TR/SVG2/ ↩︎

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

Discussion