CSS組版ブログ

先日、「第８回HTML5とか勉強会」という集まりに呼んでいただき、「EPUBやCSSと日本語レイアウト、HTML5と電子書籍」というテーマで講演をしました。

そのプレゼン資料を公開しました：

• 「EPUBやCSSと日本語レイアウト、HTML5と電子書籍」

この資料で、Antenna House Formatter、CSS組版の紹介と、このごろ私が関係しているEPUBとCSSの縦書きのことなど簡単にまとめています。よろしければ御覧ください。

6月1日に「EPUB仕様の日本語組版拡張を目指して(Version 0.8)」を試案として公開しました。

この試案の主な点は、縦書きの指定に CSS3 の writing-mode プロパティを使うことと、W3C内で議論されている margin-before/after/start/end など論理的プロパティを採用するということでした。

しかしその後、W3C での議論や、縦書き対応EPUBビューアなどを実装している側の意見を聞いて、この方針は無理があったと感じています。
（参考：「EPUB や CSS と日本語レイアウト、HTML5 と電子書籍」にも書きました）

そこで新たな試案を作成したいと思っているのですが、以下は、そのための私的メモです。

組み方向と綴じ方向の指定（OPFパッケージ文書に）

組み方向と綴じ方向の指定はCSSで指定するのではなく、OPFパッケージ文書に属性として指定するのがよいと思います。そのメリットは、未完成のCSS3仕様に依存しないこと、ビューア実装にとってはOPFにアクセスするだけで組み方向と綴じ方向が分かれば、それによりUIを変えるなどができるということです。

組み方向の指定: text-direction 属性

auto

ビューア側で横書きにも縦書きにもできる

ltr

左から右への横書き（英語、横書きの日本語など）

rtl

右から左への横書き（アラビア語、ヘブライ語など）

ttb-rtl

縦書き(top-to-bottom)で行は右から左（縦書きの日本語など）

ttb-ltr

縦書き(top-to-bottom)で行は左から右（モンゴル文字のモンゴル語など）

ページ綴じ方向: binding-direction 属性

auto

組み方向により自動的に綴じ方向が決まる

ltr

左から右へ

rtl

右から左へ

OPFのどの要素に指定？

OPFのどの要素にこれらの属性を指定するべきかは、検討が必要です。この試案で参考にしているSONY&TOPPANの案では、spine 要素に binding-direction 属性を指定するものでした。

本全体の組み方向・綴じ方向だけではなく、本の一部分だけ組み方向・綴じ方向を変える指定もできるべきです。次のいずれかの案が考えられます：

案その1: 本全体への指定は spine 要素に、本の一部への指定は spine の子要素である itemref 要素に

案その2: 本全体への指定は manifest 要素に、本の一部への指定は manifest の子要素である item 要素に

縦書きの中での部分的な横書き

縦書きの行の中で数字を縦中横にしたり、表や図のキャプションなどを横書きにする指定が必要です。次のいずれかの案が考えられます：

案その1: XHTML の dir 属性を使う。dir="ltr" または dir="rtl" が指定された要素は横書きにする。

例: 縦中横<span dir="ltr">22</span>年
<table dir="ltr">...

案その2: 縦書きの中で横書きを指定するための class 名を定義する。例えば：

例: 縦中横<span class="idpf-horizontal">22</span>年
<table class="idpf-horizontal">...

圏点

CSS3 Text ドラフトには text-emphasis プロパティがあります。しかし、この CSS3 仕様が標準となるのもまだ時間を要します。

考えられるひとつの案として、青空文庫のXHTML形式で採用されているような class 名を使うというものがあります。

EPUB EGLS (Enhanced Global Language Support)札幌会議(8月3～4日)に参加しました。

コーディネーターである村田真さんのブログ記事「EPUBの国際化と札幌会議」に書かれているように、日本、台湾、韓国、アメリカのエキスパートが集まり活発な議論が行われました。Twitterで実況されたのがまとめられてます：第1日目、2日目午前、2日目午後。

