094 FigmaのVertical trim(上下トリミング)が惜しい感じ。2023/03/29

やはり日本語の文字って難しいというか、形式が違うというか。

今日は小さいけど大きなアプデがFigmaに入り、「Vertical trim（上下トリミング）」という機能が地味に細かい部分ですが地味に嬉しい！けど、惜しい感じなんです。

おそらく欧文フォントのベースラインを基準にしてるので、日本語フォントは割りかしはみ出ています。上下中央かもちょっと怪しい感じです。

ただ欧文フォントでも個性的な形のフォントは上手くトリミングされていないのもあったので（データの作り方とかあるのかもですね）、あまり過信せずにCSSで実装したらこうなるんだというぐらいな感じかもしれません。

ちなみにインスペクトはこんなコメントアウトとCSSが置いてありました。

/* leading-trim and text-edge are draft CSS properties.
Read more: https://drafts.csswg.org/css-inline-3/#leading-trim
*/
leading-trim: both;
text-edge: cap;

draft CSSと書いてあるのは草案のプロパティだそうで、まだ使えないようです。

Figmaのアップデートがあったものの、CSSのleading-trim(text-edge)もhanging-punctuationも、まだほとんどのブラウザでは実現できてないので、UI上の動的なテキストになる箇所では、実装時にどうするかは各位コミュニケーションは必要そう。
（画像にしちゃうようなところはガンガン使えそうだけど 💪

— ❖HirokiTani (@hiloki) March 29, 2023

今日の私のように（笑）こりゃいいわ！と変に多用せずに、ちゃんと使いどころを意識して使った方がよさそうだなと思いました。