IE11と縦組み・ルビ・組数字

概要

Microsoft社が、Internet Explorerの開発者向けに情報提供を行っている「IEBlog」によると、2014年6月のInternet Explorer 11（以下IE11）に対するアップデートで、縦組みテキストに対する改良が行われたそうです。
Vertical writing mode improvements in IE11

また、その効果を確認するデモが、IE Test Driveサイトにも設けられています。
Vertical Writing Mode Improvements

これらの情報を頼りに、私もIE11で縦組み、ルビ、そして組数字（縦中横）を実際のサンプルで試してみました。この記事内に、そのサンプルテキストを6つ掲載していますが、これらを期待どおりに表示させるには、当然ながら、2014年6月のアップデートが適用されたIE11が必要です。また、テキストにはWindows 8.1でOSに添付されるようになった、游ゴシック／游明朝フォントを使用しているので、Windows 8.1以降での閲覧を推奨します。

なお、縦組み・ルビ・組数字にFirefoxは全く対応していないので、このブラウザーでは全くお話になりません。

縦組み

まず、縦組みテキストの表示について、検証してみましょう。これは、スタイルシートで実現します。このページでのサンプルは、縦組みテキスト部分をdiv要素で囲み、そこにclass名verticalを付与し、classセレクターで以下のとおりに指定しています。

.vertical {
	width:94%;
	height:680px;
	overflow-x:auto;
	font-size:1.2em;
	margin:1em;
	-ms-writing-mode:tb-rl;
	-webkit-writing-mode:vertical-rl;
	writing-mode:vertical-rl;
}

これらのうち、最後の3行で使用しているwriting-modeが、テキストの組方向を指定するプロパティです。IEとChrome／Opera用には、それぞれベンダー接頭辞を付けたものも併記しています。

writing-modeプロパティで縦組みを指定する値は、現在策定中の仕様（CSS Writing Modes Level 3／勧告候補）ではvertical-rlです。vertical＝垂直で、rlは右から左へ行を送るという意味です。

この値に対してIEは、現状では「tb-rl」という異なる値を使っています。tbはtop-bottomの略で、「上から下へ」という意味です。

実は、writing-mode:tb-rlはIE5（もしくは5.5）から存在していました。IE5では、多数の独自スタイルシートが開発され、その中には、縦組みなどの文字組版に係わるものが多数含まれていました。IE5は、組版スタイルに関しては先進的なブラウザーだったわけです。

そうしたスタイルの一部が、現在W3Cへ提起され、writing-modeも正式な仕様として策定過程にあるのですが、その中で値の表記が変更され、現時点では以下の3つになっています。

• horizontal-tb 横組み（初期値）
• vertical-rl 縦組み／行左送り
• vertical-lr 縦組み／行右送り

ただし、現状のIE 11は、独自の値で指定します。

このプロパティを適用可能な要素は、table要素内の行列構造部分を除く、すべての要素となっています。また、値は継承されます。今回は、div要素に適用することで、その内部にあるh5、h6、p要素の各段落テキストを、一括して縦組みにしています。

このように、縦組み指定自体は、対象となるテキストを囲む親要素に、writing-modeプロパティを使用すればよいので、それほど難しい指定ではありません。考慮しなければならない点は、読みやすさを考えて、縦組みテキストの高さをどの程度に設定するか、といったところでしょう。

ルビ

さて、縦組みが従来からあるものだとしたら、ルビ、すなわち「ふりがな」はどうかというと、こちらはスタイルシートではなくHTMLの要素として定義しますが、やはりIE5以降で独自に対応していました。そして、XHTML1.1では、正式な要素として採用されています。

XHTML1.1では、ルビ（ふりがな）を対象の文字（親字）に対して、次のように記述することになっています。

<ruby><rb>親字</rb><rt>おやじ</rt></ruby>

すなわち、ふりがなを付けたい文字をruby要素で囲み、その中で親字部分をrb要素、ふりがな部分をrt要素として定義するわけです。

