| ポイント |
<![CDATA[
p = i * h + j;
s = txt.charAt(p);
]]>
|
| 説 明 |
文字列を縦書きにするにはtableタグを使います。縦横の文字数を設定しておき、出力する文字の位置を求めます。出力する文字の位置は「横位置×表の縦幅＋縦位置」となります。 |
| サンプル |
<![CDATA[
<html>
<head>
<title>縦書きHTMLを生成する</title>
<script Language="JavaScript"><!--
function makeTate()
{
w = eval(document.myFORM.yoko.value); // 横の文字数
h = eval(document.myFORM.tate.value); // 縦の文字数
txt = document.myFORM.moto.value;
repStr = "ー「」"; // 横文字
repStr2= "｜┐└"; // 対応する縦文字
html = "<table border='1'>";
for (j=0; j<h; j++)
{
html = html + "<tr>";
for (i=w-1; i>-1; i--)
{
p = i * h + j;
if (p < txt.length)
{
s = txt.charAt(p);
for (k=0; k<repStr.length; k++)
{
sp = s.indexOf(repStr.charAt(k),0);
if ( sp > -1) s = repStr2.charAt(k);
}
html = html + "<td align='center'>" + s + "</td>";
}
}
html = html + "</tr>";
}
html = html + "</table>";
document.myFORM.result.value = html;
}
// --></script>
</head>
<body bgColor="#FFffFF">
<form name="myFORM">
横幅：<input type="text" name="yoko" value="20"><br>
縦幅：<input type="text" name="tate" value="10"><br>
<textarea rows="10" cols="60" name="moto">元の文章を入れて</textarea><br>
<input type="button" value="縦書き文章作成" onClick="makeTate()"><br>
出力結果(HTML Tag)<br>
<textarea rows="15" cols="60" name="result"></textarea><br>
</form>
</body>
</html>
]]>
|
| 補足説明 |
なし |
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
縦書きHTMLを生成する