CSS Houdini / CSS Working Groupミーティングに参加しました

Vivliostyle

Vivliostyle開発担当の川久保です。

先日シドニーで行われたW3C CSS Working Groupのface to faceミーティングに、Vivliostyleチームの村上真雄川久保亮Johannes Wilmが参加しました。今回は、CSS Working Group本体のミーティングの前に、CSS Houdini Task Force(以下で説明)の初回ミーティングも行われました。これらのミーティングの内容についてご紹介します。

場所

今回のミーティングはGoogle Sydneyで行われました。

building1

ビルの外側にはGoogleと書かれていませんが、この中にGoogleのオフィスが入っています。近くの別のビルにもGoogleのオフィスがあります。

harbour

ビルの前はこんな感じです。

google

ビルの中に入るとGoogleのロゴが。

bike

Googleマップ用の自転車がありました。

Googleでは毎日ランチが用意され、とても美味しかったです。ディナーも3回もGoogleにごちそうしていただきました。ごちそうさまでした!

CSS Houdini F2F 2/7-8

2/7, 8の2日間で、CSS-TAG Houdini Task Forceの初回face to faceミーティングが行われました。

Houdini TFとは

Houdini TFは、Extensible Web (紹介記事1, 2)の思想に沿って設立されたもので、webのスタイル・レイアウトに関する低レベルのAPIを定義することで、既存のCSSの機能をより良く説明し、またCSS polyfill(まだブラウザーで実装されていない機能を、JavaScriptで代わりに実装すること)の開発を容易にすることを目的にしています。JavaScriptを使って高度な組版を行おうとしているVivliostyleにとっても、大変重要なテーマです。Houdini TFに関連する議論はW3Cの公開メーリングリスト public-houdini で行なわれています。

ちなみにHoudiniとは、アメリカの著名な奇術師の名前だそうです。ネーミングの経緯はこちら(MLの投稿)

ミーティングの内容

今回の第1回ミーティングには、Microsoft, Google, Mozilla, Apple, Adobe, W3Cなどから22人が参加しました。参加者の顔ぶれ:

