News & Information

~ 良いものを創造し、”よろこび”を提供する ~

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

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

2016/06/21

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

 

仲間大募集!

現状に満足することなく常に新しい技術を学び、問題解決に取り組める方、
積極的に新しいことにチャレンジしたい!とお考えの方、
ご自身のスキル・経験を活かしてお仕事をしたいとお考えの方を
心より、お待ちしております!!

現状に満足することなく常に新しい技術を学び、問題解決に取り組める方、 積極的に新しいことにチャレンジしたい!とお考えの方、 ご自身のスキル・経験を活かしてお仕事をしたいとお考えの方を 心より、お待ちしております!!