ホームページ　縦書き

締切済

質問者：nekootokom
質問日時：2009/05/12 22:20
回答数：4件

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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

最新から表示
回答順に表示

No.1

回答者： MOMON12345
回答日時：2009/05/12 22:23

こちらが参考になりますでしょうか。

http://technique.eweb-design.com/0402_tt.html

- 0
- 件

通報する

この回答へのお礼

有り難う御座います。

通報する

お礼日時：2009/05/13 20:18

No.2

回答者： sh_hirose
回答日時：2009/05/12 22:51

縦書きのスタイルは基本的にIEのみとなります。

無理やりやれば他のブラウザでも可能ですがスタイルが合わなかったりします。

- 0
- 件

通報する

この回答へのお礼

有り難う御座います。

通報する

お礼日時：2009/05/13 20:21

No.3

回答者： naokita
回答日時：2009/05/13 01:57

良　雲　本

い　ひ　日
お　と　は
天　つ　全
気　無　国
で　い　的
す　　　に
----------------------
これを<pre></pre>で囲めば一直線に曲がらずに出来ると思いますが、文章的には、見た目だけの意味のない言葉になります。音声ブラウザでも読めません。
#1さんのIEのみで実装するか、画像にして対応するか。
または、

<p style="float:right; width:1em;">あいうえお</p>
<p style="float:right; width:1em;">かきくけこ</p>

でCSSで強引に一行毎に設定するのが良いかも。
この場合は、高さを確保しないとダメかな？。

- 0
- 件

通報する

この回答へのお礼

有り難う御座います。

通報する

お礼日時：2009/05/13 20:22

No.4

回答者： babu_baboo
回答日時：2009/05/13 19:20

あくまでも、おふざけだじょ！

くうはくは、てきとうになおして。ばぶぅ
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>