Site Loader
スタッフブログ

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

 

Post Author: Futoshi

代表取締役 兼 エンジニア の岡崎 太です。よろしくです。

2 Replies to “webで縦書きを表現する方法”

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

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

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

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください