縦書きレイアウトはW3CではCSS3としてサポートをしていますが、ブラウザとしてはInternetExplorer5.5でのサポートが初ということになりました。
このことは私たち日本人にとってはとても興味深く、そして重要な出来事であるといえます。
これまでWeb制作者はこの縦書きレイアウトを行うためにビットマップ画像の作成から、非常に幅の狭い表のセルまであらゆることを試してきましたが、どれも満足できるものではありませんでした。
ここでは縦書きレイアウトの基本的な概要と、それによって起こるであろう留意点を紹介します。
Writing-mode属性
縦書きレイアウトを使用するためにはwriting-mode属性に"tb-rl"の値を適用します。
writing-mode属性には2つの値があります。
- tb-rl： Top〜Bottom - Right〜Left
- lr-tb： Left〜Right - Top〜Bottom
出力モードの属性には二つの値があり、上下左右それぞれの頭文字を取った物から成っています。
<DIV style="writing-mode:tb-rl">
出力モードの属性には二つの値があり、上下左右それぞれの頭文字を取った物から成っています。
</DIV>
↑ Back to Top
日本語以外の文字の表示
縦書きレイアウトが適用されているスクリプト内では、縦書きの活版印刷の伝統に従い、東アジアの文字は直立した向きになり、
ラテン語を含むその他のすべての文字は、縦書きレイアウトでは時計回りに90度回転され横向きに表示されます。
<DIV style="writing-mode:tb-rl">
日本語。<br>
English.
</DIV>
↑ Back to Top
どう活用していくか
縦書きレイアウトで生まれるまったく新しい外観
HTML文書は元々、横書きのレイアウトを前提に設計されてきました。ですから、実際に従来の文書に縦書きレイアウトを組み込んでみると多少なりともそこには違和感が発生します。
しかし、それは縦書きレイアウトを前提としたスタイルを確立すればよいのであって、大きな障害ではありません。そして何よりも、この機能を使うことによって単に日本語を縦方向に表示するだけではなく、今までは絶対位置のみでしか不可能だった縦方向へのレイアウトが可能となったということのほうが重要だと考えます。
縦書きレイアウトを使うことによって、Webデザイナーはまったく新しい外観を実現する事が可能となります。ここM-WORLDでも、一日も早くこの機能を前提としたレイアウトの実例を取り入れたいと考えています。…が、横書きレイアウトですら満足にデザインできない私ですから、まだまだ試行錯誤を繰り返しているのが実状です。
↑ Back to Top