締切済み

ホームページ　縦書き

2009/05/12 22:20

縦書きのホームページに興味が有ります。横書きのホームページではなく縦書きのホームページこそ（或いは、それに似たような物でも、良いんですが）日本語らしいと考えていますが、ほとんどが横書き。何んとしても縦書きのやり方をと思い、質問してみました。

nekootokom
お礼率100% (48/48)

HTML
回答数4
ありがとう数4

みんなの回答 （4）
専門家の回答

みんなの回答

babu_baboo
ベストアンサー率51% (268/525)

2009/05/13 19:20 回答No.4

あくまでも、おふざけだじょ！くうはくは、てきとうになおして。ばぶぅ ieは、うごかないばぶ！けんしょうは、ふぁいあ～ふぉっくすでしかしてないし・・。。、のいちはなおすほうがええじょばぶ。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <title>tategaki</title> <style type="text/css"> #a { 　font-size:16px; 　width:200px; height:200px; 　border:1px red inset; } </style> <body> <p class="tb-rl" id="a"> この文章を縦書きにしようと思う。なんて無茶なことというか、こんなのはナンセンスだと皆が思うだろう </p> <script type="text/javascript"> function TATEGAKI(emtID, padding, fontSize, lineHeight) { 　//@cc_on @if(@_jscript) return @end@*/ 　var e = document.getElementById(emtID); 　var s = e.style; 　var obj = { element: e, width: e.offsetHeight, height: e.offsetHeight } 　var start = {x:0, y:0}; 　var max = { }; 　var tmp = e; 　var txt = e.textContent.split(''); 　var cnt; 　var span; 　var px; 　var py; 　var char; 　　s.width = obj.width + 'px'; 　s.height = obj.height + 'px'; 　while(e.hasChildNodes()) e.removeChild(e.firstChild); 　do { 　　start.x += tmp.offsetLeft; 　　start.y += tmp.offsetTop; 　} while (tmp = tmp.offsetParent) 　max.x = start.x; 　start.x += obj.width - (padding[1]||0) - fontSize; 　max.y = start.y + obj.height - (padding[2]||0) - fontSize; 　start.y += (padding[0]||0); 　px = start.x; 　py = start.y; 　　cnt = 0; 　while (char = txt[cnt++]) { 　　span = document.createElement('span'); 　　span.style.position = 'absolute'; 　　span.style.left = px + 'px'; 　　span.style.top = py + 'px'; 　　span.appendChild(document.createTextNode(char)); 　　py += fontSize; 　　if (py > max.y) { 　　　py = start.y; 　　　px-= fontSize + lineHeight; 　　} 　　e.appendChild(span); 　} 　 } TATEGAKI('a',[10,10,10,10],16, 20); </script>

質問者

お礼 2009/05/13 20:19

有り難う御座います。

naokita
ベストアンサー率57% (1008/1745)

2009/05/13 01:57 回答No.3

良　雲　本い　ひ　日お　と　は天　つ　全気　無　国で　い　的す　　　に ---------------------- これを<pre></pre>で囲めば一直線に曲がらずに出来ると思いますが、文章的には、見た目だけの意味のない言葉になります。音声ブラウザでも読めません。 #1さんのIEのみで実装するか、画像にして対応するか。または、 <p style="float:right; width:1em;">あいうえお</p> <p style="float:right; width:1em;">かきくけこ</p> でCSSで強引に一行毎に設定するのが良いかも。この場合は、高さを確保しないとダメかな？。

質問者