ヒラギノの縦位置を揃えるちょうべんりなSketchプラグインの紹介
Sketch 3 Advent Calendar 2014の18日目の記事です。
Sketchでボタン的なものを作ろうとすると、テキストレイヤーの位置決めに苦労するのはよく知られた話だと思います。ボタンの外側を作って、内側にテキストレイヤーを追加して、Align Horizontallyして左右を揃えるところまでは良いのですが、次に縦を揃えようとしてAlign Verticallyすると、テキストレイヤーが意味不明な位置に移動して、悲しい思いをすることになります。
なにが起きているかというと、テキストレイヤーの形がおかしくなっていて、文字の下に謎の空白ができています。
これは多分ヒラギノの余白の計算が壊れているのだと思います。下の余白が予想外の大きさになった結果として、テキストレイヤーの矩形が意図しない感じになり、矩形同士を中央に合わせたら文字がすごい上に表示された。
ちなみに、欧文のフォントは全体的にちゃんと処理されていて、いい感じになります。テキストレイヤーを挿入した時点で、矩形の中心にテキストがくるように行の高さ（Lineの項目）が設定されてるように見えます。下の画像はAlign Verticallyしただけ。
いずれにせよ、私たちは日本語を書きたいので、この問題をなんとかしないといけません。なんとかするプラグインを作りました。
テキストレイヤーと外側のレイヤーを選択して、プラグインを実行すると、テキストレイヤーを中央に移動させます。ただし、テキストレイヤーの矩形を見て位置を揃えるわけではなく、フォントの設定を見て文字の位置を揃えます。ヒラギノでもいい感じに中央に来るようになっています。（なんか見てたらもう1px上でもいい気がしてきたけど。）
このエントリを書きながら、じっくり欧文フォントの振る舞いを確認したところ、このプラグインは日本人しか嬉しくないことに気づきましたが、でも日本人は嬉しいと思うので、みなさん試しに使ってみてください。
明日のSketch 3 Advent Calendar 2014のご担当はnukos_さんです。
