第二回部会 - Part 1 (概要)

概要:
CSS3 Writing Modesの研究 - 概要
関連するW3C仕様:

皆様こんにちは。BPS株式会社CSS部の第二回部会(2014/10/14開催)です。部会から記事掲載まで間があいてしまいましたが、今回はCSS 3 Writing Modesについて取り上げます。 今回も長くなりますので、複数回に分けて掲載します。

第二回のテーマはWriting Modesです。

CSS3 Writing Modesの基本概念

最初は英語のみに対応した規格や技術が、後にさまざまな言語に対応するようになるというのは、IT技術によくあることです。 CSSも御多分にもれず、当初は英語の横書きのことしか考慮されていなかったのが、さまざまな言語への対応の幅を広げようと、新しい仕様が随時検討され追加されてきました。

CSS2では、directionやunicode-bidiプロパティが定義され、横書きの複雑なレイアウトを行う言語を扱えるようになりました。

CSS3では、そうしたテキストの進行方向はWriting Modesモジュールにまとめられました。 CSS3 Writing Modesモジュールは、従来の言葉で言うところの「書字方向」にだいたい該当します。 縦書きのための仕様策定も、現在このモジュールで進められています。

余談

CSS2.1のときは、1つの巨大な仕様の塊でしたが、Level 3を作るときに「モジュール」という単位に分割することになりました。 例えばこういうのがあります。

「モジュール」と呼ばれてはいるものの、それぞれが独立した構造を持ってしっかり管理されているあるわけではありません。 どちらかというと「議題」や「テーマ」のような分類程度に考えていただいてよいでしょう。

多言語を考える際には「方向」に注意

英語やヨーロッパの言語のことだけ考えていればよかった時代には、画面上のテキストの「進行方向」は「右」であるとか「下」であるという言い方をしていても何とかなっていました。

しかし、それ以外の言語に目を向け始めると、文字の進行方向だけで見てもいくつかのモードが考えられます。

文字の進行方向 説明
文字が左から右に進む
(left-to-right)
ラテン系の英語やヨーロッパの多くの言語、インド系の言語、それ以外にも多くの言語が該当する。
ITにおける英語の影響力が圧倒的に大きいため、デフォルトの地位を占めている。
LTRと略されることも。
文字が右から左に進む
(right-to-left)
アラビア語、ヘブライ語などが該当。
アラビア文字を使用する人口は非常に多く、よりよい対応が望まれている。
RTLと略されることも。
LTRとRTLの混在 bidirectional、あるいはBiDiと略されることも。
RTLとされる体系でも、しばしば数字や英単語など局所的に左から右に記載する要素が含まれるため、現実的にLTRとRTLの混在ということで、アラビア語などはbidirectionalに分類するのが一般的。
縦書き 本部会で最も関心が寄せられているモード。
日本語や中国語、韓国語などは元々縦書きであり、PCでの横書きが普及した今も、漫画を含む出版物の多くで縦書きの根強い需要がある。

このように「横書きで左から右に書く言語」「横書きで右から左に書く言語」「縦書きで行が右から左に進む言語」「縦書きで行が左から右に進む言語」をすべて考慮して記述するとなると、進行方向と言ってもいくつもの概念が折り重なっているように思えます。 そこで、CSS 3 Writing Modesでは、必要な用語を定義しながら先に進む必要に迫られました。これらを順に解説いたします。

余談

横書きで牛耕式ぎゅうこうしき (boustrophedon, /ˌbuːstroʊˈfiːdən/)という、偶数目の行はLTR、奇数目の行はRTL、のように交互に進む体系もありますが、W3Cでは扱わないようです。

下の図は、牛耕式で書かれたギリシャ語のテキストです。 各段、矢印の方向に読み進めます。 鏡像になっている文字があるのがわかるでしょうか。 牛耕式では、文字が行頭方向を向くように鏡像の文字が使われることがあり、行をどちらの方向に読むべきかのヒントになります。 ヒエログリフでは、人物や動物の顔が向いている方向が行頭です。

Boustrophedon

(Wikipedia「牛耕式」より)

ちなみにギリシャ文字は当初、アラビア文字と同じように右から左に書かれ、それがこの例のように牛耕式でどちらの方向にも書かれるようになりました。 最終的に、左から右への方向が定着し、ローマ帝国もそれをお手本にローマ字を完成させました。 こうして今日、「Roman」や「Latin」と呼ばれている文字は、ギリシャで定着した、左から右への書字方向となっているわけです。

