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

このQ&Aに関連する最新のQ&A

A 回答 (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>
    • good
    • 0
この回答へのお礼

有り難う御座います。

お礼日時:2009/05/13 20:19

良 雲 本


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

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

でCSSで強引に一行毎に設定するのが良いかも。
この場合は、高さを確保しないとダメかな?。
    • good
    • 0
この回答へのお礼

有り難う御座います。

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

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



無理やりやれば他のブラウザでも可能ですがスタイルが合わなかったりします。
    • good
    • 0
この回答へのお礼

有り難う御座います。

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

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


http://technique.eweb-design.com/0402_tt.html
    • good
    • 0
この回答へのお礼

有り難う御座います。

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

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング

おすすめ情報