CSS Text Layout Module Level 3(W3C)における
ウェブ縦書き議論

最終更新日: 2010/06/06
アンテナハウス株式会社

趣旨

CSS Text Layout Module Level 3(W3C)に縦書き仕様をどのように盛り込むかについて活発な議論が行われている。これについて現時点(2010年6月6日)での議論と対策を整理しておく。

スコープ

CSS3は、現在策定中の仕様であり、完成は数年先になるであろう。そして、少なくともその先10年から20年程度はその影響は有効であろう。そうなると電子的なコンテンツから紙の書籍を実現する手段であるPDFを通じて紙の書籍に影響を与えるし、さらに将来どういう形になるかは分からない電子書籍に影響を与えることになる。そこで、ここでは検討の範囲を、Webページに限らず、書籍等まで広げて考える。

現状

従来、Webブラウザは縦書きをサポートしていなかったので、縦書きを前提として制作しているWebページはほとんど見当たらない。しかし、このことは日本のWebページに縦書き需要がないことを意味してはいないだろう。

日本では、新聞、雑誌の多く、文芸書籍の大半、経済・ビジネス書籍、一部の教科書は、縦書きで制作されている。

日本の電子書籍は、現在の時点ではコミックや携帯小説が中心である。これに対して、今後は、これらの新聞・雑誌・書籍を電子デバイスを対象として配信する電子出版の普及が見込まれる。その理由は次の通りである。

  • iPhoneを初めとするスマートフォンが普及し始めた。iPhone上の電子書籍が売れ始めている。
  • iPadなどのSlate PCが登場して成功しそうだ。Slate PCは電子書籍のリーダとして期待できる
  • 日本では、電子書籍リーダは2004年頃に一回失敗したが、今年は、Kindleなどe-Inkを使った電子書籍リーダが登場して普及するという期待が膨らんでいる

例えば、最近、発売されて人気が出ているiPhone用の電子ブックアプリケーション『もし高校野球の女子マネージャーがドラッカーの「マネジメント」を読んだら』(もしドラ)は縦書き専用のリーダを組み込んでいる。

縦書きに関連する要求事項

縦書きの仕様の設計では、次のようなことを考慮すべきである。

横書きと縦書きの相違

書籍までスコープを広げて考える場合、CSS3のレイアウトでは次のようなことを指定できて欲しい。

本の綴じ
横書きの本は左綴じ(左開き)であるのに対して、縦書きの本は右綴じ(右開き)である。さらには、縦書きの本に索引、図表一覧などを付ける場合、図表一覧は横書きになる。そうすると、1冊の本に左綴じと右綴じが混在することになる。
ページ進行方向
横書きの本はページを左から右に進める。縦書きの本はページを右から左に進める。リーダで1ページ単位で表示する場合、このことは意識されないが、見開き表示する場合は問題になる。
ヘッダ・フッタの配置
ページ番号や注釈は縦書きでも横書きでも、ページの上下の余白に配置することが多い(但し、デザインによっては左右余白に配置することもあるだろう)。横書きでは行の進行していく方向が下であり、縦書きでは文字が進行していく方向が下である。
多段組における段の進行方向
横書きでは段落は左の段から右の段へと進む。ところが、縦書きでは段落は上の段から下の段へと進む。
1ページ(1段)の行数
横書きでは1ページ(1段)の行数は用紙の高さと上下の余白、行の高さ(文字高+行間)の関係式として決まる。ところが縦書きでは1ページの行数は用紙の幅と左右の余白と行の幅(文字幅+行間)の関係式として決まる。
1行(段)の文字数
横書きでは1行(段)の文字数は用紙の幅と左右余白および段間余白と文字送り幅の関係式として決まる。ところが縦書きでは1行(1段)の文字数は用紙の高さと上下余白と段間余白、文字送りの関係式として決まる。
縦中横
縦書きでは数字や組文字は、縦の行の中で横に配置することがある。
アンダーライン
アンダーラインは横書きでは、行の下に引く。しかし、縦書きでは右に引くのが通常である。これは文字の進行方向でみると反対方向である。
文字のグリフ
漢字やひらがなのグリフ(文字の字形)の大部分は正方形にデザインされているので、縦書きと横書きの両方に使うことができる。しかし、括弧類、句読点、幼促音類は、横書きと縦書きで異なるグリフを使わなければならない。また、プロポーショナルなフォントではひらがなが正方形でデザインされているとは限らない。その場合、文字を書き進める幅に横書きでは文字幅を使うが、縦書きでは文字の高さを使わなければならない。

このように横書きと縦書きとで様々な特性値の対応関係・計算式を入れ替える必要がある。

国際標準として

CSS3をグローバルな標準として使うためには、縦書きだけではなく、アラビア文字やヘブライ文字のように右から左に書く文字で表記する文書のテキスト・レイアウト指定にも適用できなければならない。

縦書き未来応のリーダでのフォールバック

現在のWebブラウザの縦書き対応は極めて不十分である。電子書籍でも海外製のリーダは横書きしか表示できない場合が多いと予想される。このような横書きしか対応できないWebブラウザやリーダで、CSS3によって縦書きレイアウトを指定したページを表示したときでも、正しく表示できることが望ましい。このためには横書きへのフォールバック機能が定義されていることが望ましい。

CSS3仕様での取り扱い

CSS Text Layout Module Level 3の5月5日付けのEditor's Draftには次のプロパティの記述がある(番号は仕様書の見出し番号)。

2. Writing モードと用語
Writing モードはインラインとブロックの進行方向を使って定義する。インラインとは行の中で内容が進む方向でありdirectionとunicode-bidiのプロパティで規定する。ブロックの進行方向はblock-flowプロパティで規定する。
3. インラインの方向と双方向性
directionプロパティに、ltr(左から右) と rtl(右から左)を規定する。
4. ブロックの進行方向
block-flowプロパティに、tb と rl と lr を規定する。tbは上から下(横書き)、rlは右から左(縦書き)、lrは左から右(縦書き)。
4.3. writing-modeショートハンド・プロパティ
writing-modeというショートハンドを定義する。6種類の値はdirectionとblock-flowプロパティの組み合わせと同等である。例えば、日本語の縦書きはwriting-mode="tb-rl"であるが、direction="ltr"、block-flow="rl"に展開する。
5. 論理的な方向プロパティと値
writing-mode相対のプロパティとして論理プロパティを定義する。
5.2. 論理プロパティ
次のような論理プロパティがリストアップされている:margin-before, margin-after, margin-start, margin-end, padding-before, padding-after, padding-start, padding-end, border-before-width, border-after-width, border-start-width, border-end-width、border-before-style, border-after-style, border-start-style, border-end-style, border-before-color, border-after-color, border-start-color, border-end-color, border-before, border-after, border-start, border-end, logical-width, logical-height、min-logical-width, min-logical-height
5.3. 論理プロパティの値
物理プロパティ値(top, bottom, left, right))を適用するプロパティには論理プロパティ値(before, after, start, end)も適用すべきである。次のようなプロパティが該当する:float, clear, background-position, text-align。

参考資料


Copyright © 1996 - 2010 Antenna House, Inc. ALL Right reserved.
Antenna House is a trademark of Antenna House, Inc.