Свойство CSS `text-autospace`

Свойство text-autospace CSS позволяет задавать пробелы между китайскими, японскими и корейскими (CJK) символами и символами других письменностей.

Синтаксис

text-autospace: normal;
text-autospace: no-autospace;
text-autospace: ideograph-alpha;
text-autospace: ideograph-numeric;
text-autospace: punctuation;
text-autospace: insert;
text-autospace: replace;
text-autospace: ideograph-alpha ideograph-numeric punctuation;
text-autospace: ideograph-alpha ideograph-numeric;
text-autospace: ideograph-alpha ideograph-numeric insert;
text-autospace: auto;

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

Значения

normal

Задает поведение по умолчанию: автоматически добавлять пробелы между символами CJK и символами других письменностей, а также вокруг знаков препинания. Это значение действует так же, как одновременное применение ideograph-alpha и ideograph-numeric.

<autospace>

Позволяет точнее управлять поведением пробелов. Принимает ключевое слово no-autospace или сочетание одного или нескольких значений из ideograph-alpha, ideograph-numeric и punctuation, за которым может следовать insert или replace.

no-autospace

Отключает автоматическую вставку пробелов между символами CJK и символами других письменностей.

ideograph-alpha

Добавляет пробелы только между идеографическими символами (например, катаканой и ханом) и неидеографическими буквами (например, латинскими). Не добавляет пробелы между идеографическими символами и неидеографическими цифрами.

ideograph-numeric

Добавляет пробелы только между идеографическими символами (например, катаканой и ханом) и неидеографическими цифрами (например, латинскими). Не добавляет пробелы между идеографическими символами и неидеографическими буквами.

punctuation

Добавляет неразрывные пробелы вокруг знаков препинания в соответствии с типографскими правилами конкретного языка.

insert

Добавляет указанные пробелы, только если между идеографическими символами и символами других письменностей нет существующих пробелов.

replace

Заменяет существующие пробелы (например, U+0020) между идеографическими символами и символами других письменностей указанными пробелами.

auto

Позволяет браузеру выбрать типографически подходящие пробелы. Их размер может различаться в разных браузерах и на разных платформах.

Формальное определение

Формальный синтаксис

text-autospace = 
  normal |
  <autospace> |
  auto

Примеры

В этом примере показаны различия между различными значениями text-autospace. Выберите значение в раскрывающемся списке, чтобы посмотреть, как оно влияет на интервалы в тексте.

<form>
  <label for="autospace">Choose value for <code>text-autospace:</code></label>
  <select name="autospace" id="autospace">
    <option selected value="no-autospace">no-autospace</option>
    <option value="normal">normal</option>
    <option value="ideograph-alpha">ideograph-alpha</option>
    <option value="ideograph-numeric">ideograph-numeric</option>
  </select>
</form>
<div class="unsupported">
  <code>text-autospace</code> is not supported in your browser.
</div>

<main>
  <figure class="no-autospace">
    <figcaption>
      <code>
        text-autospace: <span id="autospace-value">no-autospace</span>;
      </code>
    </figcaption>
    <div>
      <p>HTML超文本标记语言</p>
      <p>42四十二</p>
    </div>
  </figure>
</main>

.no-autospace {
  text-autospace: no-autospace;
}
.auto {
  text-autospace: auto;
}
.normal {
  text-autospace: normal;
}
.ideograph-alpha {
  text-autospace: ideograph-alpha;
}
.ideograph-numeric {
  text-autospace: ideograph-numeric;
}

figure {
  margin: 1rem;
  div {
    font-size: 2rem;
    padding: 1rem;
    font-family: sans-serif;
    border: tomato solid 1px;
  }
  p {
    margin: 0;
  }
}
main {
  max-width: max-content;
}
@supports not (text-autospace: normal) {
  form {
    display: none;
  }
  .unsupported {
    color: red;
  }
}
@supports (text-autospace: normal) {
  .unsupported {
    display: none;
  }
}

const chose = document.querySelector("#autospace");
const fig = document.querySelector("figure");
const codeValue = document.querySelector("#autospace-value");
chose.addEventListener("change", (e) => {
  fig.className = e.target.value;
  codeValue.innerText = e.target.value;
});

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

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

См. также

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