Zenn
組版・ドキュメンテーション勉強会Publicationへの投稿
🎄

[CSS組版]素のChromeでできること

hidaruma
2024/12/25に公開
css組版
tech

CSS組版アドベントカレンダー2024の25日目の記事です。24日はメイユールさんの『Vivliostyleでは256**3色以上のRGB値を扱えるらしい』でした。

https://adventar.org/calendars/10448

完走ですよ完走！

素のChrome

Vivliostyle.jsやpaged.jsはWebブラウザの描画機能とJavaScript機能を利用したCSS組版プロダクトです。CSS組版のために独自に実装されている処理も多いのですが、CSS仕様としてWebブラウザが実装している部分もあります。ということで、JSなしのChromeでCSS+HTMLで組めるものを用意してみました。

Google Chromeバージョン
: 131.0.6778.205（Official Build） （64 ビット）

組版用HTML

青空文庫から、坂口安吾の『木々の精、谷の精』の一部を借用しました。また、一部意味を損わない範囲でhidarumaのよるマークアップ、文字表記の変更があります。
やっぱり気になるのは縦組だろうということで、文庫サイズで印刷用CSSを置きました。

https://www.aozora.gr.jp/cards/001095/card45844.html

底本：「坂口安吾全集　03」筑摩書房
　　　1999（平成11）年3月20日初版第1刷発行
底本の親本：「文芸　第七巻第三号」
　　　1939（昭和14）年3月1日発行
初出：「文芸　第七巻第三号」
　　　1939（昭和14）年3月1日発行
※底本は、物を数える際や地名などに用いる「ヶ」（区点番号5-86）を、大振りにつくっています。
※新仮名によると思われるルビの拗音、促音は、小書きしました。
入力：tatsuki
校正：北川松生
2016年9月9日作成
組版用HTML

通常のスクリーン表示

Web表示用と印刷用の区分けなどが適当なためあまり参考になりませんが、通常の画面表示は次[1]。

印刷

では、印刷……

**なんかダメじゃん！**と思うのはまだ早い。

印刷（PDFに保存）

印刷のプリンタを「PDFに保存」にします。（「Adobe PDF」は仮想プリンタとしてAdobeが通常の印刷処理の先をPDFにするというものなので、ちょっと違うんです。）「ヘッダーとフッター」はCSS Paged Mediaとは関係ないURLとか機械的なページ数を自動で出すやつなのでオフに。

はい。というわけで、パッと見それなりにできています。ページマージンの左右の差異であったり、ページ番号であったり。

では気になりポイントを軽く見ていきましょう。

string()の不在の前後策

指定しているが反映されていないものとして、string()とstring-set()があります。右ページヘッダにタイトルを入れようとして失敗していますね。セクションに合わせて自動でヘッダを入れ換えられないことになります。これはsectionごとに@pageを用意して固定文字列付きのヘッダフッタを用意しておくことで一応対応可能です。汎用性は犠牲になります。

ルビ挿入箇所の行間

かつてのdraftではline-stacking-rubyという調整プロパティもあった気がしますが、どこで対応することになったんだろう。とまれ、line-heightを日本語用に空けておけば行間を広げる調整は回避可能のようですね。

ルビテキスト調整のintrusion（侵入）

ルビ前後の文字に空白が生じています。ブラウザで ruby-overhangプロパティを制御可能なのは現状Safariくらいなので仕方無い。気取ったルビを使うときは文字装飾を別に追加するとこの違和感は軽減できるかもしれなくもない。

版面は期待通りか

それなりにできているようにみえますが、ちょっとズレていると感じる人もいるかもしれません。

@pageのwidthは本文用line-heightで計算しているわけですが、ハーフレーディングの問題があるので、これより厳密な計算をするのは大変だし、計算したところでこうして文字サイズの異なるコンテンツが入りこむと壊れがちなので、真剣に設計するなら、登場させる全てのコンテンツのサイズをページ上で調和可能に設計する必要があるよ。

まとめ

素のGoogle Chromeでも内容を選べばそれなりに組める気がしてきました。とはいえCSS組版の便利機能は使えた方が便利なので、CSS組版プロダクトを応援していきましょう！

おまけ 鍵括弧に応じてpのtext-indentを変える一案

first-childはテキストを捕捉しないため、鍵括弧の文をqで囲んだところで、「pの子の最初のコンテンツがqだったとき」のようなセレクタ指定が困難であることは以前の記事で書いた気がします。今回は「qがp内に登場するときは、普通のテキストもspanで囲っておく」という渋い策で誤魔化しています。でも簡易形式からHTMLに自動変換するんだったらアリかもしれませんね。

脚注

  1. text-align:justifyの指定し忘れは後で気付いてPDFだけ直しています。ごめん ↩︎

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

組版・ドキュメントに関連する記事を投稿するコミュニティ、を予定しています。 文章表現よりはマークアップ・文章構造・自動組版に焦点を絞れると他コミュニティと差別化できると思っていますが如何。

Discussion