【jQueryのプラグインを作ろう！】

第12回「縦書きにしよう」
＊これはascii.jpで連載した記事の続きです。このため、このページを読む前にあらかじめascii.jpで連載した記事をお読み下さい。

text : 古籏一浩

■横書きでも縦書きでもOKな日本語

　日本語は他の言語と違って横書きでも縦書きでもOKです。クロスワードパズルなどは非常に便利な言語です。この縦書き機能ですが、IE以外のブラウザでは標準でサポートされていません。そこで、今回は文字を縦書きにするプラグインを作成してみましょう。

■純粋にテキストだけを縦書きに

縦書きをまじめに実装すると面倒なので少し条件をつけておきます。まず、HTMLタグは反映されません。一切無視されます。純粋に文字だけを抜き出して縦書きにするだけです。また、一部の文字は回転させないといけませんが、とりあえず「−」を「｜」に変換するだけにしておきます。縦書きを正しく表示するためにテーブルタグを使い、そのテーブルタグにはtategakiという名前のスタイルシートクラスを設定しておきます。これにより、見た目をスタイルシートで制御できるようになります。 　縦書き処理を行う場合、何マス目にどの文字を表示すればよいかだけが最大のポイントです。これは「行数(横)×縦の文字数+文字数」として求めます。先に行数を変化させ、次に文字数を変化させることで縦書き表示ができるようになります。
　「−」から「｜」への変換などは読み出した文字を調べて置き換えていけばできあがりです。
　また、プラグインには縦の文字数をパラメータとして渡すようにしますが、パラメータが指定されなかった場合には25文字になるように設定します。

　完成したプラグインのソースは以下のようになります。

【プラグインのソース】

/* 縦書きプラグイン for jQuery
2009.2 By KaZuhiro FuRuhata  */
$.fn.tategaki = function(count){
if (!count) count = 25;
return this.each(function(){
var txt = $(this).text();
var result = '<table class="tategaki">';
var line = Math.floor(txt.length / count);
for(var j=1; j<count+1; j++){
result += '<tr>';
for(var i=line-1; i>=0; i--){
var c = txt.charAt(i*count+j);
switch(c){
case " " : c = '<br>'; break;
case "ー" : c = '｜'; break;
}
result += '<td>' + c + '</td>';
}
result += '</tr>';
}
result += '</table>';
$(this).html(result);
});
}

■実際に使ってみよう

　それでは作成したプラグインを使ってみましょう。
　最初にjQueryライブラリファイルを読み込ませたあとにプラグインファイルを読み込ませます。

	<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
	<script type="text/javascript" src="js/tategaki.js"></script>

　次に縦書きにしたいエレメントを含む要素を$()のセレクタで指定します。

$("#sampleDoc").tategaki(10);

　これでエレメント内の文字が縦書きに表示されます（サンプルを実行する）。