CSS text-box-trimでテキストの上下のスペースをカスタマイズする
日本語では気になる場面は少ない。しかし、英語の場合は、テキストの上下のスペースにより中心線がズレて見えたり、スペースのリズムが崩れているように見えたりする。
text-boxプロパティを使うことで、開発者自身がテキストの上下のスペースをカスタマイズできるようになった。
書き方
text-box-trim: trim-start | trim-end | trim-both | none;
text-box-edge: cap | ex | text | leading;
line-fit-edge: alphabetic | text;
/* ショートハンド */
text-box: trim-both cap alphabetic;例
h1 {
/* 上下を大文字英字にあわせる */
text-box: trim-both cap alphabetic;
/* 上下を小文字の「x」に合わせる */
text-box: trim-both ex alphabetic;
}