ただし、IEは11を含め、rb要素には対応していません。といっても、rbタグ自体は未知の要素として無視されるだけなので、上記の記述でもルビは表示されます。そして、HTML5では、現状ではrb要素を除く形で策定が進んでいます。この場合、ソースコードの記述は以下のとおりになります。

<ruby>親字<rt>おやじ</rt></ruby>

なお、このページのサンプルでは、以下のようにrp要素も追加してあります。

<ruby>親字<rp>（</rp><rt>おやじ</rt><rp>）</rp></ruby>

rp要素の中には、カッコが入れてありますが、これらはruby要素に対応したブラウザーでは表示されません。一方、Firefoxのような非対応ブラウザーでは、親字の後ろにふりがな部分がカッコに入って続くことになります。

まあ、そんなFirefox対策はどうでもよい話で、本題はIE11での縦組み表示の改良です。縦組みも、ルビも、従来から対応しているなら、何が変わったのでしょうか？　それは、縦組み+ルビの表示です。アップデート前までは、縦組みテキストにルビを付けると、行内の文字配置が、ルビのない部分からずれてしまう問題がありました。ルビの付いている部分が、ガタガタになってしまうのです。

これは、ルビの配置の仕方にも、問題があったようです。縦組みだけでなく、横組みのテキストにルビを付けた場合でも、ルビのある行だけ行間が広がってしまうのです。line-heightで指定した行間隔とは別に、ふりがな分の領域が行間に付け加えられる、といった表示になります。そしてline-heightでは、ルビ付きテキストの行間を揃えることはできませんでした。

これに対し、IE11のアップデート版では、行間にふりがなを入れるだけの余裕があれば、ふりがなは行間に収まり、行の間隔が乱れないようになっています。また、それが縦組みテキストでも、きちんと行われています。以下の見本1と見本2では、フォントに游ゴシックと游明朝を使い、line-heightを1.5emに設定しています。

ルビが入っていると、一瞬、錯視によって行間隔が揃っていないように見えるかもしれませんが、上の2つの例では、各行は均等な間隔で並んでいます。

ただし、これらの例をChrome／Operaで表示すると、1.5emの行間隔では均等に並びません。結果を見る限り、どうやら親字とふりがなとの間隔が、ブラウザーによって取り方が微妙に異なるようです。Chrome／Operaのほうが、親字とふりがなとの間が広いため、1.5emでの行間にはふりがなが収まらないのでしょう。

現状では、親字とふりがなとの間隔は、ブラウザー次第で、これを調整するスタイルシートはありません。ですから、こうした制限を念頭に置いて、ruby要素を使う必要があります。

また、ブラウザーの違いだけでなく、フォントの種類によっては、IE11でも結果が変わってきます。以下の見本3は、フォントにメイリオを使い、同じ1.5emの行間を指定したものです。

上の例では、IE11でもふりがなの入っている行が広がってしまい、間隔が均等ではありません。そして、下の見本4aは、敢えて4emと行間を広く取った例ですが、ここではメイリオのふりがなも、きちんと行の間に収まっています。

一方で、下の見本4bでは、line-heightに1emを指定して、行の空きを無くしています。この場合、IE11では、ふりがな分を強制的に空けて、行間隔を調整しています。従来は、こうした処理を、ふりがな分の余裕がある場合も行っていたわけです。

なお、Chrome／Operaでは、行間に空きがないと、ふりがなは前（右）の行と重なってしまいます。まあ、調整の仕方が不十分ということですね。

ここまで見てきたとおり、今回のアップデートによって、IE11では、ふりがなが入る領域を十分に取りさえすれば、ブラウザーはふりがな分を行間に追加するのではなく、行間に収める動作をするようになったのです。

しかし、下の見本5では、Chrome／Operaでは問題なく表示されるものの、IE11ではふりがなが行間の中央に寄ってしまいます。この原因は、rb要素です

