テキストボックスのホワイトスペースをトリミングするための2つのCSSプロパティ

cssのtext-box-trimおよびtext-box-edgeプロパティにより、開発者はテキストの最初の行の上からテキストボックスの最後のテキスト行の下にある空白のスペースの量を正確に制御できます。これらのブランクは、テキストボックスの垂直高さをそのコンテンツの高さよりも大きくします。

この空白は

leading （線間隔）と呼ばれ、すべてのテキスト行（実際には2行半間隔）の上と下に表示され、テキストの読みやすさが向上します。しかし、私たちはそれがテキストの行の間に表示されたいだけですよね？マージン、塗りつぶし、ギャップ、その他の間隔に影響を与えるため、テキストボックスの上部と下のエッジに表示されたくありません。

たとえば、

50pxのマージンを実装すると、ライン間隔が37px増加すると、合計87pxスペースがあります。次に、マージンを13pxに調整して、実際にスペースを50pxにする必要があります。

設計システムの男として、私はできるだけ一貫性を維持し、できるだけ少ないマーカーを使用しようとしています。

/* 当 <element> 后面跟着 <h1> 时 */
<element> + h1 {
  margin-bottom: 13px; /* 而不是 margin-bottom: 50px; */
}</element>
</h1></element>

この方法は、計算を行う必要があるためです（計算では少ないが）。ただし、CSSで定義された50pxが視覚的に定義されている50pxは50pxを使用すると、

およびプロパティを使用してください。 text-box-trimtext-box-edge免責事項：

およびは、Chrome 128とSafari 16.4の機能フラグと、機能フラグなしのSafariテクノロジープレビューからのみアクセスできます。最新のブラウザのサポート情報については、Caniuseを参照してください。 text-box-trimtext-box-edgeから始めます

は、テキストボックスのトリミングを有効にするCSSプロパティです。それ自体に他の目的はありませんが、開始、終了、開始、終了または終了へのオプションを提供します。 text-box-trim

メモ：古いWebブラウザーでは、新しいtext-box-trim値の代わりに古い

値を使用する必要がある場合があります。古いWebブラウザーでは、

text-box-trim: trim-start;
text-box-trim: trim-end;
text-box-trim: trim-both;
text-box-trim: none;

を使用する必要がある場合があります。残念ながら、これについての参照はないので、何が機能するかを確認する必要があります。

さて、どこに剪定したいですか？ start/end/bothあなたは私が何を意味するのか知りたいかもしれません。タイポグラフィの文字には複数のピークがあることを考えてください。 trim-start/trim-end/trim-both top/bottom/both文字「x」およびその他の小文字の上部（上昇または上部の拡張機能を含めない）の上部をマークするxの高さ、大文字の上部の上部（昇順または上部の拡張機能を含む）、およびほとんどの文字の下部をマークする文字ベースラインをマークする大文字の高さがあります。もちろん、持ち上げ高さと低い高さもあります。

Xの高さ、資本の高さ、または上昇の高さとテキストボックスの「上」の端（上部の筆記が始まる場所）の間の空白、および文字のベースラインまたは下の筆記の高さと「下」のエッジの間の空白（text-underline-positionがunderに設定され、その後、階層が始まる場合）の間の空白をトリミングできます。

何もトリミングしないでください

text-box-edge: leadingは、すべてのライン間隔が含まれていることを意味します。これは、text-box-trim: noneまたはtext-box-trimおよびtext-box-edgeを完全に省略するのと同じです。また、text-box-trim: trim-startを使用して低エッジトリミングを制限するか、text-box-trim: trim-endを使用して上端トリミングを制限することもできます。はい、これをまったくしない方法はたくさんあります！

新しいWebブラウザーは、leading値を削除し、「公開しないでください（まだ）」の警告（*肩をすくめている*）にもかかわらず、auto値を削除し、

に置き換えることにより、CSSWG仕様作業ドラフトから逸脱しています。

もちろん、text-box-edgeauto2つの値（上端に関する指示、次に下端に関する指示）を受け入れます。ただし、

は個別に使用する必要があります。

/* 当 <element> 后面跟着 <h1> 时 */
<element> + h1 {
  margin-bottom: 13px; /* 而不是 margin-bottom: 50px; */
}</element>
</h1></element>

autoすべてのシナリオが機能するすべてのシナリオを説明できますが、それらのどれも有効ではありません。私たちが望んでいるのは、上端または下のエッジをautoに設定し、他のエッジを他の何かに設定できることだけだと思いますが、それはまさにそうではないことです。これは質問ですが、すぐに深く掘り下げます。

リフトの上部および/または下部の下部をトリム