なお、牛耕式は、上の表の「bidirectional」には含めません。

Writing Modesが扱うプロパティ

方向についておおまかに解説したところで、Writing Modesがどのようなプロパティを扱っているのか見てみましょう。 3.1 Block Flow Direction: the writing-mode propertyの表をご覧ください。

プロパティ名だけリストしますが、このようになります。

  • direction
  • unicode-bidi
  • writing-mode
  • text-orientation
  • text-combine-upright

このあとの項でいくつか取り上げて解説していきます。

ブロックの進行方向

CSSではblock flow directionと呼ばれ、このように定義されています。

The block flow direction is the direction in which block-level boxes stack and the direction in which line boxes stack within a block container. The writing-mode property determines the block flow direction.

(ブロックの進行方向は、ブロックレベルのボックスが積まれる方向である。また、ブロックコンテナ内でラインボックスが積まれる方向でもある。 writing-modeプロパティがこのブロックの進行方向を決定する。)

ブロックレベルのボックスを次々に追加した場合に、ボックスがブロックコンテナ内で積み重なっていくときの方向であり、writing-modeプロパティで定義されます。 また、長い文が、ある幅で折り返されたときや、明示的な改行が指示されたときに、次の行が積まれる方向でもあります。

ブロックの進行方向は、3通りあります。

  • 上から下に行が進む: 英語、アラビア語など、横書きの文字体系すべて
  • 右から左に行が進む: 縦書きの日本語、中国語など
  • 左から右に行が進む: 縦書きのモンゴル語など(モンゴル語の書字方向)。

横書きは、CSSでwriting-mode: horizontal-tbを指定します。 horizontalは水平のことで、文字が横(horizontal)に進むことを表します。 tbtop-to-bottomの略で、ブロックが上から下(top-to-bottom)に進むということを記述しています。 下の図で、緑の矢印で示されている方向ですね。 block flow direction tb

縦書きではどうでしょうか。 日本語の縦書きでは、writing-mode: vertical-rlを指定します。 verticalはもちろん縦書きのことで、文字が縦に進みます。 rlright-to-leftの略で、縦書きの小説を読んでいるときのように、行(ブロック)は右から左に流れていきます。 下の図の緑の矢印の方向です。

block flow direction rl

プロパティを表にまとめます。

writing-modeプロパティの値 説明
horizontal-tb ブロックは、画面の上から下方向(top-to-bottom)に進む。
文字の進行方向は「横書き(horizontal)」。
vertical-rl ブロックは、画面の右から左方向(right-to-left)に進む。
文字の進行方向は「縦書き(vertical)」。
vertical-lr ブロックは、画面の左から右方向(left-to-right)に進む。
文字の進行方向は「縦書き(vertical)」。
余談

この表で値が3種類なのは、horizontal-btが欠けているからです。 Internet Explorerがかつて実装していたようですが、今はサポートしていません。 さすがに下から上に行が進む言語というものは現用されていないようで、CSS仕様でも扱わないとしています。

歴史的な文字では、中央ユーラシアの突厥文字が、まれに行が下から上に進みます。 基本形は、文字は右から左への横書き、行は上から下へ進む、というのが普通のようです。 また、縦書きも可能で、基本の横書き全体を時計回りに90度または反時計回りに90度倒したような形の碑文も見られるようです。

下の写真では、左上から下に進み、行は左から右に進みます。

左縦書きの突厥文字

(Wikipedia「Old Turkic alphabet」より)

他に下から進むのがデフォルトの文字として、アイルランドのオガム文字があります。 石碑の左下が開始点で、そこから上に向かい、「門」の字のように3辺を囲うようにして、右下に進みます。 辺に沿って、文字の向きも変化します。

オガム文字

(Wikipedia「Ogham」より、オガム文字の碑文)

inline base direction

block flow direction

今度はオレンジで表示されているinline base directionです。 要するに、文字がどの方向に追加されていくかというものです。 ブロックの進行方向の説明では、「横に」「縦に」とだけ既定していました。 ここで、横といっても右から左なのか、はたまた左から右なのか、また縦と言っても上から下なのか、下から上か、を決めます。

