二 スタイルシートによる縦書き表示
ここではCascading Style Sheets, level 3（CSS3）のwriting-mode属性を用いたスタイル情報設定によって縦書きレイアウトを実現する方法を解説します。ただしCSS3は2003年8月現在依然として策定中でありまだW3Cの勧告としては出されていないので、このwriting-mode属性に対応しているブラウザも限られています。たとえばInternet Explorer（IE）はバージョン5.5からこれに対応していますが、Netscape 7.0は対応していません。したがってここで解説する内容はIE 5.5以降の使用を前提としたものとなります。IEの5.5より前のバージョンやその他のブラウザなど今このページが縦書きで表示されていないブラウザでは、このページで示されているサンプルも解説とはまったく異なった表示がなされることをあらかじめご理解ください。
なお、以下の説明を十分に理解するにはHTMLとCSSに関する基本的な知識が必要かと思います。HTMLやCSSを解説したサイトは数多くありますが、筆者は初めにZSPCのZSPC：SUPER HTML4.0 REFERENCEとSuper Style Sheets ReferenceでHTMLおよびCSSの基礎を覚えました。最近ではHTML 4.01 Specification (ja)やCascading Style Sheets, Level 2などW3Cの仕様書およびその日本語訳を参照するようにしています。ZSPCのページは記述内容は多少古くなっていますが、HTMLやCSSの基本的なことを知るには十分ではないかと思います。（2003/02/23この段落追加）
１ 基本
writing-mode属性は、テキストの行内および行から行への進行方向を規定するものです。W3Cの勧告候補は、その値としてlr-tb（左から右、上から下）、rl-tb（右から左、上から下）、tb-rl（上から下、右から左）、tb-lr（上から下、左から右）、bt-rl（下から上、右から左）、bt-lr（下から上、左から右）、lr、rl、tbを挙げ、かつこの属性はすべての要素に適用されるとしています。ところがマイクロソフトのInternet Explorer 5.5 における縦書きレイアウトの使用（MSDN）の説明は、W3Cの草案とかなり食い違います。マイクロソフトのこのページは、writing-mode属性の値はlr-tbとtb-rlの二つであるとし、かつbody要素には適用できないとしています。詳しい事情はわかりませんが、現在writing-mode属性に対応しているブラウザはIEしかないわけですから、このマイクロソフトの説明に従って文書を作成するしかありません。
* * *
日本語の縦書きレイアウトは、先に挙げたwriting-mode属性の値のうちtb-rlを指定することによって実現されます。しかしこのwriting-mode属性はbody要素には適用できないわけですから、ページ全体を縦書きにするには、そのページの本文全体を一つのdiv要素で括り、そのwriting-mode属性にtb-rlを指定する必要があります。
例 1-1
<html>
<body>
<div style="writing-mode:tb-rl; width:50cm">
（本文）
</div>
</body>
</html>
まずは、単に本文を記述するdiv要素にwriting-mode:tb-rlと指定しただけの例を例１-１に示します。
サンプルには何も表示されていないように見えますが、画面下に現れた水平スクロールバーを使って画面の一番右までスクロールしてみてください。縦書きの本文が現れるはずです。
このようにdiv要素にwriting-mode:tb-rlと指定しただけでは、たしかに縦書きにはなりますが最初はページの左端が表示されるので、長いページの場合にはページの先頭（右端）を見るために右にスクロールしなくてはなりません（ここでは横に長いページを作り出すためにあえてdiv要素にwidth:50cmと指定してあります。実際にはこのように指定する必要はありません）。これは、単にdiv要素のwriting-mode属性にtb-rlを指定しただけでは、ブラウザが最初に表示するページの原点が通常の左上隅のままだからです。
* * *
例 1-2
<html>
<body style="direction:rtl">
<div style="writing-mode:tb-rl; width:50cm">
（本文）
</div>
</body>
</html>
それではページの原点を右上隅にし最初からページの先頭（右端）が表示されるように、例１-２のようにbody要素にdirection:rtl（右から左）を指定するとどうなるでしょうか。
今度は最初にページの先頭が表示されるようになりましたが、よく見ると本文が下詰めになっています。これではいけません。
* * *
例 1-3
<html>
<body style="direction:rtl">
<div style="direction:ltr; writing-mode:tb-rl;
width:50cm">
（本文）
</div>
</body>
</html>
これを修正するためには、例１-３のようにdiv要素にbody要素とは逆のdirection:ltr（左から右）の指定を追加します。
これで最初にページ右端の先頭が表示され、本文が上から下、右から左へと流れる正しい縦書きで表示されるようになりました。
縦書きレイアウトの中に横書きの部分をつくる
例 1-4
<html>
<body style="direction:rtl">
<div style="direction:ltr; writing-mode:tb-rl">
（この部分は縦書き）
<div style="writing-mode:lr-tb">
（この部分のみ横書き）
</div>
（再び縦書き）
</div>
</body>
</html>
すでに気付かれた方もあると思いますが、このページは全体は縦書きですが、具体的な記述の例を示した部分は横書きになっています。このように縦書きの中に横書きの部分をつくるには、例１-４のように横書きにしたい部分にwriting-mode:lr-tb（左から右、上から下）と指定します。
* * *
なお、ここでは便宜上スタイル情報をbody要素やdiv要素の属性としてそれらの要素内に直接記述する形式を用いましたが、もちろんstyle要素を用いてヘッダ内に記述することもできますし、外部スタイルシートを用いることもできます。
２ 垂直スクロールバーについて
縦書きレイアウトにするための基本は以上に述べたとおりですが、しかしこのままでは（筆者にはなぜだか理由はわかりませんが）本文が長くなってくると画面左端に垂直スクロールバーが現れるという不都合が生じます。
サンプル２-１を表示（ファイルは青空文庫からダウンロードしたものをもとにしています）
このサンプルは余白やフォント、行間の設定を全くしていないのでかなり見づらいですが、ここでは特に左端の垂直スクロールバーを見てください。このスクロールバーは本来なくてもいいものです。これが現れないようにするにはbody要素にoverflow-x:scrollと指定します（overflow:scrollと指定してもIEにおける表示は同じになりますが、Netscapeなど縦書きレイアウトに対応していないブラウザで表示させた場合、これだと不要な縦のスクロールバーが現れてしまいます）。なおこのoverflow-x属性および次に使用するoverflow-y属性はW3Cの草案CSS3 module: The box modelに示されているだけで、まだ正式に採用されたものではありません。
これで垂直スクロールバーが現れなくなりましたが、しかしスクロールバーを表示するためのスペースがまだ残っています。これを消すにはbody要素にさらにoverflow-y:autoと指定します。
これで垂直スクロールバーのためのスペースも消えました。
IE6.0における文書型宣言と垂直スクロールバーの関係
これまで示したサンプルではHTML文書の文書型宣言を行っていませんでしたが、正しいHTML文書とするには文書冒頭での文書型宣言が必要です。しかし先に示したサンプル２-３で、たとえば
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
と宣言を行なうと、消したはずの垂直スクロールバーがIE6.0では再び表示されてしまいます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
や、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
と宣言した場合も同様です。
ところが、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
と宣言すると垂直スクロールバーは現れません。
これは、IE6.0以降では文書型宣言が前３者などの場合にはIEの標準準拠モードがオンになり、後者や文書型宣言がない場合などにはオフになることが関係しています。IE6.0以降で表示する場合で、前３者の文書型宣言のように標準準拠モードをオンにしても垂直スクロールバーが現れないようにするには、サンプル２-３で指定したoverflow-x:scroll; overflow-y:autoをbody要素ではなくhtml要素に指定する必要があります。詳しくはInternet Explorer 6 における CSS の拡張（MSDN）を参照してください。
３ フォント
フォントは、スタイルシートを用いてＭＳ 明朝（予備としてserif）やＭＳ ゴシック（予備としてmonospace）などを指定しておくときれいに表示されるようです。なお縦書きだからといって＠ＭＳ ゴシックなど縦書き用のフォントを指定する必要はありません。このようなフォントを指定すると、Netscapeなど縦書きレイアウトに対応していないブラウザでは、文字が横に寝て表示されてしまいます。
サンプル３を表示（font-family:"ＭＳ 明朝",serifと指定）
４ 行間
行間を指定するのは、横書きの場合と同じline-height属性です。line-heightは直訳すれば「行の高さ」ですが、縦書きの場合には「行の幅」を意味します。
サンプル４を表示（line-height:2と指定）
* * *
このようにスタイルを指定することによって、２ 垂直スクロールバーについての項の最初で示したサンプルがかなり見やすくなりました。余白などを指定するとさらに見やすくなるかと思いますが、これは横書きレイアウトの場合と基本的に同じですから、好みに応じて指定してください。
５ 水平方向と垂直方向
縦書きレイアウトにおいては、スタイルシートで水平方向の位置関係を指定したものが、実際には垂直方向の位置関係に置き換えられて表示される場合があります。
たとえば、このページのところどころで用いた「* * *」は縦書きレイアウトでは垂直方向のちょうど中心に表示されていますが、これはスタイルシートでvertical-align:middleと指定したのではなく、text-align:centerと指定したものです。また具体的な記述例を示した部分は、それ自体がページの上部に表示されその下にテキストが回り込んでいますが、この部分にはfloat:leftと指定してあります。
６ 全角の記号の向き
英文などに用いられる半角文字は縦書きレイアウトにおいては向きが90度変わって横向きになってしまいますが、漢字や平仮名、片仮名など日本語で使用する全角文字のほとんどは当然ですが上下左右の向きが変わりません。しかし括弧などの引用符号やその他の記号は、その役割の性質上ほとんどの場合向きが変わります。注意が必要なのは、これらの記号の中で向きが変わらないものがあることです。
＊なお以下に示した表は、Netscape 7.0やOpera 6.05など縦書きレイアウトに対応していないブラウザでは、縦書きの部分も横書きで表示されます。
引用符号のほとんどは、その向きが変わることによって縦書きレイアウトにおいても適切にその役割を表現します。
| 縦書き | 横書き |
|---|---|
| 「語句」 | 「語句」 |
| 『語句』 | 『語句』 |
| （語句） | （語句） |
| 《語句》 | 《語句》 |
| 【語句】 | 【語句】 |
これ以外に〔語句〕や〈語句〉、［語句］、｛語句｝なども同様です。
しかし中には向きが変わらず、そのため縦書きレイアウトにすると不自然な表記になってしまうものもあります。
| 縦書き | 横書き |
|---|---|
| “語句” | “語句” |
| ‘語句’ | ‘語句’ |
| ≪語句≫ | ≪語句≫ |
| ＜語句＞ | ＜語句＞ |
引用符号以外の記号のほとんども向きが変わります。多くの場合向きが変わることによって縦書きの文中で自然な表記となるのですが、矢印を使用する場合には多少注意が必要になります。
| 縦書き | 横書き |
|---|---|
| ＝ | ＝ |
| ― | ― |
| ‐ | ‐ |
| ￣ | ￣ |
| 〜 | 〜 |
| ｜ | ｜ |
| ＿ | ＿ |
| ↑ | ↑ |
| ↓ | ↓ |
| → | → |
| ← | ← |
なお、次の記号は向きが変わりません。
| 縦書き | 横書き |
|---|---|
| − | − |
７ ページスクロール
たとえば先に示したサンプル４などをIEで縦書き表示させた場合、キーボードの Home、End、PgUp、PgDn の各キーや上下の矢印キーが（少なくとも筆者の使用するThinkPad X22では）全く機能しません。左右の矢印キーは有効ですがそれでも少しずつじりじりと動くだけです。ですからこれらのページで画面をスクロールさせるには、直接スクロールバーを操作しなくてはなりません。
しかしこのマニュアルのページを含めこのサイトの主なページでは、最初にテキストの書かれている部分をどこでもいいから一回クリックしておくと、Home、End、PgUp、PgDn および上下の矢印キーで水平方向のスクロールが可能です（ただし左右の矢印キーは機能しません）。これは、ページをヘッダ部（ページ上部の余白部分）とボディ部（本文が書かれている部分）に分けたことによるものです。結果として通常の横書きレイアウトとほぼ同等のスクロール性が得られています。
ただし、このサイトを横書きで表示するNetscape7.0では、ヘッダ部とボディ部に分けられていないページでは普通どおりのキー操作によるスクロールが可能であるのに対して、ヘッダ部とボディ部に分けたページではスクロールに関連するキーが全く機能しないというIE6.0の縦書き表示とは正反対の状況となります。
なおOpera6.05もNetscape同様に横書きでしか表示できませんが、しかしスクロールに関するこれらのキーはいずれの場合でも普通どおりに働きます。
８ 問題点
筆者がWindows版IE6.0を用いて縦書きレイアウトを試してみた限りですが、IE6.0の縦書き表示には次のような問題点があることが現在確認できています。
- １ 基本の項で示したサンプルのように、本文が短いと一行が十文字程度で折り返されてしまう（この問題はheightを指定することで回避が可能）。
- ページ内のアンカーへジャンプする場合に、ジャンプ先が画面左端に表示され、本来表示されるべきジャンプ先以降の部分が表示されない（同一ページ内の移動で、ジャンプ先がジャンプ元より前（＝右）にある場合には、ジャンプ先は正しく画面右端に表示される）。
※このサイトでは、ヘッダ部とボディ部を分けることによって結果的にこの問題が回避されています。 - 同一ページ内のアンカーにジャンプした後、ツールバーの［戻る］ボタンをクリックしてもジャンプ前に表示された画面には戻れない。
* * *
参考サイト
- Internet Explorer 5.5 における縦書きレイアウトの使用（MSDN）
- CSS3 Text Module（W3C勧告候補・英語）
- CSS3のモジュール:テキスト（前者旧バージョンの日本語訳）
- CSS3 module: The box model（W3C草案・英語）
- Internet Explorer 6 における CSS の拡張（MSDN）