IE11では、親字部分をrb要素で囲んでしまうと、なぜか親字とふりがなの間隔が広がってしまいます。そして、先に説明したとおり、現状でこの間隔を調整できるスタイルシートはありません。ですから、IE11では、XHTM1.1仕様で忠実にruby要素を定義するよりも、HTML5でrb要素無しのルビを使ったほうがよいということです。

ただし、それにはちょっとした不安要因があります。2014年6月現在、HTML5の仕様策定状況は、これもなぜか前回2014年4月の「勧告候補」から「最終草案」へ逆戻りしてしまっているのですが、その仕様書の中で、取り止めになる可能性がある機能（at risk）として、「the new ruby model」が挙げられているのです。「新しいruby要素の型」ですから、ruby要素自体が除かれるのではなく、XHTML1.1からの変更を取り止めるということだと私は認識しています。つまり、rb要素無しではなく、それを復活させるということです。

まあ、これはまだ草案レベルでの杞憂にすぎませんが、仮にそうなるのであれば、rb要素があってもふりがなの位置がずれないように、IEには頑張ってもらいましょう。

組数字

最後に、組数字を見ていきましょう。各見本内のh5要素では、「第1巻」の1、「1887年」の1887が、組数字です。これらの数字は半角で記述していますが、縦組みになっています。そして1887は、1文字分の中に4字が縦長に変形されて収まっています。いわゆる、「縦中横」文字です。

同様に、2行目のh6要素では「第8部」の8、「32章」の32が、こちらは2字分で「縦中横」文字になっています。

これらの組数字は、スタイルシートによる指定です。縦組内のh5要素とh6要素には、以下のセレクターで組数字の指定を行っています。

.vertical h5, .vertical h6 {
	-ms-text-combine-horizontal:digits 4;
	text-combine-upright:digits 4;
}

このプロパティも、CSS Writing Modes Level 3で策定中なのですが、2013年11月の最終草案ではtext-combine-horizontalだったプロパティ名が、2014年3月の勧告候補ではtext-combine-uprightに変更されています。IE11は、ひとつ前の仕様をベンダー接頭辞付きで実装しているわけです。とはいえ、他のブラウザーは、今のところ組数字には全く対応していません。ですから、この適用例はIEでのみ、確認できます。

そして、プロパティ値の方には変更はなく、組数字の桁数（digits）を、「digits 数値」という形式で指定する内容になっています。ここでの指定値は4ですから、4桁までを組数字にして、縦中横で配置します。

今回の例では、h5、（2行目の）h6要素に指定しているので、その要素内容のテキストのうち、該当する桁数以下の数字は、すべて組数字+縦中横になります。digits 4を指定すれば、1～4字までの数字が、すべて対象になるのです。そして、指定桁数より少ない場合でも、全角1文字分に合うように、（少なくともIE11では）変形がきちんと調整されます。

まとめ

以上が、ruby要素とCSS Writing Modes Level 3に基づく、IE11の縦組み機能です。まだ、いくつかの問題点はあるものの、これらが縦組みできちんと表示できるように今回のアップデートで改良されたということです。元々、IEは組版機能に長けたブラウザーだったのですが、縦組み時のルビ表示が改善されたことで、縦組み日本語文書をHTMLでも作りやすくなりました。あとは、他のブラウザーのきちんとした対応と、仕様の確定が望まれます。

ルビや組数字付きの縦組みテキストは、日本語以外ではあまり使われないと思いますが、それらにブラウザーの機能やW3Cの仕様が対応してくれることは、少数派の文化的多様性への配慮であると捉えることもできるでしょう。もちろん、だからといって日本文化を特別扱いで神聖視するような民族主義的・排外主義的立場を、私は認めたりはしません。「美しい国」を作るというきれいごとを言って好戦的自衛権の”憲法解釈”を狙うような輩には、日本語の多様性も、嘘の隠れ蓑に使うことぐらいしかできないでしょう。

なお、縦組みのサンプルとして使用したテキストは、Marx & Engels Internet Archiveに掲載されていた英語版『資本論』の一部を、私が翻訳したものです。