The inline base direction is the primary direction in which content is ordered on a line and defines on which sides the “start” and “end” of a line are. The direction property specifies the inline base direction of a box and, together with the unicode-bidi property and the inherent directionality of any text content, determines the ordering of inline-level content within a line.

(inline base directionは、行内で文字が進む主要な方向であり、startやendといった値が行に対してどの方向を向くのかを定義する。 directionプロパティが、ボックスのinline base directionを示し、unicode-bidiプロパティおよび継承したテキストコンテンツの進行方向と合わせて、行内において、インラインレベルのコンテンツの順序を決定する。)

これは、1つの行の中で文字を増やしていったときの主要な進行方向を表します。 と同時に、line boxのどちら側の辺がそれぞれ「行頭」と「行末」であるかを定義します。 「主要な」というのは、英語中にアラビア語が挿入されるなど、部分的に異なる方向を持つ要素が混在したときでも、行全体の方向を見失わないためです。 ボックスのinline base directionはdirectionプロパティで指定でき、unicode-bidiプロパティを同時に指定したり他のテキストコンテンツの進行方向を継承したりすることで、ひとつの行の中にあるインラインレベルのコンテンツ(普通は文字)の進行方向を決定します。

directionプロパティの値は、下記の2つです。

ltr: Left-to-right directionality.

rtl: Right-to-left directionality.

英語などの多くの言語は左から右(ltr)、アラビア語やヘブライ語などは右から左(rtl)に文字が進みます。

余談

アラビア文字を使用する言語はアラビア語だけではありません。ペルシャ語(イランの公用語)やクルド語などたくさんあります。(アラビア文字と言語)

line orientation

block flow direction

続いて青い矢印で示されているのがline orientationです。これは、たとえばアンダーラインをどこに引くかという根拠となります。上の2つと異なり、文字や行が進む方向とは関係ありません。

The line orientation determines which side of a line box is the logical “top” (ascender side). It is given by a combination of text-orientation and writing-mode. Usually the line-relative “top” corresponds to the block-start side, but this is not always the case: in Mongolian typesetting (and thus by default in vertical-lr writing modes), the line-relative “top” corresponds to the block-end side. Hence the need for distinct terminology.

(line orientationは、ラインボックスのどちら側が論理的なtop (アセンダのある方向)かを決定する。 これはtext-orientationおよびwriting-modeの組み合わせで決まる。 通常は、行に相対するtopはブロックの開始位置を向く。 例外があり、モンゴル文字の組版では行に相対するtopはブロックの末尾を指す(なお、これをvertical-lrのデフォルトとしている)。 本用語の定義が必要となっているのは、このためである。)

line orientationは、line boxの4つの辺のうち、どの辺が論理的な上(logical top)であるかを決定するものです。 line boxは既におなじみの、テキストの1つの行を構成するボックスです。 英語的横書きの世界であれば、行の立場から見た「上」(line-relative “top”)は「ボックスの積み重ねの開始地点のある方向」つまり画面の方向と一致するのは自明です。

line box

この値は、text-orientationwriting-modeの組み合わせによって決定されます。

日本語のような縦書きでは、ブロックの先頭方向、つまり右側をとします。 そうすることで、オーバーラインは行の、つまり右側に、アンダーラインは行の、つまり左側に表示します。

しかし、仕様にも書いてあるように、writing modeをモンゴル語のデフォルトであるvertical-lrにしたときも、行の立場から見た「上」(line-relative “top”)は画面に向かって「」になります。 以下の図でいうと、青いボックスの右側の赤い線がlogical topです。 ブロックの積み重ねは、左から右に進みますので、そっちは終端に向かう方向ですが、なぜか下ではなく上ということになっています。 このプロパティの通り、アンダーラインは日本語と同じ側、つまり文字の左側に引かれるわけです。

Mongolian

余談

モンゴル語が左始まりの縦書きになっているのは、実はアラビア系の文字をベースにしているからです。アラビア語の文が左に90度倒れた形で進んでいるとみなすとよいでしょう。

ところで、普通に考えればモンゴル語では文の開始地点が左側にあるのですから、それに合わせて青いボックスの左側がlogical topになりそうなものです。なぜこうなってしまうのでしょうか。

おそらくそのヒントになるのは、上のモンゴル語の左の方に混じっている英語です。モンゴル語に混じった英語(緑のボックス)はなんと右に寝ています。こういう短い語ならまだよいですが、パラグラフぐらいに長くなると、自分の頭を右に倒して横書きの英文の立場で見たときに、行が下から上に進んでいくという壮絶なことになりそうです。