現時点ではまだ議事録は正式にまとめられていないのですが、IRCログで議論の内容を読むことができます。(2/7のログ 2/8のログ

3/4追記 議事録が公開されました。
* Minutes Sydney F2F 2015-02-07 Part I: Introductions and Houdini Aspirations
* Minutes Sydney F2F 2015-02-07 Part II: Houdini-Related Presentations
* Minutes Sydney F2F 2015-02-07 Part III: Houdini-Related Presentations Continued
* Minutes Sydney F2F 2015-02-07 Part IV: Scope and Proposed Charter, Box Tree Spec
* Minutes Sydney F2F 2015-02-08 Part I: CSS Parser
* Minutes Sydney F2F 2015-02-08 Part II: Property and Value Extensions, Font Metrics
* Minutes Sydney F2F 2015-02-08 Part III: Custom Paint, Custom Layout
* Minutes Sydney F2F 2015-02-08 Part IV: Input Extensions, Asynchronicity and Threading, and Houdini Process

ミーティングでは参加者の自己紹介が行われた後、TFのトピックをリストアップするためのプレゼンテーション・議論が行われました。出てきたトピックは以下の通り:

その後議題の整理が行われ、各トピックについてより突っ込んだ議論が行われました。

  • Fragment Tree API
    • レイアウトの際に生成される”fragment tree”を明確に定義し、それの情報(大きさ・位置など)を取得する読取専用のAPIを定義しようという議論です。
      • 今までの議論では、CSSのレイアウトの対象となる”box”にアクセスするものとして”Box tree API”と呼ばれていました。しかし、CSSのモデルでは1つの”box”から複数の”fragment”が生成される場合があります。例えば、p要素の中のテキストが複数の行を作る場合、それぞれの行は、p要素のボックスの内容が分割されてできた”fragment”と考えることができます。(ただしこの場合は「行ボックス」と呼ばれたりもします)また、ページや段組といったものも”fragment”の例です。CSSのレイアウトを考える上では”box”より”fragment”の方がより基本的な構成要素であるという観点から、”Fragment Tree API”という名称になりました。
    • 行ボックスなど、今までアクセスできなかった匿名ボックスの情報が得られるようになることで、JavaScriptで高度な組版処理が可能になるという点で重要です。
    • APIを非同期にすべきか?どういう情報を提供すべきか?APIの形といった議論がなされました。
    • すでに仕様のドラフト(Fragment Tree API Level 1)が作られています。現時点ではモデル・APIのスケッチのみですが、今後の動向に要注目です。
  • CSSパーサー
    • ブラウザーが持っているCSSパーサーの機能を、APIとして提供しようという議論です。
    • セレクター、特に擬似クラスをユーザーが独自に定義できるAPIが議論されました。
    • VivliostyleのようなCSS polyfillにとっては重要なAPIです。
  • プロパティ・値の拡張
    • ユーザーが独自のプロパティ・値を定義できるAPIを提供しようという議論です。
    • 参考 ホワイトボード wiki
    • これも、CSS polyfillにとって重要です。
  • フォントメトリックAPI
    • DOMレンジの先頭の文字に実際に使用されているフォントのメトリック(ディセンダー・アセンダーなど)を取得できるAPIを提供しようという議論です。
    • 言うまでもなく、高度な文字組版のために重要です。
  • カスタムペイント
    • 議論の内容をあまり追えていないので説明は省略します。
  • カスタムレイアウト
    • “display: –foo”のようなカスタムレイアウトをユーザーが定義できるようにしようという議論です。これも具体的なイメージはあまり理解できていないですが、高度な組版レイアウトを実現する上で重要だと思います。
  • Input extensions
  • Asynchronicity and Threading
    • これらも詳細は理解できていないので省略しますが、スクロールなどのパフォーマンスを上げるために重要なのかな?という印象です。
  • Houdini TFのプロセス
    • 当面はメーリングリストで議論・作業を進め、必要に応じて電話会議・face to faceミーティングを検討しようという感じです。

会議の参加者、特に各主要ブラウザーエンジンの実装者 (Microsoft, Google, Mozilla, Apple) が活発に議論し、この画期的な取り組みを前進させていこうとする姿勢が印象的でした。議題に挙がったテーマはどれもかなり大きなテーマですが、すべてを一度に決めようとするのではなく、Extensible Webの精神にのっとって可能なものからできるだけ早くweb開発者に提供しようということが度々言われていました。今後も速いペースで仕様の議論・実装が進んでいくと期待しています。作成されることが決まった仕様は、すでにEditor’s Draftが作られています。(Editor’s Draft置場)MLと合わせて、要チェックですね。

CSS Working Group F2F 2/9-11

Houdini TFのミーティングに続いて、2/9, 10, 11の3日間でCSS Working Groupのface to faceミーティングが行われました。CSSWGは毎週1時間の電話会議を行っており、www-style MLでの議論について方針を決めたりしているのですが、それの拡大版という感じです。F2Fミーティングではホワイトボードやプロジェクターを使うことができるのが、電話会議とは違うところです。

会議の議題はこちら

CSS Page Floats

Vivliostyleにとって一番大きなトピックとなったのは、CSS Page Floatsについての議題です。CSS Page Floats仕様は、図版をページ内で適切に配置するための仕様で、Vivliostyleが目指す高度なページ組版にとって大変重要なものです。OperaのHåkonがエディターでしたが、HåkonはWHATWGのCSS Figuresで作業しており、W3C側の仕様であるCSS Page Floatsは1年半ほど更新されていませんでした。

今回、VivliostyleのJohannes Wilmがエディターを引き継ぐことを提案し、承認されました!

既存のCSS仕様と重複するexclusions (CSS Exclusions), regions (CSS Regions)のセクションを削除したうえで、CSS Figuresとの互換性に配慮しながら仕様策定を進めることになりました。また、Appleの参加者から、WebKitへの実装に興味ありとの発言がありました。iBooksで使用するために興味があるということのようです。Johannesの提案では、CSS Page FloatsはJavaScriptによるpolyfill(およびAntennaHouse Formatter, PrinceXMLなどの独自レイアウトエンジン)による実装を主要な対象としており、各ブラウザーに実装を要求するものではないという立場でしたが、WebKitが実装することに興味があるということは大変歓迎すべきことです。

その他のトピック

すべてのトピックの解説はできないので、組版に関連したものを中心に印象的だったものを紹介します。

  • white-space, text-wrap, text-space-collapse
    • CSS Text 3のwhite-spaceは、空白の取り扱いと改行の可否という2つの異なる性質を制御していた。
      CSS Text 4ではこれを、改行の可否を制御するtext-wrapと、空白の取り扱いを制御するtext-space-collapseに分けることに。
      ホワイトボード
    • text-space-collapseにはいくつか新しい値が追加。
    • text-wrapには、新しい値balanceを追加。ブロック要素に指定された場合、要素内の各行の長さをできるだけ均等にする。
    • text-wrapには当初、新しい値avoidが追加されていた。これは、要素内での改行をできるだけしないように指定するもの。
      ところがtext-wrapは値が継承されるため、要素が入れ子になっている場合に、一番外側の要素にのみavoidが指定されている場合も、内側の要素がより改行されにくいようになってしまう問題があった。
      結局、avoidに関してはtext-wrapから外し、値が継承されない別プロパティwrap-inside, wrap-before, wrap-afterを追加することに。
  • 絵文字などの前後の改行
    • img要素や絵文字などの置換要素の前後で、禁則処理が効かない(改行してはいけない場合に改行してしまう)というCSS Text 3の問題
    • 置換要素をideographic characterと見なし、禁則処理が正しく効くようにする。ただし、置換要素の前後にnbspを使っているページが多数存在する場合は、nbspに関しては例外をもうける
  • Writing modeをbodyからhtmlへ伝播させる
  • CSS Inline
    • この仕様は、テキストのブロック進行方向での配置を説明するもので、vertical-alignやドロップキャップなどが含まれている
    • ドロップキャップに関する課題について議論 スライドPDF
  • @extend
    • SASSでサポートされている@extendと同じような機能をCSSでも使えるようにしようという議論
    • 有用性は認めるものの、設計・実装上の懸念が多数指摘された
    • 大きな警告(内容が大きく変更される可能性がある)付きでEditor’s Draftを作成することに
  • ruby-position
    • ruby-positionプロパティには、over|under|inter-characterに加えて、縦書き時の指定left|rightも合わせて指定できるようになっていた
    • left|rightを追加で指定できる必要性は薄い(”over left”や”under right”のユースケースがない)ことから、left|rightの指定を削除することになった
    • 参考www-styleスレッド

まとめ

今回のHoudini TFのミーティングでは、webのスタイル・レイアウトに関する低レベルなAPIについて、どのような形で提供するのがよいのか、またどのような技術的課題があるのか、といった高度な議論に触れることができ、とても刺激を受けました。今後もMLで議論は続けられていくので、動向を注視しつつ、議論に参加できるところはしていきたいと思っています。公開MLですので、興味がある方は議論に参加してみてはいかがでしょうか。

CSSWGのミーティングに関して、Vivliostyleにとっての一番の成果は、CSS Page Floats仕様を発展させていくことの合意を取れたことです。エディターになったJohannes Wilmは以前からVivliostyleのメンバーになっていましたが、実は今回が初顔合わせでした。実際に会って話をし、今後の方向性を確認し、CSS Page Floatsを前進させるきっかけを作れたのは非常に良かったと思います。

また個人的には、日頃www-style MLで議論している人たちに実際に会うことができたのもよかったです。メールを読んでいるだけでは分からないそれぞれの方の雰囲気・性格に触れられたことは、今後CSSWGで活動していく上で役に立ちそうだと思っています。

Vivliostyleの今後の活動ですが、当面は私がVivliostyle.jsの開発を進め、JohannesがCSS Page Floatsの改訂を行っていくということになります。できるだけ早い時期に、皆さまに成果をお見せできるようにしたいと思っています。今後ともどうぞよろしくお願いいたします!