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 class="one">これは .one です。</p>

<p class="two">これは .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;
}