text-box-edge

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

text-box-edge はCSS のプロパティで、テキスト要素のブロックコンテナーから切り取る空間の大きさを指定します。

フォントによって縦の空間が異なるため、過去にはウェブ上で一貫した組版を行うことは困難でした。text-box-edge プロパティは、切り取る側を指定する対応プロパティtext-box-trim と合わせて使用することで、一貫した組版を容易に実現します。text-box-trim が設定されていないか、none に設定されている場合、text-box-edge プロパティは効果はありません。

メモ:一括指定プロパティのtext-box を使用すると、 1 つの宣言でtext-box-edge およびtext-box-trim の値を指定することができます。

構文

css

/* 単一キーワード */text-box-edge: auto;text-box-edge: text;/* 2 つの <text-edge> 値 */text-box-edge: text text;text-box-edge: text alphabetic;text-box-edge: cap alphabetic;text-box-edge: ex text;/* グローバル値 */text-box-edge: inherit;text-box-edge: initial;text-box-edge: revert;text-box-edge: revert-layer;text-box-edge: unset;

値

text-box-edge プロパティの値は、auto または<text-edge> 値として指定します。

auto

既定値です。text-edge の値text と同じです。

<text-edge>

テキスト要素のブロックコンテナーを切り取る、上端と下端の位置を表す 1 つまたは 2 つの別個のキーワードです。

2 つの値が指定されている場合、最初の値はテキストのブロック先頭（上）端に適用される切断動作を指定し、2 つ目の値はテキストのブロック末尾（下）端に適用される切断動作を指定します。
- 切り取る上側の端の有効値は、text、cap、ex です。
- 切り取る下側の端の有効値は、text とalphabetic です。
1 つの値を指定すると、上端と下端の切り取り動作を指定します。執筆時点では、有効な単一の値はtext だけです。

解説

テキストのみのコンテンツの高さは、フォントの高さに対して相対的です。デジタルフォントファイルでは、高さには大文字、アセンダー、ディセンダーなど、文字すべてが記載されています。フォントによってベースラインの高さが異なるため、同じfont-size を指定しても、テキストの行の高さが異なり、行間の外観に影響します。

text-box-edge プロパティを使用すると、テキストのブロックコンテナーの先頭の端や末尾の端から空間を切り取ることができます。これには、テキストのブロックの先頭の端およびブロック末尾の先頭、およびフォント内で定義されている行送り（前述）を含めることができます。これは、切り取る空間の上端と下端を示す<text-edge> 値を指定することで実現します。

空間を切り取る端は、text-box-trim プロパティを使用して指定します。例えば、テキストのブロックコンテナーの上端、下端、あるいはその両方から空間を切り取ることを選べます。

これらのプロパティを使用すると、ブロック方向のテキストの空間をより簡単に制御できます。

公式定義

初期値	`auto`
適用対象	Block containers and inline boxes
継承	なし
計算値	the specified keyword
アニメーションの種類	離散値

形式文法

text-box-edge =
auto|
<text-edge>

<text-edge> =
[text|ideographic|ideographic-ink]|
[text|ideographic|ideographic-ink|cap|ex][text|ideographic|ideographic-ink|alphabetic]

例

基本的な`text-box-edge` の使用方法

英語やアラビア語などの横書き言語で使用する最も一般的なtext-box-edge の値は、cap alphabetic およびex alphabetic です。cap の値は、テキスト要素のブロックコンテナーの上端を大文字の上端まで切り取り、ex は上端をフォントの x 高（小文字の上端）まで切り取ります。いずれの場合も、alphabetic は下端をテキストのベースラインと同じ高さに切り取ります。

この例では、2 つの<p> 要素に対して、これらの 2 つの一般的な値の効果を示します。さらに、両方のtext-box-trim に値trim-both が設定されているため、開始端と終了端が切り取られます。

<p>これは .one です。</p><p>これは .two です。</p>

html {  font-family: sans-serif;  height: 100%;}body {  height: inherit;  display: flex;  flex-direction: column;  justify-content: center;  gap: 100px;}p {  margin: 0;  font-size: 6rem;  font-weight: bold;}

css

p {  text-box-trim: trim-both;  border-top: 5px solid magenta;  border-bottom: 5px solid magenta;}.one {  text-box-edge: cap alphabetic;}.two {  text-box-edge: ex alphabetic;}