あけましておめでとうございます

平成三十年元旦

あらまし

年始の挨拶を電子化された媒体（メディア）で行うようになって久しい。 伝統的には、手書きで挨拶の文（賀詞も含む）を紙に書くのだが、手書きという工程はそのままに電子化したい。 単に電子化するだけならば画像でいいのだが、文字列データは保持したほうがより電子化されたデータとの相性が良く有意義である。 しかるに、手書きをしてフォントを作成することとした。

要求

  • 挨拶が行う者自身の直筆をスキャンして作ったフォントであること
  • 文字は汚くて良い⸺きれいな美文字が欲しければ市販のフォントを使えば良いだけである
  • フォントに含まれるグリフは、挨拶の文に含まれる文字だけでよい
  • 伝統に基づき、縦書きとする
  • 伝統に基づき、それぞれの字の大きさは同一ではなくともよい
  • 挨拶の文の文字列そのもの自体はありのまま使用し特殊記号などは極力避ける

工程

適当に書いた文字をベースとしたので筆順や崩しが間違っているかもしれない。 技術力・デザイン力不足のためカーニングなどの微調整は一切やっていない。 欲が出て仮名連綿に手を出したが、後述のとおり一部環境ではうまく再現できないまま作業を終えている。

  1. 紙に筆ペン（毛筆の代替）で、挨拶の文を書く
  2. 前項の紙をスキャンする
  3. 画像から文字ごとに切り出す
  4. inkscape のベクトル化ツール（potrace）でベクトル化。必要あれば、この時点でグリフの形状を編集する
  5. 前項で作成したベクトルデータを fontforge で読み込み、フォント化
  6. …しようと思ったが正しいフォントが生成されなかったので ttx (fonttools) を用いて TTX ファイルを生成した後、改造を施して、TTX ファイルから ttx で WOFF/WOFF2 フォントを作成した

ベクトル化するところまでは、手作業ですべて行ったため特段技術的高度なことをやったわけではないため省略する。

もととなった ttx ファイルは gist:cat-in-136/d3561c7a30982d2b20825223e6fcf8b2に置いた。

GSUB

欲を出て連綿を導入するために GSUB の Ligature（合字）をいじることとした。 ただこれをするために Adobe-Identity-0 を使ったりする羽目になった。

用意した四つの仮名連綿を、下記の通り U+E900〜3 という私用領域に割り当てた：

仮名連綿割り当てたコード仮名
U+E900まして
U+E901めで
U+E902とう
U+E903ます

これを「まして」→「U+E900」という風に置換する Lookup Table を定義することで実現している。 なお、cid12358 のように unicode charcode の十進の名前をそのまま CID の番号として割り当てているがこうする必要はない。 単に作業の簡便のためこのように振っただけである。

OpenType の仕様上「まして」「ます」のように最初の字を共用するものはまとめて管理される（LigatureSet[glyph="cid12414"]）。 これをバラして別要素とすると、片方の ligature は無視されてしまう。 

<Lookup index="0">
  <LookupType value="4"/>
  <LookupFlag value="0"/>
  <!-- SubTableCount=1 -->
  <LigatureSubst index="0" Format="1">
    <LigatureSet glyph="cid12392">
      <Ligature components="cid12358" glyph="cid59650"/>
    </LigatureSet>
    <LigatureSet glyph="cid12414">
      <Ligature components="cid12375,cid12390" glyph="cid59648"/>
      <Ligature components="cid12377" glyph="cid59651"/>
    </LigatureSet>
    <LigatureSet glyph="cid12417">
      <Ligature components="cid12391" glyph="cid59649"/>
    </LigatureSet>
  </LigatureSubst>
</Lookup>

Edge は仮名連綿を正しくレンダリングできず、文字がひどく崩れるようであった。 次善策として、Edge 向けには liga を無効にするように CSS で工夫をこらしておいてある。

Google Chrome も私が作成したフォントでは GSUB がうまく働かなかった。 "たてよこWebアワード(2016)"だったり、 嵯峨本フォントプロトタイプは正しく仮名連綿がレンダリングできるのでフォントの問題と思われる。

ブラウザではないが pango-view で試したところ、仮名連綿は正しくレンダリングされた。 環境依存つらみある。

pango-view レンダリングから構成した図

WOFF

OpenType をそのままだと容量上非効率なのでウェブフォントに特化した WOFF あるいは WOFF2 が推奨される。 ttx だと必要な python パッケージさえ入っていればそのまま出力できた。 

$ ttx -q --flavor woff2 Gantan2018CatIn136.ttx
$ ttx -q --flavor woff --with-zopfli Gantan2018CatIn136.ttx

WOFF2 の方がサイズ的に有利なのでそちらの方を使うのが好ましい。 だが WOFF2 に対応していないブラウザもいまだ生き残っているため WOFF も作成した。 WOFF さえ対応していないブラウザは縦書きをろくに対応していると言い難いとおもうので、ばっざりと切っている。

おわりに

手書きという工程を通じて、画面上に現れ、またそれがテキスト選択できるというのは、興味深い製作体験であった。

横書きの手書きフォントのノウハウは数多あるが、縦書きのフォントや特に連綿は時代が浅いこともあり情報収集は大変な上に、完全なものは結局つくることはできなかった。 嵯峨本フォントプロトタイプの実装は、大いに参考になった。

参考文献