Page2018 XMLパブリッシング交流会プレゼン資料（田嶋分）

Page2018 XMLパブリッシング交流会プレゼン資料（田嶋分）

Transcript

1. W3C 文書「日本語組版処理の要件」に関連する CSS 規格の策定状況について　 JAGAT XML パブリッシング準研究会 田嶋　淳 JAGAT XML パブリッシング準研究会 田嶋　淳
2. XML パブリッシング準研究会の活動内容 1. W3C 文書「日本語組版処理の要件」に沿って、現在の CSS 規格策定状況 や InDesign などのアプリの実装状況を順番に見てゆく 2. 各 CSS 規格の項目が電子書籍の RS で今どこまで使えるかを調べる 3. 各 CSS 規格の策定を要望する順番を決め、 何らかの形でアウトプットする 現状はまだ 1 の途中
3. 日本語組版に関係する CSS プロパティ紹介 ※現在まだドラフト仕様（叩き台案）段階のものを 多く含んでいます。現時点ですぐに実用できる性 格のものではありませんのでご注意ください
4. OpenType 文字ツメ指定 概要　：Opentype フォント内部の情報を利用する文字ツメの指定 方法１：font-feature-settings でのプロパティ直指定。これは割と今でも使える 指定例： font-feature-settings: "palt"; https://drafts.csswg.org/css-fonts/#font-feature-settings-prop 方法２：font-variant-east-asian の指定で日本語などのフォント内のプロポーショナ ル （文字ツメ） 情報を有効にする。 より使いやすくなるはずだが実装はまだ一部 のブラウザのみ。 指定例： font-variant-east-asian: proportional-width; https://drafts.csswg.org/css-fonts/#font-variant-east-asian-prop ※なお、このツメ処理は表示フォントがプロポーショナル（文字ツメ）情報を持っていることが条件になる。 従ってユーザーが表示フォントを切り替えるなどの操作を行った際に無効化される可能性はある。
5. ※ InDesign での表示例
6. 組方向指定 概要　：縦組み、横組みの指定。これは EPUB3 の規格策定と連動して Web でも使 えるようになった。現状主要なブラウザの最新版なら全て指定が効く。 「sideways-rl」 、 「sideways-lr」というプロパティは、例えば縦書き文書内で 特定のブロックを回転させる時などに使う。表の項目や縦組みで大きな表を入 れるときのキャプション横倒しなど。 指定例： writing-mode: vertical-rl; https://drafts.csswg.org/css-writing-modes/#vertical-modes
7. 段組 概要　：2 段組、3 段組などの指定。column-width（段幅） 、column-count（段数） 、 column-gap（段間） 、column-rule（段間罫）などを組み合わせて指定する。 指定例： column-width: 45px; column-gap: 0; column-rule: none; https://drafts.csswg.org/css-multicol/
8. DPMVNOXJEUI DPMVNOHBQ DPMVNOSVMF
9. 縦中横 概要　：EPUB3 策定に前後して規格名が変わったプロパティ。text-combine → text- combine-horizontal → text-combine-upright へと変わっている。最新プロ パティ名は text-combine-upright なので、 現在はこれを指定するのが正しい。 指定例： text-combine-upright: all; https://drafts.csswg.org/css-writing-modes/#text-combine-upright ※なお、まだドラフト仕様の段階だが、 「digits <integer>（整数値） 」での指定が提案されている。これによ り段落全体に 「text-combine-upright:2;」 などと指定することで「自動縦中横」が実現できるよ うになるはず。ただし現状まだ数値のみが対象で、半角英文字が考慮されていない。
10. 現状でできる縦中横の指定 XHTML： <p>テキスト<span class="tcy">01<span> テキスト</p> CSS： .tcy{text-combine-upright: all;} 今後期待される「自動縦中横」 XHTML： <p>テキスト01テキスト</p> CSS： p {text-combine-upright: 2;} テ キ ス ト 01 テ キ ス ト 指定した部分を縦中横で表示 テ キ ス ト 01 テ キ ス ト 個別に指定しないでも半角数字の 指定桁数までを縦中横で表示
11. 柱とノンブル 概要　：柱とノンブルの指定。ページネーションは現状 Web ブラウザではほとんど使 用されていないが、CSS の仕様としては CSS paged media module で策定 が進められている。 指定例： @page :left { @top-left { content: " 肩文字 " } @bottom-left { content: counter(page) } } @page :right { @bottom-right { content: counter(page) } } https://www.w3.org/TR/css3-page/#spread-pseudos
12. @page :left { @top-left { content: "アメリカの牛豚" } @bottom-left { content: counter(page) } } @page :right { @bottom-right { content: counter(page) } }
13. 括弧類や中点類、句読点が連続する場合などの文字ヅメ文字アケ処理 概要　：CSS Text Level 4 で仕様策定が行われている日本語などに関連する文字詰め 処理。現状 InDesign など組版アプリでは当たり前にこの処理が行われている が、Web などではまだ約物は常に全角として扱うのが一般的。text-spacing が使えるようになれば、 より自然な日本語の文字組みができるようになるはず。 指定例： text-spacing: normal; https://www.w3.org/TR/css-text-4/#text-spacing-property ※より詳細に個々のプロパティの指定もできる。 ※和欧間の自動 4 分スペース挿入の制御もこれ。
14. 現状ほとんどのブラウザや電子書籍ビューアは約物をスペース込みの全角固定で表示するが、 text-spacing が実用段階に入れば組版アプリのように自動でツメて表示できるようになる。
15. 現状ほとんどのウェブブラウザや電子書籍ビューアでは和文の中に欧文の英単語が混じって いても特にスペース等が入っていなければそのまま詰めて表示するが、text-spacing が実用 段階に入れば（ideograph-alpha/ideograph-numeric プロパティ値によって）組版アプリの ように自動で自動で和欧文間スペースを入れてくれるようになる。
16. ぶら下げ処理 概要　：行末に句読点などが来た際のぶら下げ処理。強制的にぶら下げが force-end、 ぶら下げを許容するのが allow-end。 指定例： hanging-punctuation: force-end ／ hanging-punctuation: allow-end https://www.w3.org/TR/css-text-3/#hanging-punctuation-property ※ボックスの外側に表示をはみ出させる処理であり、CSS の基本概念であるボックスモデルに例外を設ける ことになる項目だが、ドラフト仕様としては出てきている。
17. 禁則 概要　：行末禁則、 行頭禁則の指定。強い禁則 （strict） 、 弱い禁則 （loose） を指定できる。 auto では本来は一行文字数に応じて徐々に緩い禁則になる実装が期待される が、 実際にはあまりそういった実装はされておらず、 Normal とほぼ同義になっ ているものと思われる。 指定例： line-break: normal; https://drafts.csswg.org/css-text-3/#line-break-property
18. 分割禁止／分割許容 概要　 ： 二倍ダーシ、 三点リーダ、 アラビア数字の字間などを 2 行に分割しないようにする、 もしくは 2 行に分割することを許容する指定。 「word-break:break-all」 では単語の中での分断も許容される。 「word-break:keep-all」では単 語の中での分断は禁止され、CJK の文字（漢字、かな、カナを含む）は分割 されなくなる。 指定例： word-break: normal; https://drafts.csswg.org/css-text-3/#word-break-property ※なお、分割禁止には CSS を使う方法以外にノーブレークスペース（&#xA0;）や、U+2060（Word Joiner）を使う方法もある。
19. 数字の字形の種類の指定 概要　：font-variant-numeric で数字の字形の種類を指定できる。Old-Style、Tabuler （等幅） 、Lining（高さが揃う）などを指定可能。ただし、もちろんフォント側 がそのバリエーションを持っている必要はある。minion や Garamond Pro など新しいフォントは情報を持っているはず。Century OldStyle などは作ら れた時期が古いため、こういったバリエーションは持っていない。 指定例： font-variant-numeric: oldstyle-nums diagonal-fractions; https://www.w3.org/TR/css-fonts-3/#font-variant-numeric-prop
20. フォントが各種数字のバリエーション字形の情報を持っていた場合に、 明示的に呼び出して使うことができる。 （ノーマルは非指定の場合の例）
21. 文字の正立／横転 概要　：縦組み時に文字を正立させるか横転させるかの指定。文字の正立はよく縦中 横と混同されるが、本来は意味合いが異なる。縦組み時の記号類などの向き のデフォルト値は UTR#50 で論議されてきたが、Unicode10.0.0 で正式に Unicode に規格として入った。今後 Web ブラウザではこれをベースに何も指 定しなかった際の文字の正立／横転の向きが決められるものと思われる。 指定例： text-orientation: sideways; https://www.w3.org/TR/css-writing-modes-3/#text-orientation
22. XHTML： <p>　正立を指定→ <span class="upright">A</span></p> <p>　横転を指定→ <span class="sideways">A</span></p> CSS： .upright {text-orientation: upright;} .sideways {text-orientation: sideways;} 縦組み時に文字を正立させるか横転させるか指定できる。 Safari などでは指定が効くが、 まだ効かないパターンも多く、 デフォルトの文字の向きにも混乱が多く見られる。 ※ Safari の表示例
23. ルビの親文字に対しての配置位置 概要　：ルビの肩付き、中付き等の指定。現状 Web や電子書籍ではルビは中付きで配 置されるが、ruby-align のプロパティが使えるようになれば位置を CSS で指 定できるようになるはず。start が肩付き、center が中付き。 指定例： ruby-align: start; https://drafts.csswg.org/css-ruby-1/#ruby-align-property ※なお、親文字とルビ文字の合計幅が異なった場合の配置方法指定もこのプロパティで行う。均等割りは "space-between"、いわゆる JIS の 1-2-1 ルールは "space-around"。
24. 肩付きルビ： ruby-align: start; 中付きルビ： ruby-align: center;
25. 熟語ルビ 概要　：行中ではグループルビのように振る舞い、行末にかかったときにはモノルビの ように分割を許容するルビの付け方。まだブラウザでの実装はない。 指定例： ruby-merge: auto; https://drafts.csswg.org/css-ruby-1/#propdef-ruby-merge ※なお、InDesign も現状まだ熟語ルビの挙動は再現できていない。
26. 圏点 概要　：傍点とも言う。日本語組版での伝統的な単語の強調方法。これは既にほとん どの Web ブラウザ、電書ビューアで使用できている。CSS 的には dot ／ circle ／ double-circle ／ triangle ／ sesame のそれぞれに対して filled（塗 りつぶす） 、open（塗りつぶさない）の指定ができる。また任意の記号の指定 もできる。InDesign でもこれと同じ種類の圏点を指定して付加することがで きる。 指定例： text-emphasis-style: open sesame; https://drafts.csswg.org/css-text-decor-3/#emphasis-marks ※なお、圏点を付ける位置を指定できるようにする規格の策定も進んでいる（text-emphasis-position） 。 https://drafts.csswg.org/css-text-decor-3/#text-emphasis-position-property
27. XHTML： <p>　本書の著者は彼是と多忙の身であるが、現在の <span class="em-circle"> 円本流行 </span><span class="em- sesame"> を黙過すべからざる </span><span class="em- circle"> 害毒問題 </span> として、天下に吼号し、以て <span class="em-sesame"> 読書界の進展 </span> と <span class="em-circle-open"> 出版界の転機 </span><span class="em-sesame"> を促さんとするのである </span></p> CSS： .em-sesame {text-emphasis-style: filled sesame;} .em-circle {text-emphasis-style: filled circle;} .em-circle-open {text-emphasis-style: open circle;}
28. ぶら下がりインデント 概要　：現状 CSS では text-indent と padding の値を組み合わせることでぶら下がり インデントのレイアウトを実現しているが、text-indent の拡張で hanging プ ロパティを指定することでぶら下がりインデントができるようにするための規 格策定が進んでいる。また、each-line を指定することで行中に <br /> を記入 して改行を行った場合でも各行に指定したインデント処理が反映されるように なる。 指定例： text-indent: 3em hanging each-line; https://drafts.csswg.org/css-text-3/#text-indent-property
29. 従来のぶら下がりインデントの指定方法： XHTML： <p class="h-indent-2em"> １　ぶら下がりインデントサンプル </p> <p class="h-indent-2em"> ２　ぶら下がりインデントサンプル </p> CSS： .h-indent-2em {text-indent:-2em; padding-top:2em;} こういう指定方法もできるようになる： XHTML： <p class="h-indent-2em"> １　ぶら下がりインデントサンプル <br/> ２　ぶら下がりインデントサンプル </p> CSS： .h-indent-2em {text-indent:2em hanging each-line;}
30. 行揃え 概要　：text-align で指定する行揃えは、CSS Text Module Level 3 から個別プロパ ティとして text-align-all と text-align-last を別々に指定できるようになって いる。これにより、段落全体の行揃えの挙動と、最終行の行揃えの挙動を別々 に指定できるようになる。 「text-align-last: justify」を指定する ことでいわゆる均等割りの挙動も再現できるようになるはず。 指定例： text-align-all: justify; text-align-last: justify; https://drafts.csswg.org/css-text-3/#text-align-property
31. 「text-align-last: justify」で均等割りレイアウトも可能に。
32. ウィドウ・オーファンの処理 概要　：段落の最後の行がページに入りきらず次のページに送られるウィドウ（末尾孤 立行） 、および、段落の最初の行しかページに入らず残りが次ページに送られ てしまうオーファン（冒頭孤立行）は、とくに欧文組版では避けるべきとされ ている。この処理を CSS で指定して自動で行うためのもの。 指定例： widows: 2; orphans: 3; https://drafts.csswg.org/css-break/#widows-orphans
33. テーブルの中での小数点揃え 概要　：表組みで上下に並ぶセル内の数値の配置位置を小数点で揃えるための指定。 指定例： text-align: "." center;（中央揃え） ／ text-align: "." right;（右揃え） https://drafts.csswg.org/css-text-4/#alignment
34. 項目 1 項目 2 項目 3 1.23 11.25 23.357 12.35 1.735 156.257 987.254 115.1 1.75 「text-align: "." center」などの指定で、ピリオドなど 特定の記号を指定しての揃え処理ができるようになる。
35. 扉などの改ページ 概要　：いわゆる改丁や見開き始まりの指定。break-before / break-after の拡張で 改ページ後の表示位置を指定できるように。論理値の recto/verso での指定 も可能で、これを使えば縦書き／横書きでの指定を共通化できる。 指定例： break-after: left; https://drafts.csswg.org/css-break/#break-between ※なお、 現状 EPUB3 では改丁／見開き始まりは OPF ファイル内の spine 項目で「properties="page- spread-left"」のように指定する。ただしこれに対応している EPUB ビューアは現状あまりない（観 測範囲では honto、kinoppy など。BOOK ☆ WALKER も対応しているという報告があった） 。
36. 同行見出し／窓見出し 概要　：同行見出しは本文の頭に同一行で配置されるタイプの見出し。窓見出しは同じ く本文の頭に複数行で配置される。見かけ上の同行見出しの再現は見出し部分 を <span> タグでくくる形でも行えるが、セマンティクスを重視すると見出し はきちんと hn タグでマークアップし、CSS の指定で同行見出しの形に持っ て行った方がよいはず。窓見出しもこれに準ずる。現在 display 要素の拡張と して Run-In Layout の規格が提案されており、これが使えるようになればで きるようになるものと思われる。 指定例： display: run-in; https://drafts.csswg.org/css-display/#run-in-layout ※ CSS display level3 では display プロパティで display-outside と display-inside を別に 指定できるようになっているため、窓見出しの表現も可能になるはず。 「display: run-in flow- root;」になるか。float の指定も必要かもしれない。
37. CSS 指定での同行見出し XHTML： <h1> 同行見出し </h1> <p> 本文テキスト本文テキスト本文テキスト本文 テキスト本文テキスト本文テキスト本文テキスト 本文テキスト本文テキスト本文テキスト本文テキ スト本文テキスト本文テキスト </p> CSS： h1 {display:run-in;}
38. 段抜き見出し 概要　：新聞や雑誌で多く見られる段組の複数の段をぶち抜く形の見出し。 指定例： column-span: all; https://drafts.csswg.org/css-multicol/#column-span ※なお、現状全ての段をぶち抜く形で段抜き見出しの処理を行う指定しかできないが、段数を整数値で指定 する規格も提案はされている。ただしかなり負荷が大きそうなので実現するかどうかは微妙。 　InDesign では段落パレットの「段抜きと段分割」で段抜き見出しを指定できる。
39. 「column-span: all;」指定で雑誌のような段抜き見出しも可能になるはず。