| 属性名 | text-box-edge |
|---|---|
| 値 | auto | <text-edge> |
| 値の詳細 |
<text-edge> = [ text | ideographic | ideographic-ink ] | [ text | ideographic | ideographic-ink | cap | ex ] [ text | ideographic | ideographic-ink | alphabetic ] |
| 初期値 | auto |
| 適用可能要素 | ブロックコンテナおよびインラインボックス |
| 継承 | 継承する |
| サポート | https://caniuse.com/mdn-css_properties_text-box-edge |
フォントの上下の隙間(レディング)を除去(トリミング)する際に、どの位置でトリミングするかを指定します。引数をひとつ指定した場合は上下同じ指定とみなされます。引数を二つ指定した場合は上部、および下部の指定とみなされます。トリミングの概要は text-box を参照してください。
フォントによって異なりますが、おおむね下記のような関係になります。
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Noto+Sans+JP:wght@100..900&family=Roboto+Flex:opsz,wght@8..144,100..1000&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
.my-example {
margin: 1rem;
span {
display: inline-block;
border: 1px solid #ccc;
background-color: #ddf;
font-family: "Merriweather";
font-size: 64px;
padding: 0 10px;
}
}
<div class="my-example"> <span>Ilp漢</span> <span style="text-box-trim: trim-both; text-box-edge: text text;">Ilp漢</span> <span style="text-box-trim: trim-both; text-box-edge: cap alphabetic;">Ilp漢</span> <span style="text-box-trim: trim-both; text-box-edge: ex alphabetic;">Ilp漢</span> </div>