text最初の値として使用すると、上記の部分がトリミングされます。 （私はあなたがそれを望んでいると思いますauto、それはそうではありません。）

text-box-trim: trim-start;
text-box-trim: trim-end;
text-box-trim: trim-both;
text-box-trim: none;

リフトとより低い高さの測定値がフォント自体（またはそうでない！）から来ていることは注目に値します。たとえば、Arialフォントの場合、上昇の高さにはディクリティックスが含まれ、落下の高さには低下が含まれ、Fravancesフォントの場合、秋の高さにはディクリティックスが含まれます。したがって、textからtextの名前の変更についての議論があります。 from-font

首都の高さのみを超える

首都の高さを上回る：

text-box-edge: auto; /* Works */
text-box-edge: ex auto; /* Doesn't work */
text-box-edge: auto alphabetic; /* Doesn't work */

覚えておいてください、未表4の値はデフォルトで

になります。したがって、下端をトリミングしないように選択するには、text：autoの代わりにtrim-startを使用する必要があります。 trim-both

上の高さをトリップし、レターベースラインの下

text-box-edge: ex text; /* Valid */
text-box-edge: ex; /* Computed as `text-box-edge: ex text;` */
text-box-edge: text alphabetic; /* Valid */
text-box-edge: text text; /* Valid */
text-box-edge: text; /* Computed as `text-box-edge: text text;` */

上記の高さをトリミングし、文字のベースラインの下にトリミングするには：

/* 当 <element> 后面跟着 <h1> 时 */
<element> + h1 {
  margin-bottom: 13px; /* 而不是 margin-bottom: 50px; */
}</element>
</h1></element>

ちなみに、

Figmaの垂直トリム設定のキャップの高さからベースラインオプションは、まさにこれを行います。ただし、その開発モードは、廃止された属性名（leading-trimおよびtext-edge）および時代遅れの値（topおよびbottom）でCSSコードを生成します。

x height

のみ上にトリップします

x高さの上にのみトリミングするには：

text-box-trim: trim-start;
text-box-trim: trim-end;
text-box-trim: trim-both;
text-box-trim: none;

トリップxレターベースラインの上下の高さ

レターベースラインの上下のxの高さをトリミングするには：

text-box-edge: auto; /* Works */
text-box-edge: ex auto; /* Doesn't work */
text-box-edge: auto alphabetic; /* Doesn't work */

文字のベースラインの下にのみトリップ

ベースラインの下にのみトリミングするために、次のは無効です（物事は非常に滑らかになりませんか？）：

）

text-box-edge: ex text; /* Valid */
text-box-edge: ex; /* Computed as `text-box-edge: ex text;` */
text-box-edge: text alphabetic; /* Valid */
text-box-edge: text text; /* Valid */
text-box-edge: text; /* Computed as `text-box-edge: text text;` */

これは、最初の値が常に必要なアッパーエッジ値であり、2番目の値はオプションの低いエッジ値であるためです。これは、

が有効な上端の値ではないことを意味します。冗長な苦情とは別に、正しい構文は、alphabetic：trim-endで実際にキャンセルしたとしても、上端の値を宣言することができます。 trim-end

象形文字はどこにありますか？

text-box-edge: cap; /* Computed as text-box-edge: cap text; */

Webブラウザがトリミングする前にどのように剪定されるかを知ることは困難ですが、仕様のすべてを読むことができます。理論的には、トリミングに

値を使用し、トリミングせずに

値を使用する必要があります。両方とも現在サポートされていません。 ideographic-ink ideographic

、略語属性

text-box-trim: trim-start; /* Not text-box-trim: trim-both; */
text-box-edge: cap; /* Not computed as text-box-edge: cap text; */

テキストボックスのトリミングの冗長性が気に入らない場合は、略語text-box属性があり、それほど重要ではありません。すべて同じルールが適用されます。

text-box最終的な考え

一見したところ、

text-box-trim: trim-both;
text-box-edge: cap alphabetic;

> しかし、現在の提案はテキストボックスのトリミングに対処するための最良の方法ですか？個人的には、そうは思いません。

とtext-box-trimはより理にかなっていると思いますが、text-box-edgeは略語属性として使用され、

はまったく使用されませんが、単純化された一貫したアプローチを受け入れることをいとわないと思います。どう思いますか？

text-box-trim-start他にもいくつかの懸念があります。たとえば、アンダースコア、オーバースコア、句読点のぶら下がっているマーク、またはディアティックマークを含めるオプションがある必要がありますか？特にtext-box-trim-endまたは特に厚いtext-box-trimを使用している場合は、はいと言います。 text-box-edge

以上がテキストボックスのホワイトスペースをトリミングするための2つのCSSプロパティの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。