いろんなアプリでちゃんと縦組になるフォントをGlyphsで作る

下記のその３で指摘したGlyphsのバグが開発版2.6.4 (1283) でフィックスされたことを確認しました。2.6.4以降はvrt2も自動生成で大丈夫！

---

縦組に対応したフォントをGlyphsで作っていて、Adobeのアプリではちゃんと縦組になるのに、他のアプリではおかしくなってしまうことがありますよね。

• 他のフォントのグリフが表示される。
• 縦組用のグリフに変わらない。
• 欧文用英数字が正立したり、スカスカになったりする。

このようになってしまうのは、フィーチャーにvrt2がない、もしくはvrt2のコードが不適切であるのが原因です。その対策方法をここで説明します。

仮名フォントの作成を例にして、４つの段階を順番に説明していきます。縦組表示の確認には Creating Font Viewer を使います。vertとvrt2の両方が関わるフォントの確認に便利です。なお、Glyphsのバグがからむ話になるので、ちょっとややこしいですけど、そこはご容赦ください。（Glyphsは2.6.3です）

その１： vertのみ

ダウンロード　01_Sample_vert_only.zip　

この仮名フォントのサンプルは、OpenTypeフィーチャーの自動生成をすると、vertが生成されます。

ここから出力したフォントファイルをCreating Font Viewerのウインドウにドラッグ＆ドロップして、縦組表示にします。

ちゃんと縦組用のグリフになっているところから、vertが効いているのが分かります。

他のアプリでは、この段階で他のフォントのグリフが表示されてしまったりします。ここに漢字グリフを加えるとなぜかvertが効く謎仕様だったりするそうですが、そのために漢字を加えるのはその場しのぎでしかありません。

その２： vertとvrt2

ダウンロード　02_Sample_vert_and_vrt2.zip　

このサンプルには、全角カンマと全角ピリオド、それぞれの縦組用グリフ、計４個のグリフを加えています。

OpenTypeフィーチャーの自動生成をすると、vrt2も生成されます。

ここから出力したフォントファイルをCreating Font Viewerのウインドウにドラッグ＆ドロップして、縦組表示にします。

vertがあるのに効かなくなってしまいました。Creating Font Viewerは、vertとvrt2の両方があると、vertを無視してvrt2だけを有効にします。vertが無視されたので、縦組用グリフにならなくなってしまったわけです。他のアプリでこのような表示になってしまうのも全く同じ理由です。

なお、AdobeのアプリやWebブラウザは、vertだけを使います。vrt2は使いません。vertとvrt2のどちらを使うかはアプリ側がそれぞれ独自に決めることで、フォント側が決めることではありません。フォント側は、アプリがどちらを選んでもちゃんと意図通りに表示されるように工夫をする必要があります。

実は、この段階でvrt2が自動生成され、しかもその中身が追加した４個のグリフに関するフィーチャーコードだけなのは、Glyphsのバグです。

その３： vertとvrt2 修正

ダウンロード　03_Sample_vert_and_vrt2_Fixed.zip

このサンプルは、その２で発生したGlyphsのバグに対処したものです。

何をしたのかというと、［OpenTypeフィーチャーを自動生成］のチェックを外し、vertのフィーチャーコードを全てvrt2にコピペしています。

ここから出力したフォントファイルをCreating Font Viewerのウインドウにドラッグ＆ドロップして、縦組表示にします。

ちゃんと縦組用のグリフになっているところから、vertではなくvrt2が効いているのが分かります。

vrt2を削除してしまうと、その１に戻るだけで、他のアプリでおかしな表示になってしまいます。vrt2を残しつつ、vertのフィーチャーコードも効かせるには、vertのコードをすべてvrt2に加えるしかありません。

この方法は私が勝手に考えたのではありません。モリサワなどのプロ用フォントでもvertのコードをすべてvrt2に加えています。プロ御用達です。言いかえると、Glyphsが自動生成でそうしてくれないのはバグでしかありません。このことはフィードバックもしたのですが、vertとvrt2の仕様について誤解もあるようで、フィックスされる可能性は低いと考えています。 （と思っていたら2.6.4で直りました。よかった！）

その４： vertとvrt2 さらに修正

ダウンロード　04_Sample_vert_and_vrt2_Fixed_More.zip

このサンプルは、欧文用の英数字が縦組でちゃんと横倒しになって、スカスカにならないようにしたものです。

欧文がちゃんと横倒しになってスカスカにならないようにするには、このような横倒し状態にしたグリフが必要です。欧文の縦組用グリフが必要なのです。グリフ名の拡張子は「.rotat」です。

vertだけを使うアプリでは、この「.rotat」は不要です。アプリ側がちゃんと横倒しにしてくれるからです。一方、vrt2を使うアプリでは必須で、「.rotat」はvrt2専用グリフといえるでしょう。

「.rotat」は横倒しにしたいすべての欧文グリフに必要です。めちゃくちゃ大変。そこでGlyphs用のスクリプト Make vrt2 Glyph.py を公開しているので、これを使ってください。横倒しにしたい欧文グリフを選択し、このスクリプトを実行すると、自動的に「.rotat」グリフを生成します。

生成した後にも一手間が必要です。OpenTypeフィーチャーの自動生成ボタンを押すと、vrt2に「.rotat」のコードが生成されます（生成されなかったら［OpenTypeフィーチャーを自動生成］のチェックを入れてください）。

そして、［OpenTypeフィーチャーを自動生成］のチェックを外し、vertを全部コピペです。あーめんどくさい。（※2.6.4以降は自動生成におまかせで大丈夫です）

ここから出力したフォントファイルをCreating Font Viewerのウインドウにドラッグ＆ドロップして、縦組表示にします。

やっとAdobeアプリと同じように表示されましたよ！ いろんなアプリでちゃんと縦組になるフォントができました。

なお、欧文グリフにカーニングを仕込んでいる場合、「.rotat」にも同じカーニングを仕込む必要があります。でもMake vrt2 Glyph.pyは「.rotat」にカーニングを仕込めません。どうすればいいのか分からないんですよね…。良い方法があれば教えてくださいな。

追記１

その１の段階で手っ取り早く対処することも可能です（欧文英数字を除く）。

これでvertのコードを丸ごとvrt2にできます。vrt2の位置を上にずらすのには理由があります。フィーチャーは上から順番に処理されます。ss01などで「縦組用グリフ→別の縦組用グリフ」に置換している場合、先にvrt2で縦組用グリフにしておかないとスルーされてしまうんですね。vrt2が自動生成される時はGlyphsが適切な順番にしてくれるのですけど、このように手動で追加した場合は並び順の配慮が必要となります。

追記２

話の流れで端折ったのですけど、その２で全角ピリオドと全角カンマの縦組用グリフはvrt2の方でちゃんと置換されて表示されます。

追記３

vrt2にvertのコードをコピペするのがめんどくさいので、スクリプト Fix vrt2 Feature.py を作ってみました。よかったら使ってみてください。（※2.6.4以降は不要です）

余談

本筋とは関係ない話です。ここでダウンロードできるサンプルにはCustomFilter.plistファイルを同梱しています。これが.glyphsファイルの同階層にあると、左サイドバーにそのカスタムフィルターが表示されるのです。

日本語は複数のスクリプトでできているので、文字種ごとにさっとグルフビューに表示できると、フォント作成がかなり楽になります。CustomFilter.plistはただのプレーンテキストなので、エディタで開いて編集します。中身はかなり単純。ファイルを開いて覗いてみればすぐに分かるはず。作るフォントに合わせたCustomFilter.plistを自作するのをオススメしますよ。

Tweet