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

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

 

#2017/12/20 更新

ソースコードを整形してから掲載しようと思いましたが、かなり遅くなっちゃってますがまだ整形してませんm(__)m

とりあえず、githubにアップしました。

https://github.com/fokazaki2/tategaki

 

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です