私の役目は、W3C CSSWGのメンバーとして、EPUB国際化と関係するCSS3仕様策定の状況について、特に縦書きに関係するCSS3 Text Layout仕様がまだこれから仕様を議論して作っていかなければならない段階であることを説明し、EPUB次期バージョンで縦書きなど未完成のCSS3機能をどうやって取り入れるべきかという案を示すことでした。詳しくは、次のプレゼン資料を御覧ください：

• CSS: current status and future directions for global languages

この発表と会議での議論により見えてきた方向性としては、前回のエントリ「EPUB仕様の日本語組版拡張案のためのメモ」で書いたように、EPUB次期バージョンでは未完成のCSS3のプロパティを採用するのではなく、EPUBのパッケージ情報を記述するOPFの中に組み方向とページ進行方向の情報を入れることや、縦書きの中での横書き部分の指定や、圏点の指定などはXHTMLのクラス名を定義するという案が受け入れられ、今後はその詳細の仕様策定をしていくことになるだろうということです。

未完成のCSS3プロパティをEPUBで直接指定することは避けるとしても、該当するCSS3仕様が完成したときに両者が互換性のあるものにならなくてはなりません。W3C CSS仕様とIDPF EPUB仕様が調和していく必要があります。

札幌会議の直前に私のプレゼン資料を W3C CSSWG の議長の Bert Bos と CSS3 Text Layout などのメインのエディタ Elika Etemad (fantasai)に見てもらったところ、次のようなコメントをもらっています：

「ありがとう！　EPUBがCSS3に注目しているのは良いことだ。EPUBはHTML/CSSの重要な応用だと思う。 プレゼンは完璧だ。CSS3の状況と論点についてとてもよくまとめられている。 あとで参加者の意見はどうだったかどういう結論が得られたかを知らせてほしい。」（from Bert）

「この複雑な問題を説明する良い仕事をしてくれてありがとう！　EPUBコミュニティが問題を解決してCSS3仕様策定を助けてくれることを期待します。私たちはその成果をCSS仕様に組み入れることになるでしょう。」（from fantasai）

このように、W3C CSSWG側もEPUBに注目しているということです。

以下、IDPFのEPUB次期仕様策定についての情報がまとめられているサイト：

• epub-revision -- Development area for the 2010-2011 EPUB revision
• EGLS -- The EPub vNext EGLS(Enhanced Global Language Support) sub-group page
• Sapporo EGLS Meeting
  （会議で発表されたプレゼン資料が公開されてます。議事録ももうすぐ公開される予定です）

9月18日　第29回出版UD研究会に講師として招いていただき、「マークアップ言語の活用と、EPUB電子書籍とウェブの日本語組版対応標準化」について話をしました。

そのプレゼン資料です：

• 「マークアップ言語の活用と、EPUB電子書籍とウェブの日本語組版対応標準化について」

マークアップとは何か、マークアップ言語と電子書籍、マークアップ言語と組版、EPUBとは何かという基本的なことから、EPUBとCSSの縦書きなど日本語組版対応標準化についての最近のことをまとめましたので、よろしければ御覧ください。

追記：この第29回出版UD研究会のTwitterのハッシュタグ #udpub29 へのツイートが次のところにまとめられています。

• 9月18日（土)第29回 出版UD研究会 「電子書籍フォーマットの現在―マークアップランゲージをどう活用するか」をトゥギャリました

新しいドラフトが公開されました：
CSS Text Level 3 W3C Working Draft 5 October 2010

このCSS3 Text仕様は、世界中の言語の文字組版に対応するためのもので、日本語組版に関係するものでは次のような機能があります。

• line-break　行分割の禁則処理の設定
• text-justify　行調整
• punctuation-trim　約物の詰め
• text-autospace　和欧文間アキ
• hanging-punctuation　句読点行末ぶらさげ、起こし食い込み
• text-emphasis　圏点（傍点）

縦書きについては、CSS3 Writing Modes （Text Layout から名称変更）仕様が、最初の公式ドラフト公開に向けて作業中です。

CSS Writing Modes Module Level 3 Editor's Draft

• writing-mode　組み方向の指定。値が従来の tb-rl から vertical-rl （縦書きでブロック進行方向は右から左）のように変わってることに注意。
• text-orientation　縦書きでの欧文など文字の向き
• text-combine　組み文字、縦中横
• Logical properties: margin-before, logical-width, etc.　論理プロパティ

これらの仕様作りの中心になっているのは、Elika (fantasai)と石井さんです。私もいくらか関わってます。

Elikaはこの作業のために9月下旬にアメリカから来日しています。そして、Elikaと石井さんは、EPUB EGLS台湾会議(10月5～6日)に参加しました（前回の札幌での会議は私が出ましたが、今回は二人におまかせ）。Elikaは台湾から戻ったあと10月下旬まで日本滞在。
CSS3縦書き仕様（論理プロパティを含む）の標準化を進めて、それを次期EPUB仕様で使えるものにすることを目指しています。

ツイッターのまとめ：EPUBで縦組を実現するには？ EPUB EGLS台湾会議 第1日目、第2日目

EPUB EGLSコーディネーター村田真さんのツイート

EGLS台湾会議は大成功だった。EGLSとしては、残りは短い仕様を書くだけになったと思う。W3CとしてはCSS TextとCSS Writing Modesを勧告候補で持ってくるという仕事が残っているが、十分以上の見込みがあると私は思っている。 #epub_egls

ということです。
縦書きもできて、よりよい日本語組版がEPUBでもWebでも実現されることが楽しみです。

W3C TPAC 2010 で CSS3 Writing Modes は…

今月初め、フランスのリオンでのW3C総会 TPAC 2010 のCSS WG会議で、CSS3 Writing Modes仕様について集中して審議されました。

結果は、石井宏治さん(@kojiishi)がツイッターで報告：

縦書きは順調。論理方向は一歩前進したけど及ばず、でも、継続審議にはなった。EPUB3の最低限ゴールからすれば、合格。でも個人的にはちょっと残念。状況からすれば仕方ないか、論理方向を支持する声は国内でも多くはないし。でも蓋を開けると文句噴出かなぁ、という気はします。難しい。 [3 Nov @kojiishi]

このとき議論されたこの時点でのCSS3 Writing Modes仕様(11月2日版)は次のものです：

• CSS Writing Modes Module Level 3
  Editor's Draft 2 November 2010
  ※現在の最新版は：http://dev.w3.org/csswg/css3-writing-modes/

やはり論理プロパティ（8. Logical Properties and Values）については議論になり、残念ながら合意までには至らなかったようです。でも以前は反対していた人たちが、最低限の機能（margin と padding のショートハンドの logical キーワードなど）については必要性を認めるようになって、今後も議論を継続ということになったのは一歩前進です。

もうひとつ引用：

CSS WGのDanielから「今年はアジアからの参加者が過去になく多い、なぜだ？」と聞かれた。縦書きだ、と言ったら、うん、それだけ興味を持ってくれるなら日本で何かやらなければ、と言ってくれた。 みんなの貢献が将来につながります。多謝！ [3 Nov @kojiishi]

論理プロパティの必要性

例えばインデント（字下げ）の指定に横書きでは左アキ（margin-left）、縦書きでは上アキ（margin-top）などと物理方向を常に意識した指定が必要ということは制作者にとってとても不便だし、縦書きコンテンツを縦書き非対応のブラウザで横書きで表示した場合に、レイアウトが崩れて正常に読めないものになってしまうなど問題があります。

参考：「縦書きのときの方向指定問題」

