改造フォントとCSS3による縦書きウェブページ

フォント

改造フォント(WebFont)とCSS3を利用した縦書きページを作ってみた。

http://nixeneko.2-d.jp/misc/tate/tate_wf.html
(最新の Firefox でご覧下さい。 WebFont が5MBあるので読み込みに時間がかかるかもしれません)


Firefox 3.6.7 で正しく表示されるのを確認した。 Chrome でも表示はされるが、スクロールがうまくいかない様子(多分他の Webkit 系でも)。他のブラウザは未対応。

基本的に、 CSS3 の Transform でページを右に90度回転させ、それをグリフ(の縦書き形)を左に90度回転したフォントで表示させているだけ。 CSS3 の Column を使うことで新聞の組み方ぽくなった。


今回は改造するフォントとして「きろ字　等幅」(http://www.ez0.net/distribution/font/kiloji/)を使わせていただいた。
改造のやり方。 fontforge 20090923 にて、以下のスクリプトを実行。

#!/usr/bin/fontforge
Open($1)
#縦書き字形に変更
SelectAll()
ApplySubstitution("*","*","vrt2")
ApplySubstitution("*","*","vert")

#0020-007e ASCII
#ff61-ff9f 半角カナ
#以外を左へ90度回転
Select(0u0020,0u007e,0uff61,0uff9f)
SelectInvert()
Rotate(90, 512, 368)

#U+ff5e fullwidth tilde を U+301c wave dash にコピー
Select(0uff5e)
Copy()
Select(0u301c)
Paste()

#極大点の追加、座標値を整数に
AddExtrema()
RoundToInt()
#出力
Generate($1:r+"-vert.ttf")

スクリプトには著作権を主張しません(そもそも主張できるような独自性があるのか?)。ご自由に。


参考サイト:
改造フォントとCSSで縦組にする - M59の記録