2016.06.21 (Tue) Category : CSS,HTML5,PHP,technology Author :

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

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

 

 

コメント

  1. 本田 より:

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

  2. qualiasystems より:

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

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

コメントを残す

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