縦書きのメッセージ
これまで日本語のホームページで縦書きの文章を表示したいと思われたかたはおられませんか？ 一部の雑誌を除く日本の新聞や書籍のほとんどが縦書きなのに対し、インターネットの場合は横書きしか駄目だと諦めているかたが少なからずおられるはずです。しかし、諦めるのは少し早すぎます。Microsoft社のインターネット･エクスプローラ(以下｢ＩＥ｣と略す)なら、｢スタイルシート(ＣＳＳ)｣機能で縦書きの表示が可能です。たとえば、今月の｢最新情報｣でご紹介している記事｢ウーメン･イン･ハリウッド｣の内容を縦書きで表示すると、
この実例では、わかりやすいよう背景と文字の色を逆転してありますが、文章の内容自体はまったく変わりません。ただし、同じＩＥでもマック用か、ネットスケープなどＩＥ以外の閲覧ソフト(ブラウザ)だと縦書きをサポートしていないため、WindowsのＩＥが次の左図(例１)のような縦書き表示となるのに対して右図(例２)のような横書き表示となります(それぞれ50パーセントの縮小画像)。
例１： WindowsのＩＥで表示した場合
例２： それ以外の閲覧ソフト(ブラウザ)で表示した場合WindowsのＩＥで縦書き表示するためのスクリプトそのものは驚くほど簡単で、上記の実例だと本文｢今年も･･････きました。｣の前後へ以下のように<div>タグを書き込むだけです。
<div id="news" style="font-size:10pt;width:500;height:300;padding:30;background-color:#000000;
color:#ffffff;text-align:left;writing-mode:tb-rl;line-height:1.6em;">
今年も･･････きました。</div>
上記のスクリプトで重要なのが｢writing-mode｣で、その｢tb-rl｣という設定は文章を上(top)から下(bottom)へ、そして右(right)から左(left)へ表示することを意味しています。これが、もし｢tb-lr｣という設定なら、同じ縦書きでも左から右方向に表示され、｢tb-rl｣という設定なら、文章は左下から縦に右上へと表示されるわけです。また、writing-mode:tb-rlの記述を省略すれば初期設定(ディフォルト)の｢lr-tb｣が自動的に選択されます。
それ以外の属性をどう設定するかは自由です。上記のスクリプトで｢id｣の指定が何であれ、機能自体へ影響しません。また、｢font-size(フォントのサイズ指定)｣、｢padding(文章周辺の間隔)｣、｢background-color(背景色)｣、｢color(フォントの色)｣、｢line-height(行間)｣などは自由に設定しても構いませんが、｢text-align｣は｢left(左揃え、つまり縦書きだと上揃え)｣でないとおかしくなってしまう他、｢width｣と｢height｣の設定が微妙ですから注意して下さい。
たとえば、上記の実例をWindowsのＩＥで見る読者(クライアント)を対象にする場合は｢height｣の設定が｢300｣であれば｢width｣は設定する必要がありません。なぜならば、縦書きなので高さを指定することで幅は自動的に決まります。ところが、縦書きをサポートしていない他の閲覧ソフト(ブラウザ)で表示すると横書きとなるため、横幅を指定しておかない限り表示画面の幅一杯まで広がって表示されるため、先の例２でなく次の例３のようになってしまうのです。
例３： 横幅を指定しない場合縦横の数値(｢height｣と｢width｣)は中身次第ですから、フォントのサイズや行間などを決めてから、じっさいに文章(コンテンツ)をＩＥや他の閲覧ソフト(ブラウザ)で表示し、比較検討しながら決めるしかないでしょう。もっとも、インターネットを利用する読者(クライアント)の90パーセント以上がＩＥを使っている現状を鑑(かんが)みて、あとは無視するというのも１つの手です。しかし、自分のホームページへ愛着があるかたなら、やはりそのあたりには拘ってほしいものですね！
|
お断り