Sketch 3.6にアップデートされ、長年の問題であった行間問題がかなり改善されました。
ただ、Sketch 3.5からOSX 10.10以降の対応となったため、やむを得ない理由でOSX 10.9を使っている場合、この恩恵を受けられません。
今回は、そんな「やむを得ない理由でSketch 3.4.xを使わざるを得ないマン」向けに、行間問題をごにょごにょして扱いやすくするプラグインを作成しました。
Sketchのテキストレイヤーでは、1文字目のフォントがそのテキストレイヤー全体の行間処理を引っ張ります(完全に検証しているわけではないため、そのような動作に見える、ということです)。つまり、和文の1文字目を欧文にすることで、「ずれる」現象を回避することができます(ただし途中に行間の大きいZapfinoなどを使うと、そちらに引っ張られます)。
とはいえ、1文字目に欧文フォントを指定できるレイヤーは限られていると思いますので、Adobe Blankを利用して1文字目を無理やり欧文フォントにしてやります。
Adobe Blankは、「目に見えない」という特殊なフォントで、これを適用したテキストはテキスト情報はあるものの、文字としての実体は画面に表示されなくなります。この特性を利用して、Adobe Blankを適用した半角スペースを1文字目に挿入し、意図的に見えなくしつつ欧文フォントを適用するという手法を、プラグインで実行できるように作成しました。
Hackedの行間が途中おかしくなりますが、同時にLine-heightを動かしているためです。単体で値を変化させる場合は、この現象は起きません。
半角スペース以外の文字でも良いのですが、気にせずコピー & ペーストした時に害が少ないかつ気づきやすいのではないかということで、半角スペースにしています。
インストール
プラグインをダウンロードし、LineHeight Fixer.sketchpluginファイルをダブルクリックしてインストールします。Plugins Directoryにはあえて登録してませんので、Sketch Toolboxではインストールできません。
- プラグインリポジトリ:Sketch Line-height Fixer
- プラグインのダウンロード
またAdobe Blankが必要ですので、リポジトリからダウンロードし、OpenType(.otf)版をあらかじめインストールしておいてください。インストールされていない場合でもプラグイン自体は実行できますが、「インストールしてね」というメッセージが表示されるのみとなります。
- Adobe Blankリポジトリ:Adobe Blank
- フォントのダウンロード
使い方
テキストレイヤーを選択し、プラグインを実行してください。複数のレイヤーを選択していても実行できます。
初めから1文字目に半角スペースがある場合、半角スペースを挿入せずそのスペースへAdobe Blankを適用します。
1文字目に半角スペースが必要な場合は、任意で挿入してください。ただし、スペースを挿入してもAdobe Blankが適用されてしまうため、スペース挿入後、Shift + ←でスペースを選択(選択している状態は見えません)し、フォントの変更が必要です。
注意など
100%動作を保証するものではありません。なんらかのリスクがあることは承知の上で、ご利用ください。
あとチームで使う場合は、スペースがあるかどうか見た目にわからないため、必ず意識合わせをしておくほうが事故になりづらいと思います。
不要なスペースを無理やり消すという方法を用いて解決しているため、万が一当たり前のように使われて今後の負の遺産になってもなぁ(大げさ)……と思ってましたが、Sketch 3.6で行間問題がかなり改善されたため、今回公開することにしました。
Sketch 3.4.xをお使いの皆さんが、早くバージョンアップできますよう。