Свойство CSS `text-spacing-trim`

text-spacing-trim — это свойство CSS, управляющее внутренними интервалами китайских, японских и корейских (CJK) знаков пунктуации между соседними символами (кернингом), а также в начале и конце строк текста.

Синтаксис

/* Keyword values */
text-spacing-trim: normal;
text-spacing-trim: space-all;
text-spacing-trim: space-first;
text-spacing-trim: trim-start;

/* Global values */
text-spacing-trim: inherit;
text-spacing-trim: initial;
text-spacing-trim: revert;
text-spacing-trim: revert-layer;
text-spacing-trim: unset;

Значения

<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 = 
  space-all |
  normal |
  space-first |
  trim-start

Примеры

Сравнение значений text-spacing-trim

В этом примере сравнивается эффект четырёх различных свойств 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;
}

Результат

Спецификации

Совместимость браузеров

См. также

• text-autospace
• ic и ric единицы измерения
• модуль CSS Text