ホームページの縦書きレイアウト

縦書き

（1）はじめに

俳句・短歌・漢詩などは縦書きレイアウトにしたいところ。最新のスタイル技術を使うと、それが比較的簡単に出来るようになりました。以前はセル一つ一つに一個の文字を入れていましたが、そんな面倒な事をしなくてもいい様になりました。ここではそのサンプルとして漢詩を縦書き表示にしてみます。

（2）基礎知識

縦書きにするスタイル名は「writing-mode:tb-rl」です。
t:top、b:bottom、r:right、l:leftの意味ですが、文字は上から下へ行の配置は右から左へと覚え、その英単語の頭文字を当てはめたものと記憶すると覚え易いです。
ちなみに横書きのスタイル名は「writing-mode: lr-tb」ですが、上の説明に当てはめて見ると理解できるかと思います。

alphaEDITには縦書きモードと言う機能が無いので「HTMLソース」に縦書きスタイル名を記述する必要があります。
HTMLソースの<head>　</head>間に
<style type="text/css">  </style>
を挿入します。
※LETTER-SPACING: 6px;は文字間のスペースを標準より少し広くする命令です。

この記述を見てお分かりの様にレイアウトにはテーブルを使っており、TDと言うセルの部分が縦書きにする命令です。これはワードの罫線で「書式／縦書きと横書き」を全てのセルに対して行うのと同じです。個々のセルに対して設定したい場合は個々のセルで設定しなければなりません。
alphaEDITでこう言った形式のスタイル（特定タグの再定義）が出来るのは<BODY>だけです。
<BODY>での設定は次の様に行います。
（a）「ファイル／ページのプロパティ／スタイル設定／ボディ」を選択
（b）この「BODY」に対し次の様に設定します。

設定が終わったらHTMLソースを見てみます。
<style type="text/css">

</style>　となっているはずです。

ここで
BODYをTDに変更
WRITING-MODE: tb-rl;
を「MS 明朝」の後に追加すると出来上がりです。
なお ; は命令の区切りを示す記号です。

（3）レイアウトの実際

次の漢詩を縦書きにして見ましょう。
　

勧酒　　　　　　　晩唐　于武陵
　　　　　　　　　　酒を勧む

勧君金屈巵　　　君に勧む金屈巵
満酌不須辞　　　満酌辞するを須いず
花発多風雨　　　花発けば風雨多し
人生足別離　　　人生別離足る

手順
（a）「テーブル／テーブルの作成」を選択
（b）行の数を１、列の数を１
（c）幅を380pixel、高さを460pixel
（d）横位置を中央
（e）ボーダーサイズを1
にしてOKをクリックします。

（f）セルの中をクリックしたらBackSpaceで空白文字を削除　（g）「テーブル／テーブルの作成」を選択　（h）２行、6列、幅・高さ100％、ボーダーサイズ0でOKをクリック
（i）一番左上のセルをクリック　（j）マウス右クリックしてセルのプロパティを選択　（j）幅を17％、高さを35％、適用範囲を行全体にしてOK　（j）一番左下のセルをクリック　（k）マウス右クリックしてセルのプロパティを選択　（l）幅を17％、高さを65％、適用範囲を行全体にしてOK　（m）HTMLソースを選択

（l）青字の所を16に変更します。
これで100％になりました。
（全部で４箇所あります。）
※全部のセルに対して設定しなくても縦書きレイアウトにする事は可能です。これについては色々やって見ると良いでしょう。

（m）これで形はできました。後は文字入力です。縦方向の余白はスペース（Space）キーで行います。
このファイルをブラウザで開いて見て次の様になればOKです。（ルビを振ることを想定していますので行間が若干大きめになっております。）

ソースはここをクリックして下さい。下に表示されます。（I.E４以上）

上記の手法とはまた違いますが、NHKラジオ第２放送の漢詩テキストと同じレイアウトにしたのが次です。なおルビはalphsEDITの「挿入／その他／ルビ」にあります。
引用： 2002年10月～2003年3月、漢詩への誘い　人生を詠う（閑吟の巻）　188ページ　より

※中国語の部分は高電社のChinaWriter７で書き、画像化したものです。

※この漢詩は井伏鱒二の訳詩でも有名。面白いのは最後の部分を「さよならだけが人生だ」と訳している事です。これについては「さよならだけが人生だ」とか「厄除け詩集　金屈巵」をページ最上部の検索テキストボックス内に貼り付けると「Googleサーチ」で調べられます。

もし時代が2000年以前だったらどうなるか？実は縦書きなんて大変なことでした。次の例は1999年に作った縦書き漢詩です。スタイルを駆使して何とかレイアウトしていますが、今ならもうやる気が起こりません。

ソースはここをクリックして下さい。下に表示されます。（I.E４以上、スクロールバーあり、ルビの所で<BR>を大量に使っていますね。）

HOME>線上電脳塾>HTMLエディタ>AlphaEdit