かきかたプリントメーカーの文字には、離れている部分とくっついている部分の区別がつきにくいという問題があったので、改善した。今のところ、小学校3年生で習う漢字までをアップデートしたが、今後、他の文字もアップデートする予定。
たとえば、こちらの文字。上の段がアップデート前、下の段がアップデート後である。緑色の丸の箇所に注目。
Afterのほうは読みやすいのだが、Beforeのほうは、
- 「原」の点々の部分が十分周囲と離れていない
- 「食」の下部で、線がどこで切れて別の画になっている様子がわかりにくい
- 「林」の横線が左右につながって見えてしまう
という問題がある。
原因
なぜこのような問題が生じるかというと、かきかたプリントメーカーがかなり自由に書式を変更できる機能に関係している。
元データは基本的に太さのない「線」の集合体である。より厳密には、SVG形式のベクトルデータで、ほとんどがベジエ曲線として表現されている。そのデータを、ブラウザ上で動くJavaScriptによって加工して表示している。
ユーザが文字の太さを指定すると、ブラウザ上でそれを反映し、太線として表示する。そのとき、線がふくらんだ部分部分が隣の線とくっついてしまうのだ。
解決
線を太くすると線同士がくっついてしまうなら、その分を見越して線をあらかじめ離しておけばいいのではないか? というアイディアは当然出てくるのだが、それはうまくいかない。太い線に合わせて文字データを作ると、線を細くしたときに離れすぎて文字がスカスカしてしまう。
そこで、くっついたら困る箇所だけ、先端を文字の太さの分だけカットするという処置を施した。下の画像の赤丸の箇所に注目してほしい。
この処理をすべての線に施せばいいのか? というと、そんなことはない。線の端っこの位置が揃うことを想定している場合、線の太さのぶんだけ短くしてしまうと、下の画像のように不自然に離れてしまうのだ。これはこれで困る。
先端を太さの分だけカットすべき線と、そうでない線がある。文字データを目視でチェックし、「ここは隣の線と明確に離すべき」と思った場所にタグ付けしていく。そして、ブラウザ上で、そのタグのついている線をカットする処理を行うようにした。
ついでに……
文字の始点に「●」をつけることができるのだが、同じ位置から複数の線が生えている場合、●が重なってしまう。そこも少しずつ直している。