ここから先は想像ですが、モンゴル語で縦書きの本を書いた人々はおそらく、モンゴル語も横書き言語(英語)もどちらも上から下に書き進められるように、語の頭を上にしたのではないでしょうか。 おそらくCSS仕様のeditorたちは、そうした理由もあってvertical-lrではボックスの右をlogical topに制定したのではないでしょうか。

ところで、この英語交じりのモンゴル語にさらにアラビア語が混じったらどんなふうに表示されるのでしょうか。 「縦書きでは下から上に文が走ることはない」と考えれば、アラビア語は英語と逆にに寝るのが筋と思えます。 しかしそうすると、英語とアラビア語はモンゴル語の中では互いに天地が逆になってしまうでしょう。 英語とアラビア語とモンゴル語がすべて読める人にとってはかなりグロテスクな表示になりそうです。 以下の図で、アラビア語の代わりにカタカナで「テキスト」という文字を右から左になるように置いてみました。 横の英語と裏返しになっているのがわかると思います。

Mongolian

実際のブラウザ表示でどうなるかは試していませんが、どんなふうに表示されるのか興味を惹かれるところです。 W3Cのメーリングリストでも度々議論に上がっているようですが、やはりモンゴル語の中に、天地が逆になった英語とアラビア語が同時に出るのは具合が悪いということで、残念ながら三種混合が仕様になることはなさそうということが伝わってきます。 興味のある方は、公開されているメーリングリストの過去ログを「vertical Arabic」のキーワードで検索してみてください。

なお、現在のモンゴル語は旧ソ連からの影響や、PC環境の対応の遅れなどの理由もあって、キリル文字で書くのが当たり前になっています。 モンゴル語の縦書きの需要は、現時点では限定的です。

MongolNews

(Mongol Newsより、キリル文字で記述されているモンゴル語コンテンツの例)

文字の向き

上の図にはありませんが、実はただいま紹介した3つの方向の他に「文字の向き」という要素もあります。 詳細は後述しますが、文字の向きはtext-orientationプロパティで指定します。

block flow direction

日本語の縦書きの中に、長い英語の引用を入れるときなどは、英字の頭が右を向いていることがよくありますね。 また、短い英語の略語などは、英字の頭は上を向いています。 このように、ひとつの行の中で文字の向きが変わるということがあるわけで、それに対応するためのプロパティとなっています。

direction

位置・方向・長さの用語の再定義

前述したように、CSS2.1は基本的に英語などラテン系言語であるhorizontal-tbしか考慮されていませんでした。 しかし多言語の世界ではブロックの進み方によって向きが変わるものがあったりするので、これまであいまいなままであった方向・位置・大きさなどに関する用語を改めて定義する必要があります。

たとえばtext-align: leftは、行の端を行頭方向に揃える指定ですが、縦書きにおけるleftを横書きのleftとどうやって統一的に扱えるようにするかなど、考慮すべき点は実にたくさんあります。その結果、Writing Modesでは多くの用語が定義されました

今思いつくところでは、だいたい以下のように分類できます。

  • writing modeの影響を受けないもの
  • 進んでいる方向に影響を受けるもの
  • 行の向き(line orientation)に影響を受けるもの

これらは、CSSの仕様ではphysical、flow-relative、line-relativeといったカテゴリに分けられています。 下の図をご覧ください。

slide

緑が物理的な位置、オレンジが相対的な位置を示すプロパティ値です。 下の項で、それぞれ説明していきます。

physical - 物理的な位置を示す用語

仕様での説明はこうなっています。

physical: Interpreted relative to the page, independent of writing mode. The physical directions are left, right, top, and bottom.

(物理的: ページに対して相対的なものとして扱われ、writing-modeからは独立している。left、right、top、bottomがこれに当たる。)

left/right/top/bottomは、物理的な位置(人間が画面を見ているときの画面内の位置)を指します。 writing modeや行の向きなどには影響されません。leftと言えば常に画面の左になるわけです。

margin-sample

上の図のように、縦書きでも横書きでも、leftは画面に対して左を指します。

ただし、例外もあります。 text-alignでは、left/rightではなく行の方向に対して相対的で、縦書きのときは行頭・行末方向を指します。

flow-relative - ブロックや行の進行方向に影響される

