text-spacing-trim

<spacing-trim>

さまざまな空間調整オプションを定義します。利用できる値は次のとおりです。

normal

各行の先頭にある CJK 全角の開始用約物文字を全角幅に設定します。各行の末尾にある CJK 全角の終端用約物文字を全角幅に設定し、または、その文字が前の行に収まりきらない場合は半角幅に設定します。約物文字間の空間の折り畳みをします。

space-all

すべての CJK 全角薬物文字を全角幅に設定します。

space-first

normal と同様に動作しますが、 CJK 全角の開始用約物文字がテキストのブロックコンテナー内で最初の行の先頭、および改行文字などの明示的な改行の後に続くすべての行の先頭に来た場合には全角幅に設定します。

trim-start

normal と同様に動作しますが、 CJK 全角の開始用約物文字が各行の先頭に来た場合には半角幅で設定します。

メモ: CSS テキストモジュールは、 trim-both, trim-all, auto の値も定義しています。しかし、今のところどのブラウザーでも実装されていません。.

text-spacing-trim プロパティは、日本語組版処理の要件 (JLREQ) および Requirements for Chinese text layout (CLREQ) で定義されているように、 CJK の約物文字に間隔調整/カーニングを適用し、視覚的に美しい字組みを実現します。

多くの CJK 約物文字は字体内部に空間を含んでいます。例えば、 CJK の句点や閉じ括弧には、ふつう右側に字体内部の空間があります。これは他の漢字と送り幅を一定にするためのものです。しかし、それらが横に並んでいる場合、字体内部の空間が過剰になることがあります。

text-spacing-trim を使用すると、隣接する文字間の過剰な空間（カーニング）や、テキスト行の先頭や末尾の空間を調整することができます。一般的に言えば、次の通りです。

• 全角の約物文字が全角幅に設定された場合、内部の空間が両側に設定され、それは漢字の横幅と一致します。
• 全角の薬物文字が半角幅に設定された場合、内部の空間は片方のみに設定され、もう一方の端は先頭（開始用約物文字の場合）または末尾（終端用約物文字の場合）に寄せられます。半角幅の文字は、ふつう漢字の幅の半分になります。

約物文字が 2 つ隣接している場合、間の空間は次のルールに従って縮小されます。

• 全角の開始用約物文字は、直前の文字が全角の開始用約物文字、全角の中点、全角の空白文字 (U+3000)、同等またはより大きなフォントサイズの全角の終端用約物文字、 Unicode general category "Open punctuation" Ps に所属する文字のいずれかであった場合は半角幅に設定されます。それ以外の場合は、全角幅に設定されます。
• 全角の終端用約物文字は、次の文字が全角の終端用約物文字、全角の中点、全角の空白文字 (U+3000)、同等またはより大きなフォントサイズの全角の開始用約物文字、 Unicode general category "Close punctuation" (Pe) に所属する文字のいずれかであった場合は半角幅に設定されます。それ以外の場合は、全角幅に設定されます。

text-spacing-trim = 
  <spacing-trim>  |
  auto            

<spacing-trim> = 
  space-all    |
  normal       |
  space-first  |
  trim-start   |
  trim-both    |
  trim-all     

この例では、 4 つの異なる text-spacing-trim プロパティの効果を比較しています。 4 つの同じ段落に適用することで、それぞれの視覚的な違いを確認できます。

HTML

<main>
  <div id="normal">
    <h2>normal</h2>
    <p>
      （東）、【「（東）」】。<br />
      「東」「東」「東」東東東「東」。
    </p>
  </div>
  <div id="space-all">
    <h2>space-all</h2>
    <p>
      （東）、【「（東）」】。<br />
      「東」「東」「東」東東東「東」。
    </p>
  </div>
  <div id="space-first">
    <h2>space-first</h2>
    <p>
      （東）、【「（東）」】。<br />
      「東」「東」「東」東東東「東」。
    </p>
  </div>
  <div id="trim-start">
    <h2>trim-start</h2>
    <p>
      （東）、【「（東）」】。<br />
      「東」「東」「東」東東東「東」。
    </p>
  </div>
</main>

CSS

main {
  font-family: "Yu Gothic", "YuGothic", "Noto Sans JP", "Hiragino Sans",
    "Hiragino Kaku Gothic ProN", sans-serif;
  display: grid;
  gap: 0.5em;
  grid-template-columns: 1fr 1fr;
  width: 70%;
  margin: 0 auto;
}
h2 {
  font-size: 80%;
  margin: 0;
}
p {
  font-size: 20px;
  border: 1px solid blue;
  margin: 0;
}
#normal {
  text-spacing-trim: normal;
  grid-column: 1;
  grid-row: 1;
}
#space-all {
  text-spacing-trim: space-all;
  grid-column: 2;
  grid-row: 1;
}
#space-first {
  text-spacing-trim: space-first;
  grid-column: 1;
  grid-row: 2;
}
#trim-start {
  text-spacing-trim: trim-start;
  grid-column: 2;
  grid-row: 2;
}

結果

• ic および ric の単位
• CSS テキストモジュール