それなら縦書きのとき「left」が上を指すように方向の定義を変えるという案もあったのですが、そうすると物理方向（top/right/bottom/left）は書字方向によらず絶対的な方向であるとしてきたCSS仕様の整合性を崩すことになってしまいます。

CSS仕様は中東のRTL（Right-to-Left：右から左への横書き）言語にも対応していますが、その場合、行頭側を空けるインデントの指定には margin-right を使う必要があります。RTL言語を含む多言語対応のウェブページの制作においてはCSSの「left」と「right」を入れ替える必要があり、制作者に負担が強いられているのが現状です（例えば次の変換ツールがこのために使われてます：CSS Janus）。もしも、RTLなら「left」が右を指すとすればCSSの変換は不要になりますが、左右の意味が逆になるのでは混乱するし、今さらそのようなCSSの仕様の変更は不可能です。

論理プロパティの案ならば、RTL言語にも、モンゴル語の左から右への縦書き（writing-mode: vertical-lr）にも有用です。

論理プロパティを別仕様に分離したうえで、CSS3 Writing Modes 公式ドラフト公開へ

CSS3 Writing Modes は、継続審議となった論理プロパティ（8. Logical Properties and Values）を別仕様に分離した上で、近いうちにFPWD（First Public Working Draft：最初のW3C公式ドラフト）となる見込みです。（その準備中の最新版のEditor's Draft：http://dev.w3.org/csswg/css3-writing-modes/）

来年5月に勧告予定のEPUB3.0には残念ながら論理プロパティ仕様は入らず、縦書きと横書きではスタイルシートを書き直すことが必要になりそうです（インデントの指定に横書きでは margin-left、縦書きでは margin-top など）。これに対処するために、スタイルシートの縦書き／横書き変換を支援するツールなどが提供されることになると思います（論理方向 margin-start などで指定したものから縦横それぞれ用に変換するなど）。

しかし、これは論理プロパティ仕様の標準化がEPUB3.0のスケジュールに間に合わないための暫定的な対策であり、将来EPUBやWebでの縦書きを本格的に使えるものにするためには、やはり論理プロパティの標準化が欠かせません。

論理プロパティ仕様は、新しいCSS3モジュールの Editor's Draft としてスタートすることになると思います。できるだけ早期にこの論理プロパティ仕様を完成させ、Webでの縦書きで使えるものにし、EPUB3の改訂版（EPUB3.1か）で採用されるようにすることが目標です。

実装が進んでいるCSS縦書きと論理プロパティ

標準化がまだこれからの論理プロパティですが、ドラフト案のものはすでに幾つか実装が進んでいます。

Antenna House Formatter は、CSS縦書きと論理プロパティを実装しています。少し前のドラフト仕様で 「EPUB仕様の日本語組版拡張を目指して(Version 0.8)」 にある writing-mode と論理プロパティに対応してます。

また、株式会社GNN「ブログ出版局」のCopper PDFという製品でも、CSS縦書きと論理プロパティが実装されています。（新・ブログ出版局管理人ブログにその説明とデモサイトの案内があります。）

ブラウザ Safari や Chrome のエンジンである WebKit での、縦書きと論理プロパティの実装も進んでいるようです（-webkit-writing-mode: vertical-rl や -webkit-margin-before、-webkit-logical-width などのプロパティが最新のWebKit Nightly Buildsで使えます）。

関連記事

• EPUB3.0へのCSS3採用の推進に関して [アンテナハウスのブログ I love software]
• 縦書き実現へと向かうEPUBと標準規格の魅力 [村田真，ITmedia]
• CSS3で縦書きスタイルを、電子出版の未来のために。日本発で提案中 [Publickey]
• 電子書籍フォーマット「EPUB」で縦書きとルビのサポート、来年5月には仕様完成の見通し [Publickey]
• CSS3が日本語の禁則処理、傍点、縦書きなど対応へ、ドラフト公開 [Publickey]
• 電子書籍の（なかなか）明けない夜明け　第4回　番外編：「電子書籍交換フォーマット」の正体を総務省に聞く [小形克宏，Internet Watch]
  ※記事の後半のほうで、「EPUB日本語拡張仕様策定」、「次世代ブラウザ（HTML5とCSS3）の縦書きレイアウトの規格化」ということに触れられています。
  （敬称略）

