改造フォントとCSSで縦組にする

技術 書体


巷ではHTML5だのなんだの騒いでいるが、縦組に関してはInternet Explorerにさえ及ばない。WebKitはSVGだと一応縦組できるけど不完全だし、FirefoxはSVGでも縦組を実装してないよね。
でもこのままHTMLで縦組できないというのは悲しい。そこで、改造フォントを作って表示させてみた。
やっていることは簡単で、TakaoMinchoフォントを改造して文字をあらかじめ縦組のものに差し替え、90度回転させておく。そのまま表示すると横倒しの文章になってしまうけど、CSS3のtransformを使って回転させれば問題ない。
この改造フォントをWebFontとしてやれば、FirefoxやWebKitでも縦書きで表示させられることになる。(フォントの容量は10MB近くあるのだけれども)
fontforge 20090923で作業をやる場合。自分は次のスクリプトを使ってフォントを改造したけど、そのままだと異常なファイルになって使えないようだ。fontforgeで開きなおしてOTF形式で保存すると正常なファイルになった。フォント名も変えておくと良い。あと、一部の約物記号が回転してしまって正しくない向きになってしまう問題もあるけどそれはまだ解決していない。

#!/usr/bin/fontforge
Open($1)
SelectAll()
ApplySubstitution("*","*","vrt2")
ApplySubstitution("*","*","vert")
Select(0u0000,0u2fff)
SelectInvert()
Rotate(90, 1024, 901)
Move(0, -250)
Save($1:r+"-vert.ttf")