白砂博物館図書室

Webにおける縦書表示について

　このコーナーに出させて頂いた２本のＳＳ「可憐編」「花穂編」は、お気づきの方も多いと思いますが、『シスタープリンセス　キャラクターコレクション』（作・公野櫻子様／イラスト・天広直人様／メディアワークス刊・全12巻）の文体を真似たものです。ＳＳはまだ慣れていないので、公野様には申し訳ないのですが、キャラコレには妙に惹かれるものがあったので、そのまま真似てしまいました。一編の長さはキャラコレの半分程度になっています。
　文体を真似ている以上、表記もキャラコレに倣（なら）って、縦書にしてみようと思いました。そもそも日本語の文字は、左から右に読むより上から下に読む方が読みやすいような形になっています。「日本語のWebページを縦書きで表示させたい」と思っている人は、たくさんいるはずです。
　実際、今までにHTMLを縦書表示させる方法がいろいろと試みられてきたようです。例えば、 <PRE> タグを用いて等幅フォントで表示させるという方法があります。これは確かに見た目だけは縦書表示になるのですが、大きな欠点が２点あるのです（以下は <PRE> タグを用いた例）。


な　、　（　さ　縦　こ
る　。　　　れ　書　う
の　は　）　る　で　す
か　ど　や　け　表　れ
な　う　　　ど　示　ば

　まず、コピー・ペーストができないこと。見た目は縦書でも、実際には横書を縦書のように見せているに過ぎないので、コピー・ペーストしようとしても、左右方向にしか範囲選択できないのです。次に、文字の向きが変わらないこと。（　）や『　』などの括弧（かっこ）や句読点は、縦書と横書では表記が異なります。
　これらの欠点を解決するには、縦書スタイルシートを使用する方法があります。現在、スタイルシートの標準はCSS-2という規格なのですが、縦書スタイルシートはCSS-3という規格に基づくものでして、現段階では試験的と言えます。CSS-3に対応しているブラウザは、現在のところ Internet Explorer 5.5 以上のみで、Netscape等、他のブラウザは対応していません。しかし現在、 Internet Explorer の5.5以上のバージョンは、最も広く普及しているブラウザであり、また、縦書スタイルシートに対応していないブラウザを使っても、横書になるだけで正常に閲覧できるので、このコーナーで使用しても特に問題ないと判断しました。

　尚、縦書スタイルシートは、次のようにして用います。


<HTML>
<HEAD>
<TITLE>縦書の見本</TITLE>
</HEAD>
<BODY bgcolor="#ffffff">
<P style="writing-mode: tb-rl">
この部分の文字はIE5.5では縦書きになります。<BR>
Netscapeで閲覧すると横書のままです。<BR>
半角英数字は横書のままになります。<BR>
</P>
</BODY>
</HTML>

　「tb-rl」は、「上→下－右→左」を示します。
　また、縦書スタイルシートは、漢字・かな等の２バイト文字にのみ有効で、半角文字は横書表示になります（そもそもこのスタイルシートは、インターネットが全世界に普及してきたことに伴い、２バイト文字による縦書を多用する東アジア言語向けに提唱されたものなのだそうです）。
　このようにすれば、「この部分は」～「なります。」の部分が縦書で表示されます（「IE5.5」「Netscape」は横書）。
　縦書スタイルは、文字に修飾や特殊な意味を与えるインライン要素のタグ（ <A> や <FONT> など）には組み込めず、ブロック要素のタグ（ <P> や <DIV> など）に組み込んで使います。
　IE5.5以外のブラウザでは横書表示になります。ただ、今後、CSS-3がスタイルシートの標準になったら、他のブラウザでも採用される可能性があります。

参考：
マイクロソフト・MSDN Online「Internet Explorer 5.5 における縦書きレイアウトの使用」
http://www.microsoft.com/japan/developer/workshop/author/css/verticaltext/verticaltext.asp

戻る