今日、PAGE2011 「XMLパブリッシング交流会」というイベントで、XMLとEPUB3.0の話をします。

その資料を次のところに置きました。

• 「電子書籍フォーマットEPUB3.0の動向とXML」

このブログの更新が滞っていてすみません。そのあいだに EPUB3.0 も、EPUB3.0 で使われることになる CSS3 Writing Modes や CSS3 Text のドラフト仕様なども、いろいろ更新されています。

アンテナハウスからのお知らせ：

• 2月28日 18:30～ 「EPUBで未来を開く」セミナーを開催します
• 電子書籍時代に備える、クラウド型汎用書籍編集・制作サービス開発のご案内

cassupportの日記の次のエントリーのとおり、EPUB3.0仕様は進んでいます（今夏遅くに最終の勧告仕様とのこと）：

• 5月23日　EPUB3.0のProposed Specificationが公開されました

「CSS組版」に関係するところは、EPUB Content Documents 3.0 の 3 EPUB Style Sheets です。EPUB3.0で使えることになる CSS のプロパティについて書かれています。

CSS3 Text と Writing Modes については、まだドラフト仕様であるということで、プロパティ名に -epub- プレフィックスを付けたものがEPUB3.0で採用されることになりました。例えば、圏点を付けるプロパティは -epub-text-emphasis、縦書き／横書きの指定は -epub-writing-mode、縦中横は -epub-text-combine、などです。

EPUB3.0で、縦書き、縦中横、ルビ、圏点といった日本語組版の基本的な機能が入りましたが、採用が見送られたものもあります。EPUB3.0に含まれないCSS3 Text の機能としては、句読点のぶら下げの指定 hanging-punctuation、約物詰めなどの制御 text-spacing プロパティがあります。

CSS3 Text の text-spacing プロパティについて

CSS3 Text の以前のドラフト仕様では、和欧文間などにアキを入れる text-autospace、約物の詰め（行頭／行末／約物連続で半角幅に詰めるかどうか）を指定する punctuation-trim、行調整での約物の詰め text-justify-trim プロパティがありました（AH Formatter でもこれらを実装してますので、使っていただいている方にはお馴染みかもしれません）。それらがひとつに統合されたのが最新のドラフトでの text-spacing プロパティです。

以下は、text-spacing プロパティと他のプロパティを組み合わせて日本語の標準的な段落のスタイルを定義した例です（ドラフト仕様なので最終仕様は変わるかもしれません）：

p {
  margin: 0;
  text-align: justify; /* 行揃え */
  text-indent: 1em;    /* 段落１字下げ */
  hanging-punctuation: first allow-end;
                       /* 起こし食い込み、句読点ぶら下げあり */
  text-spacing: trim-start trim-end ideograph-alpha ideograph-numeric;
                       /* 行頭約物半角、行末約物半角、和欧間アケ、和数間アケ */
}

なお、text-spacing プロパティのデフォルト（normal）は space-start（行頭約物全角）、allow-end（行末約物全角/半角）、trim-adjacent（連続する約物間を詰める）の組み合わせなので、これらの値を変えないのであれば明示的に指定する必要はありません（上の例では trim-adjacent が暗黙に有効です）。

text-spacing プロパティは、将来の CSS Text Level 4 ではより詳細な指定ができるようになるかもしれません（Adobe InDesign の「文字組みアキ量設定」と同様のことができるようにという要望があります）。文字クラスの前後の組み合わせごとのアキ量の最適値と下限と上限と設定できるようにすることなどです。例えば ideograph-alpha（和欧間アケ）、ideograph-numeric（和数間アケ）をそれぞれ別のアキ量にしたいというとき便利でしょう。

