１．概要 ホームページのテキストは普通「横書き」で表示されている しかし、俳句、短歌等はむしろ縦書きにした方が良い場合が多い ここでは、　JavaScript　を使用してテキストを縦書きに表示する方法を解説します ２．一文字づつ縦書きにする関数 基本的なソースは図１のとおりです --< 図１ 　tategaki.js >-- ダウンロード　 引数のテキスト(txt)を、charAt 関数を使用して、１文字ずつ取り出します "っぁぅぇぉゃゅょッァゥェォャュョ「」、。。・ー" 　　　(全角小文字及び記号)　 の中に取り出した１文字(tx)が含まれていれば、文字の位置つまり po>=0 となり、含まれていなければ　po=-1　を返します ■　縦書きの指定 po>=0    :    <TD style='writing-mode:tb-rl' align='center'> ■　普通の指定 po=-1    :    <TD align='center'> とします ただし、ＩＥ 5.5 、6.0以外では、不自然に表示されます ■　サンプル　　左側が正常な表示、右側が不自然な表示 --< 図２ 　data.js >-- //------------------ 縦書きするテキスト ------------------- var txt_dat=new Array( "複数行の　テキストを", "配列変数に　設定します", "テキストの　文字数は適宜とします", "", "歌詞等の　節に分かれるテキストは", "節と節の間に　ヌルのデータを挿入します", "この間隔は　任意に設定できます。", "", "ニュース、しょせん、等の　全角小文字も", "「せいじょうに　ひょうじ」　されます", "ただし、ＩＥのみです", "", "　行頭は全角のスペースで調整します", "俳句、短歌等は　適当に", "スペースで調整します", "" ) ■　サンプル ソースをご覧下さい サンプルではテキスト等は外部ファイルとして読み込んでいます 内容は図１、図２　参照 <SCRIPT type="text/javascript" src="tategaki.js"></script>　　　図１ <SCRIPT type="text/javascript" src="data.js"></script>          図２ 変数は下記のように設定してあります var moji_size="100%" ; //-- 文字の大きさ var moji_col="#ffffff" ;//--文字の色 var spc = 30 ; //-- 節と節のスペース サンプルページで自由に変更してみてください 特に文字サイズは「%」で指定すると、ツールの「サイズ」で自由に変更できます なお、節と節の間隔はページを縮小しても変化しないように、1x1ピクセルの透明画像を 使用しています 画像の幅を　spc 　で設定します --< 図３　　透明画像 >-- bb +="<td>" bb+="<IMG src='00_space.gif' width='" + spc + "'>" ; //-- 1x1ピクセルの透明画像 bb +="</td>" ３．様々な表示方法 こんな表示にも活用できます ■　サンプル　　　写真をセルの背景として、その上にテキストを縦書きで表示 ■　サンプル　　　スタイルシートを使って、写真の任意の位置にテキストを縦書きで表示する ４．まとめ いかがでしょうか ほとんどが横書きで表示されている中で、たまには縦書きで表示してみるのも よいかもしれません ただ、あまり縦書きの文字数を多くしないことです どうぞ、活用してみてください 2005/07/15　修正