JLREQとCSS(6)
2017/11/08こちらのエントリは、JAGAT XMLパブリッシング準研究会で今期の研究テーマとして、W3C文書「日本語組版処理の要件」(JLREQ)と、これに関連してVivliostyleの村上真雄さんたちが提出したW3Cメンバーサブミッション「Web技術を用いた日本語組版の現状」を取り扱っていることに伴い、会員以外の方の意見を広く求めるとともに、記録を残しておく目的で議事録をベースに補足したものを公開するものです。
間違い、補足などございましたらご意見いただければ幸いです。なお、当ブログはコメント許可制を取っているため、反映に時間がかかります。あらかじめご理解ください。
方針としましてはW3C文書「日本語組版処理の要件」(JLREQ)を先頭から読んでいき、各要素に対応するCSSが存在するのか、存在するとして実用段階なのか、InDesignなどの組版ソフトではどういった形で機能を実現しているのか(いないのか)、などについて見ています。なお全体に対しての包括的な説明の部分に関しては、細かな部分は次回以降にその部分の説明が出てきた時に掘り下げる、としてスルーしている箇所があります。
なお、こちらで取り上げております各CSSプロパティはまだドラフト仕様の段階のものも多いため、今現在すぐに使えるものばかりではありません。Webブラウザで使用出来るかどうかはこちらなどでご確認ください。また、電子書籍のRSで使用出来るかどうかは、現在広範に調査した資料がありません。いずれ当研究会の活動として調査を行いたく考えていますが、しばらく時間はかかるかと思います。
JLREQ 3.5 段落整形,そろえ及び段落末尾処理
JLREQ内の表記で段落の定義がちょっと整理されていない感がある(木枝さん)との感想があった。
横組みで採用されていることがあるという説明文の図版の例は縦組みだったりもするようだ。
なお、ちょっと気がついたのだが、段落先頭にカギ類が来た際の挙動の説明がここにはない。3.1.5で説明済みだからというのはわかるのだが、JLREQが海外の規格策定/ソフトウェア実装担当者の間で辞書的な使われ方をしている実態がある以上、参照リンク程度の配慮はあってもよいのではないかと思う。全部を読み通さないと全体像が見えないというのはこうした文書の性格上よくないと考える。
CSS:ぶら下がりインデント
CSS Text Module Level3 9.1. First Line Indentation: the text-indent property
CSS Text Module Level3でプロパティが多少変わっている。具体的にはhangingというプロパティが追加されており、従来はpaddingとtext-indentを組み合わせることでぶら下がりインデントのレイアウトを再現していたが、text-indent単独で出来るようになっている。また、each-lineは<br/>で強制改行をした後の処理の指定。each-lineを付けておくと<br/>改行の後もtext-indentの処理が行われる。
※試してみたところ、Chromeでは問題なく使えるものの、Firefox、Safariでダメ。まだまだ実際に使うのは難しい模様。
CSS Lists Module Level3
CSS Lists and Counter ModuleからエディターズドラフトでListsのみ分岐。
3.5. Positioning Markers: The list-style-position property
リストのマーカーをどこに置くかの指定。デフォルト(従来のリストの挙動)はoutsideで、ぶら下がりインデント的な組版になる。insideを指定すると普通に行の先頭にマーカーが配置される。insideを指定した上でぶら下がりインデントにするには別途text-indent等で指定が必要になる。
JLREQ 3.5.2 字下げと字上げ
段落単位の字下げ、字上げについての解説。InDesignでは段落パレットで設定する部分。
※引用文を本文と区別するために字下げする例の解説がある。これは今日ではよりバリエーション豊かな表現が気軽に行えるようになったため、引用部分のフォントを変えるなどといった処理と併せて行われることが多いと思われる。
JLREQ 3.5.3 そろえの処理
中央そろえ、行頭そろえ、行末そろえ、均等割りなど各行揃え指定の解説。
CSS:行揃え
CSS Text Module Level 3 7.1. Text Alignment: the text-align shorthand
行揃えはCSSではtext-alignで指定する。CSS Text Module Level 3からtext-alignはshorthand(略式プロパティ)となり、個別プロパティとしてtext-align-allとtext-align-lastが策定された。text-align-allが段落全体の行揃えの挙動、text-align-lastが段落最終行の挙動。JLREQの図157の右下のような組版例(均等割り)はtext-align-last:justifyの指定で実現できるはず。この指定でChromeでは全行の均等配置の再現が確認できた。規格としてはtext-align:justify-allでも本来は同じ挙動になるはずだが、まだこれは実装されていない模様。
なおtext-alignのstart、end指定は日本語ではleft、rightと同じ挙動。アラビア語などで位置が入れ替わったりはする。justifyは最後の行以外が均等配置になる。
また、7.4. Justification Method: the text-justify propertyではjusify時にどこを空けて調整するかの指定ができる。日本語は通常わかち書きを行わないため、文字間を均等に空けてjusifyの挙動を実現することになる。これがinter-character。inter-wordは英語などで行われる語間スペース調整によるjusifyの挙動の指定。noneを指定するとjusifyを行わないことになるため、text-align:left指定と同様の組版になるはず。デフォルト値はautoで、言語によって適切と思われるjusifyの処理を行う。
JLREQ 3.5.4 段落末尾処理
「段落の最終行の文字数が,ある文字数未満になることを避けるための処理のことである.ウィドウ(widow)処理ともいう.」
※「オーファン」という語もある。「参照:ウィドウは一行はみ出ること。オーファンは頭の1行目で改ページ(もしくは改段)になること」。
CSS:ウィドウ・オーファンの処理
CSS Fragmentation Module Level 3 3.3. Breaks Between Lines: orphans, widows
「[ orphans/widows ]プロパティは、ブロックコンテナ内の分断において,その[ 前/後 ]に[ 断片内に残さなければならない最小の行ボックス数 ]を指定する。 後述にて、これらを利用して分断を制御する例を与える。」
widows:2;
orphans:3;
のように指定する。
デフォルト値は2。
JLREQ 3.6 タブ処理
タブはそもそもかなりの部分が表組みと共通する。もともとの技術的な起源が違うために項目が分かれているだけではないか。
ただ、いわゆる目次でのリーダー後の同一行ノンブル文末揃えのような組版はタブを使わないと実現できない。これはCSS Generated Content Module Level 3 2.5.1 The leader() functionでできるようになるはず。リーダーを入れず、空白にすることもできる。
また、タブは項目内での複数行配置を想定しておらず、1次元の配列が折り返していくところが表とは違うのではないかという意見も出た(村上さん)。
なお図160の図はタブの例としてあまり良くないのではないかという意見もあった。もっと通常の表組みでは実現できない例が欲しい。
JLREQ 3.6.2 タブ処理で指定する配置位置にそろえる形式
タブの揃え位置のバリエーション解説。左(上)そろえタブ、右(下)そろえタブ、中央そろえタブ、指定文字そろえタブ(小数点など)。InDesignのタブ揃えの実装もこれと同様のオプションがある。
CSS:テーブルの中での小数点揃え
CSS Text Module Level 4 9. Alignment and Justification
9.1. Character-based Alignment in a Table ColumnのExample8にあるように、
text-align: "." center;
のような指定でピリオド揃えのセンタリングができるようになる。
text-align: "." right;
なら右揃えで小数点の桁数が揃ってなくても揃えてくれるようになるはず。
JLREQ 3.7 その他の行組版処理
添え字処理、振分け処理、字取り処理、等号類と演算記号の処理についてそれぞれ解説している。
JLREQ 3.7.1 添え字処理
添え字処理。まずHTMLのタグとして<sup><sub>がある。いわゆる上付き下付き文字指定。
複雑なものに関しては数式組版で対応することになる。MathMLなどへの対応が必要か。それでも数字などの細かい位置決めは難しい。Webでの数式組版は現状MathJaxを利用するのが一般的なようだが、これはJavaScriptを用いているため現状EPUB等ではほぼ使えない(電子ペーパー端末でのJavaScriptを用いたインタラクティブ表現の表示再現性の問題や、セキュリティの観点からJavaScriptを禁止しているビューアもある)。
CSS:上付き/下付き
CSS Inline Layout Level3 2.2. Transverse Box Alignment: the vertical-align property
行中での文字の表示位置指定。この項目はvertical-alignがshorthand扱いとなっており、個別プロパティとしてbaseline-shiftとalignment-baselineが設定されてはいるが、実際にはshorthandのvertical-alignを使うことという注意書きがある。全体での整合性を取るためにこういった仕様にしたようだ。
alignment-baselineはどのベースラインを基準として上付き下付きにするかの指定。text-topとtop、text-bottomとbottomの挙動の違いはこちらを参照。text-topでは親要素へのline-height指定を継承するので、一見topが下に来たりbottomが上に来たりする挙動になったりするが、ベースラインシフトさせたい部分の文字のline-heightを適切に指定してやればきちんと字義どおりの挙動になるはず。
baseline-shiftはsub、superなどの指定で上付き下付きを指定できるほか、ベースラインシフトの量を絶対値や文字のシフト量をpxの数値やline-heightに対するパーセンテージで指定することができる(これはもうできる)。
今後Level3が勧告の段階に移れば、ベースラインの基準値(alignment-baseline)としてalphabetic、ideographic、central、mathematical、center が指定できるようになるほか、「vertical-align: top 10px」といった形で双方の値を組み合わせて指定できるようになる模様。
なお、化学記号などで上付き/下付きの文字を使う場合には親文字との分離禁止が課題になるが、文字の分離禁止にはいくつかの方法がある。現状無難なのは分割禁止部分をspanでくくってwhite-space:nowrap指定を行う方法。いずれwrap-after:avoid,wrap-before:avoidなどが実装されればそちらでもできるようになるはず(spanで括る必要がなくなる)。また、分割禁止文字を挿入する方法としてU+2060(WORD JOINER)を入れることでも同様の挙動になるはずだが、現状まだChromeではこれは動作しない。
今回はここまで。次回はJLREQ 3.7.2から。
(2017.11.9)