CSS Line Grid （行グリッド仕様）について

CSS での行の配置方法は、日本語組版で基本とされている行送りを等間隔にすることやベタ組みで行頭行末を揃えることがしにくい問題があり、これを解決するために CSS Line Grid （行グリッド仕様）が必要とされています。

CSS Textと Writing Modes 仕様策定で Elika (fantasai)さんとともに中心になっている石井宏治さんが、Line Grid 仕様のエディターも引き受けてくれて、最近 Editor's Draft が公開されました：

• CSS Line Grid Module

この仕様は次のことを実現しようとしています：

• 行送りを等幅にして、見出しや図が間に入っても、等間隔が保たれて段組の段どうしで行の位置が揃うこと
• 全角字送りの整数倍の行長になるようにすることで、なるべく等幅の字送り（行調整のアキが字間に入るのを最小に）

この仕様がどうなるかは、まだ議論がはじまったばかりです。
（参考：twitter まとめ「CSS3 Line Grid仕様検討会」、「電子書籍やWebの行揃え」）

いずれこの標準化が進めば、将来のEPUBのバージョンに反映されることでしょう。

次世代電子出版とWeb　表現技術フォーラム

CSSや日本語のレイアウトを中心としたフォーラムが東京（5月30日）と京都（6月1日）であります。主催は「次世代Webブラウザのテキストレイアウトに関する検討会」（Technical Leader は石井宏治さんで、私もメンバー）、W3C/慶應と総務省が後援しています。6月2～4日には京都で W3C CSSWG のミーティングがあり、それに合わせて開催されることになったものです。

次の案内ページをご覧ください：

• 次世代電子出版とWeb 表現技術フォーラム in 東京：5月30日（月）
• 次世代電子出版とWeb 表現技術フォーラム in 京都：6月1日（水）

5月30日の東京フォーラムは定員に達して参加登録受付は終わっていますが、ストリーム中継があります。ぜひご視聴ください。

6月1日の京都のほうは、CSSWG メンバーも多く参加してくれて、ランチミーティングなどで交流できます。ボランティアの通訳がつきます。

（直前の案内になり、すみません）

追記：Twitterでの次世代電子出版とWeb 表現技術フォーラムに関する話題、実況、コメントなどは、ハッシュタグ #css2011jp をご利用下さい。

（追記2012-02-04）Twitterでの議論まとめ（随時更新中。ハッシュタグは #UTR50）

• UTR#50（Unicodeの縦書きの文字の向き）の話題

「電子書籍、電子出版のCAS-UBブログ」 のほうで、CSSの縦書きとUnicodeの議論 UTR#50: Unicode Properties for Vertical Text Layout (Proposed Draft) がホットです（by小林社長）：

• 縦組みにおける英数字正立論―まとめ
• 全角英数と半角英数の使い分けの煩わしさをなくす100年1回のチャンスが来ています！
• ラテンアルファベットと数字を縦にするか、横にするか？UTR#50とCSSの関係
• 縦組みのPC雑誌における英数字の方向
• 縦組み書籍における英数字の使われ方―その２
• 縦組み書籍における英数字の使われ方
• 未来の縦書き文字の表示はどうなるの？
• CSSの縦書きとUnicode（TR#50)がホットです

私（村上）のほうはというと、ラテンアルファベットと数字を縦にするか、横にするか、というのは、両方ありとして、ラテンアルファベットと数字を横にする場合に、そのほかの文字の向き（とくに和文でも欧文でも使われる記号類など）はどうするかということに関心があります。

以下、UnicodeのフォーラムにUTR#50へのコメントを投稿（英語）したことについて、EPUB仕様についての情報・意見交換のML（←関心のある方はぜひ参加ください）に投稿したものを転載します：