Internet Explorer 5.5 における縦書きレイアウトの使用
Mark Grinols
Microsoft Corporation
October 2000
日本語版最終更新日 2000 年 11 月 2 日
概要: Microsoft Internet Explorer 5.5 の主要な新機能の 1 つは縦書きレイアウトです。この記事では、縦書きレイアウトの基本的な概念を調べ、いくつかの共通的な間違いを防ぐ手助けをします。
注: この記事の例には、Internet Explorer 5.5 以降と日本語版 OS または日本語の文字を表示する言語パックが必要になります。
縦書きレイアウトとは
たとえば、このページのような大部分の Web ページを見てみると、段落内のテキストは左から始まり右方向に表示されます。テキストが右端までくるとワードラップされ、新しい行は直前の行の下でページの左端から始まります。これはとても自然な形式なので、そのことに注目することもありません。
世界中の多くの国では、このことがまったく自然な形式ではありません。日本や中国の本や雑誌を手にとってみると、テキストが縦方向にレイアウトされて印刷されているのが一般的であることがわかります。テキストはページの右上隅から始まり、テキストが下端までくるとワードラップされ、新しい行は直前の行の左側でページの上端から始まります。たとえば、新聞の見出しは、ページの右端で上から下に向かって印刷されています。道路標識やラブレター、およびテキストが記述されたその他の多く形式は同様にこの方法でレイアウトされます。Web ページだけが例外なのです。HTML はこの形式のレイアウトを処理できません。しかし、Web制作者は、これまでこの縦書きレイアウト表示を行うためにビットマップ画像の作成から、非常に幅の狭い表のセルまであらゆることを試してきましたが、どれも満足できるものではありませんでした。
Writing-mode 属性
Microsoft(R)Internet Explorer 5.5 では、writing-mode (現在 CSS 3 と呼ばれる CSS 属性を使用して、縦書きレイアウトがサポートされています。以下の例では、英語のコンテンツと 日本語のコンテンツの両方を使用して横書きスタイルと縦書きスタイルを比較しています。この例をご覧になってから、詳しい内容にお進みください。
writing-mode 属性には次の 2 つの値があります。
- tb-rl
- lr-tb
Tb-rl は "上 (T) から下 (b)、右 (r) から左 (l)" を意味し、このスタイルが適用される要素内のコンテンツが流れる (表示される) 方法を説明しています。同様に Lr-tb は、"左 (L) から右 (r)、上 (t) から下 (b)" を表し、これはすべてのテキストが表示される既定の流れです。このスタイルは英語に慣れ親しんでいる読者を対象とした、一般的な横方向への流れです。その他のすべての CSS 属性と同様に、これらの値はインラインで、外部 CSS ファイルを使用して、またはオブジェクト モデル (style.writingMode) を通じて指定できます。
東アジアの言語に対応するために縦書きレイアウトをサポートするようになりましたが、ほかのすべての言語にも縦方向へのテキストの流れを指定できることに注意してください。縦方向への流れの中で、個別の文字の向きは言語または文字が含まれるスクリプトによって異なります。縦書きの活版印刷の伝統に従い、東アジアのスクリプト内の文字は直立した向きになります。ラテン語を含むその他のすべての文字は、縦書きレイアウトでは時計回りに 90 度回転され横向きに表示されます。
適用可能な要素
writing-mode を適用できる要素の一覧は、MSDN Online Web Workshop 内のドキュメント にあります。ただし、この一覧には BODY 要素が含まれていません。つまり、BODY 要素は、内部に縦書きレイアウトを持つ要素が含まれていても、常に水平にレイアウトされることを意味しています。以下の例が示すように、こういったレイアウトの組み合わせで表示される規則を予測するのが困難な場合があります。
<HTML> <BODY> <DIV style="writing-mode:tb-rl; width:50cm"> This is a sentence in a DIV element with vertical layout. </DIV> </BODY> <HTML>
Internet Explorer 5.5 でこのマークアップを表示すると、最初はテキストが何も表示されず、水平スクロール バーが表示されているのがわかります。このスクロール バーを使って、ページを右端までスクロールするとテキストを表示できます。なぜ、このようなことが起こるのでしょうか ?
BODY要素は常に水平方向にレイアウトされ、ブラウザは常にマークアップ内の最上位要素の原点をビューポートの開始点として整列します。上記の例では、この原点がページの左上隅になります。読み込んだページにテキストが表示されるようにするには、ページ本体を右にスクロールする必要があります。これを回避するには、BODY 要素の direction プロパティを RTL (右から左) に設定し、グローバルな DIV 要素の direction プロパティを LTR (左から右) に戻します。この結果、原点は右上隅になります。
<HTML> <BODY style="direction:rtl"> <DIV style="direction:ltr; writing-mode:tb-rl; width:50cm"> This is a vertical sentence. </DIV> </BODY> </HTML>
その他の CSS 属性との相互作用
多くの CSS 属性が top、bottom、left、および right などの方向や位置に関係する可能性のある値を持っています。縦書きレイアウトではこれらの値はどのように解釈されるのでしょうか。一般的に、方向や位置に関係する CSS プロパティは、絶対値として解釈されます。つまり、スタイルの暗黙的または明示的な方向性は縦書きレイアウトでも変更されず、物理的に解釈されます。一例として border-left 属性を考えてみましょう。縦書きレイアウトでは、border-left は要素の左端に境界線を描画することを意味します。これは絶対的な位置になるので、縦書きレイアウトであるからといって、border-left が border-top になるわけではありません。
ただし、一部の CSS 属性には相対的に解釈されるものもあります。つまり、上記のように絶対的に解釈されのではなく、論理的に解釈されます。こういう属性の例に line-height 属性 があります。この属性は横書きレイアウトの場合は行の高さを制御し、縦書きレイアウトでは行の幅を制御します。つまり、line-height 属性は、ベースラインに対して垂直方向に行のサイズを制御します。このため、プロパティを絶対的に解釈する意味がありません。World Wide Web Consortium (W3C) は、このように論理的に解釈される CSS プロパティの一覧 を提供しています。
コンテナの性質と継承
writing-mode 属性が要素自体の位置ではなく、要素のコンテンツをレイアウトする方法を決定することを覚えておくことが重要です。要素が writing-mode に対して値 tb-rl を持っているときは、要素のコンテンツ全体が縦書きレイアウトになります。つまり、この時点では継承の制限事項や横書きレイアウトに設定されている子要素の設定は無視されます。この場合、テキストや子要素は上から下、右から左に表示されます。
writing-mode 属性の継承は一定ではありません。一部の要素はこの属性をまったく継承しません。その他の要素は writing-mode 属性をその子要素に渡しますが、子要素自身ではその属性を使用しません。このことは writing-mode のリファレンス ページ に記載されています。"Applies To" リストの任意の要素上にマウス ポインタを移動すると、その要素に継承制限が適用されるかどうかが表示されます。継承が制限される例としては、Web Workshop リファレンスの BUTTON 要素を参照してください。
要素の高さ
横書きレイアウトで特にサイズを指定していない場合、ブロック要素は、親要素の幅から余白、境界線、およびパディングを差し引いた幅と同じになります。要素の高さはコンテンツの量に基づいて調整されます。つまり、ワードラップされるテキスト行が多いほど要素は高くなります。縦書きレイアウトを持つ親では、縦書き要素も同じように機能します。ブロック要素は、親要素の高さから余白、境界線、およびパディングを差し引いた高さと同じになります。
横書きレイアウトを持つ親での縦書き要素の動作を考えると、要素の高さは扱いにくいものになります。BODY 要素が常に水平方向にレイアウトされるので、この扱いにくい動作が一般的な状況になることを覚えておいてください。横書きレイアウトの親の高さは可変です。親のコンテンツに基づいて高くなったり、低くなったりします。親要素の高さから、子要素の高さを決定する方法はよいソリューションではありません。代わりに、最適な高さを決定するために計算を実行します。この計算は、文字のサイズ (先頭文字が基準) やテキスト内の最長の単語など、多くの変数に基づいて実行されます。縦書きレイアウトの子要素の最小の高さは通常約 10 文字分の高さです。
英語のサンプルを表示します。
日本語のサンプルを表示します。
もちろん、この複雑さの大部分を回避でき、マークアップ内で高さ、幅、および位置を指定することによって、よりよい制御が可能です。
プラットフォームの制限
オペレーティング システムの制限により、一部の構成では東アジアの文字を正しく縦方向に表示できないことがあります。Microsoft Windows(R) 2000 ではこの制限が取り除かれていますが、Microsoft Windows NT(R) 4.0 や Windows 9x システムでは、これらの文字が正しく表示されることを確認するために、東アジアの言語にローカライズされたバージョンのオペレーティング システムが必要になります。
まとめ
Internet Explorer 5.5 に縦書きレイアウトを実装することは、世界中の人々にWorld Wide Web をより役立つものにする過程での重要で画期的な出来事です。縦書きレイアウトは、従来公開していたフォーマットのよりよいエミュレーションを意味するのか、まったく新しい外観を産み出そうとするかにかかわらず、東アジアのコンテンツの Web デザイナにとってまったく新しい種類の表現を可能にします。ほかのすべてのことと同様に、縦書きレイアウトを学習する最善の方法はそれを使ってみることです。一度理解すれば、あとはそれを応用して、作業に取り入れるだけです。
