アドビの W3C 活動と CSS のページテンプレート機能

CSS Pagination Templates

CSS Pagination Templates は、CSS を使って、コンテンツを配置するページのテンプレート （レイアウトのルール） を記述するというアイデアです。

現在は、Web サイトで 「ページ」 と言えば、たいていは 1 つの HTML ファイルを意味します。閲覧者にとって、コンテンツが多ければ 「ページ」 をスクロールし、それでもまだコンテンツが続く場合は、次の 「ページ」 をクリックして読み込む、というのが、いまのところの一般的なユーザ体験になっています。

これに対して、CSS Pagination Templates では、HTML コンテンツ内に 「独立したページ領域」 を持つことになります。

閲覧者からは、スクロール操作もクリックによるページ読み込みも無しで、続きのコンテンツを表示できる、という点が、Pagination Templates を使った場合の大きな特徴です。なので、より印刷物に近い操作感の実現、という見方もできるかもです。

ページ領域へのコンテンツの配置は動的に行われるため、解像度の高い画面では、一度により多くのコンテンツを表示できます。残りのコンテンツは、自動的に次のページに配置されます。

HTML コンテンツ内に、独立した、スワイプしてページめくりのできる領域 （つまりページ） を持てるわけで、特に長い文書をマルチデバイスに表示したい時などには有効そうです。また、レスポンシブ Web デザインとの相性も良さそうです。

最後に、具体的な例をご紹介します。下は 3 カラムのレイアウトのページの例です。

今のドラフト案では、上のレイアウトを実現するために、以下の様にしてテンプレートを定義します。

@template {
  @slot left {
    width: 35%;
    float: left;
    flow-from: article-flow;
  }
  @slot time {
    width: 25%;
    float: left;
    flow-from: timeline-flow;
  }
  @slot right {
    width: 35%;
    float: left;
    flow-from: article-flow;
  }
}

コード内の flow-from は、スロットに読み込むコンテンツを指定します。上の例では、left と right に同じ値が指定されているので、左カラムのコンテンツの続きが右カラムに表示されます。

flow-from の値と HTML 要素の関連付けは以下のように行うことになっています。

#article {
  flow-into: article-flow
}
.german {
  flow-into: timeline-flow
}

まだ、ドラフトにもなっていない案ではありますが、実現されたら役に立つこともありそうです。他のドラフト案も含め、楽しみです。