webで縦書きを表現する方法

CSSで対応する方法と画像に変換する方法があります。

CSSの場合は、こちらのページに書いてありました。「テキストを縦書きに表示する
http://technique.eweb-design.com/0402_tt.html

CSSにて

以下の項目を使うことで実現できます。ただし、IE限定とのことですが、最近のブラウザでは対応しているものが多いようです。

writing-mode: tb-rl;で文章を縦書きにしています。
direction: ltr;左から右にテキストを流しています。

 

ブラウザの差異を気にするようなら、画像を作るしかありません。

ということで、phpで画像に変換できるように作ってみました。

http://studio-q.link/tategaki/FireShot Capture 2 - 縦書き - http___studio-q.link_tategaki_

ゴシック、明朝体、フォントサイズ、1列(縦書きなので)に表示する文字数を指定できます。

出来たのはこんな感じ。
tategaki

詳しいコードを知りたい方は、コメントください。

 

 

2 thoughts on “webで縦書きを表現する方法

  • 初めまして。
    縦書きを画像にしたいと思っていてこちらにたどり着きました。
    コード教えていただけますでしょうか。
    よろしくお願いいたします。

  • ちょっとソースコードが汚いので、整形したらのっけたいとおもいます。

    簡単に説明しますと、imagettftextでも字を画像に変換できるので、1文字ずつ座標計算して配置、あとは【】とか~とか回転したほうがよいものは回転させてから配置。
    というかんじです。地道に1文字づつです。

コメントを残す

%d人のブロガーが「いいね」をつけました。