text-spacing-trim

<spacing-trim>

Определяет различные варианты обрезки интервалов. Доступные значения:

normal

Устанавливает символы CJK открывающей полной ширины в полную ширину в начале каждой строки. Устанавливает символы CJK закрывающей полной ширины в полную ширину в конце каждой строки или в полуширину, если они не помещаются в строке до выравнивания. Сжимает интервалы между знаками препинания.

space-all

Все символы CJK полной ширины устанавливаются в полную ширину.

space-first

Ведёт себя как normal, за исключением того, что символы CJK открывающей полной ширины устанавливаются в полную ширину в начале первой строки контейнера блока текста и в начале каждой последующей строки после явного перевода строки, например, символа новой строки.

trim-start

Ведёт себя как normal, за исключением того, что символы CJK открывающей полной ширины устанавливаются в полуширину в начале каждой строки.

Примечание: Модуль CSS Text также определяет значения trim-both, trim-all, и auto. Однако они в настоящее время не реализованы ни в одном браузере.

Свойство text-spacing-trim применяет интервалы/кернинг к знакам препинания CJK для создания визуально приятной типографики, как определено в требованиях к японскому макету текста (JLREQ) и требованиях к китайскому макету текста (CLREQ).

Многие знаки препинания CJK включают интервалы внутри глифов. Например, китайский знак препинания и закрывающая скобка CJK обычно имеют интервал внутри глифа справа, чтобы обеспечить постоянную ширину глифа, соответствующую другим идеографическим символам. Однако, когда они появляются в строке, внутренние интервалы глифов могут стать избыточными.

text-spacing-trim можно использовать для корректировки таких избыточных интервалов между соседними символами (кернинг) и в начале или конце строк текста. Общее правило:

• Если символ препинания полной ширины установлен в полную ширину, он имеет внутренние интервалы с обеих сторон и имеет полную ширину идеограммы.
• Если символ препинания полной ширины установлен в полуширину, он имеет внутренние интервалы с одной стороны только, а другая сторона примыкает к началу (в случае открывающих знаков препинания) или концу (в случае закрывающих знаков препинания). Знаки полуширины обычно имеют ширину в половину от ширины идеограммы.

Когда пары знаков препинания расположены рядом друг с другом, интервал между ними сжимается в соответствии со следующими правилами:

• Знак препинания открывающей полной ширины устанавливается в полуширину, если предыдущий символ является знаком препинания открывающей полной ширины, символом среднего двоеточия полной ширины, идеографическим пробелом (U+3000), знаком препинания закрывающей полной ширины с эквивалентным или большим размером шрифта или символом, принадлежащим категории Unicode "Открывающие знаки препинания" Ps. В противном случае он устанавливается в полную ширину.
• Знак препинания закрывающей полной ширины устанавливается в полуширину, если следующий символ является знаком препинания закрывающей полной ширины, символом среднего двоеточия полной ширины, идеографическим пробелом (U+3000), знаком препинания открывающей полной ширины с большим размером шрифта или символом, принадлежащим категории Unicode "Закрывающие знаки препинания" (Pe). В противном случае он устанавливается в полную ширину.

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

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

В этом примере сравнивается эффект четырёх разных свойств text-spacing-trim, применённых к четырём идентичным абзацам, чтобы вы могли увидеть визуальные различия между ними.

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 Text