次に、ブロックや行の進行方向に追従するものを見てみましょう。

flow-relative: Interpreted relative to the flow of content. The flow-relative directions are start and end, or block-start, block-end, inline-start, and inline-end if the dimension is also ambiguous.

(フローに相対的: コンテンツのフローに対して相対的なものとして扱われる。start、end、block-start、block-end、inline-start、inline-endがこれに当たる(サイズが未定のとき)。)

start/endは、ブロックや行の進行方向によって変わります。ブロック要素とインライン要素それぞれにこの方向がありますので、それぞれblock-startやinline-startがあります。

line-orientationの説明で出てきた「block-start side」や「block-end side」は、それぞれブロック内の「開始側」と「終端側」を指します。 たとえば横書きならblock-start sideはtopになり、日本語の縦書きならblock-start sideはrightになるわけです。

ちなみに、詳しくは本編に譲りますが、LTR start/endとRTL start/endは、inline base directionによって変化します。

line-relative - 行の向きに対する位置を示す

line-relative: Interpreted relative to the orientation of the line box. The line-relative directions are line-left, line-right, line-over, and line-under.

(行に相対的: ラインボックスの方向に相対的なものとして扱われる。line-left、line-right、line-over、line-underがこれに当たる。)

line-left/line-right/line-over/line-underが指す位置は、前述のline orientationの指定によって変わります。 line orientationはアンダーラインとの関連が深く、どこにアンダーラインを引くかに影響するプロパティですね。 ここにもleftとrightという用語が出ますが、さきほどのphysicalの例外にあるように、これらは物理方向のleft/rightは指しません。

アンダーラインは、後者のunderに基いて引かれます。日本語の縦書きでは、underはleftの位置に来て、そこにアンダーラインが引かれるわけです。

物理的なサイズを表す (physical)

位置の話のあとは、サイズを表す用語です。 まずは、画面に対して見たときの物理的なサイズです。

  • width
  • height

widthは、画面に対して横方向にサイズを計ったときの大きさです。 同様にheightは、画面に対して縦方向にサイズを計ったときの大きさです。 縦書きと横書きで計測方向が回転することはありません。

ブロックの進行方向に対するサイズを表す (logical)

6.1 Abstract Dimensionsから引用します。

measure or logical width: A measurement in the inline dimension: refers to the physical width (horizontal dimension) in horizontal writing modes, and to the physical height (vertical dimension) in vertical writing modes. (The term measure derives from its use in typography.)

(measure、logical width: インライン要素の寸法を表す。横書きでは物理的な幅(水平方向の寸法)を指し、縦書きでは物理的な高さ(垂直方向の寸法)を指す。)

extent or logical height: A measurement in the block dimension: refers to the physical height (vertical dimension) in horizontal writing modes, and to the physical width (horizontal dimension) in vertical writing modes.

(extent、logical height: ブロックの寸法を表す。横書きでは物理的な高さ(垂直方向の寸法)を指し、縦書きでは物理的な幅(水平方向の寸法)を指す。)

  • logical width, logical height: 横書きではlogical widthはphysical widthに対応します。縦書きではwidth, heightの関係が入れ替わり、logical widthはphysical heightに相当します。
  • measure, extent: 毎回logicalを付けたりphysicalを付けて区別したりするのはややこしいので、logical widthをmeasure、logical heightをextentと呼ぶように定義されています。行内で文字が進む方向に沿ったサイズがmeasureで、それに垂直な方向への長さをextentと呼びます。横書きでも縦書きでも用語を入れ替えることなく使えます。

各用語の詳細については7 Abstract Box Layoutを参照してください。

余談

上の参照先には、このような面白いことが書いてあります:

  • border-spacingはcolumnsとrowsに対して適用
  • line-heightはheightという言葉が使われているが、extentを指している
  • 背景画像はwriting modeの影響を受けない
  • box-shadowやtext-shadowは、writing modeが変わっても向きは変わらない (縦書きを横書きにしても影の方向は変わらない)

なお、css3-sizingのEditor’s Draftでは、measure/extentはinline-size/block-sizeにリネームされています。

以上で概要を終わります。

次回予告

ここまでが概要となります。 概要だけで長くなってしまいましたが、本編では、概要で触れた行や文字の向きの詳細例とともに、縦横のサイズ計算、文字の回転、縦中横、ベースラインについて展開していきます。