text-autospace

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Thetext-autospaceCSS property allows you to specify the space applied between Chinese/Japanese/Korean (CJK) and non-CJK characters.

Creates the default behavior to automatically apply spacing between CJK and non-CJK characters and around punctuation. This value has the same effect as applying bothideograph-alpha andideograph-numeric.

<autospace>

Provides more control over spacing behaviors. It accepts the keywordno-autospace, or a combination of one or more ofideograph-alpha,ideograph-numeric, andpunctuation, optionally followed byinsert orreplace.

no-autospace: Disables automatic spacing between CJK and non-CJK characters.
ideograph-alpha: Adds spacing only between ideographic characters (such as Katakana and Han) and non-ideographic letters (such as Latin). It does not add spacing between ideographic characters and non-ideographic numbers.
ideograph-numeric: Adds spacing only between ideographic characters (such as Katakana and Han) and non-ideographic numbers (such as Latin). It does not add spacing between ideographic characters and non-ideographic letters.
punctuation: Adds non-breaking spacing around punctuation as required by language-specific typographic conventions.
insert: Adds the specified spacing only if there are no existing spaces between the ideographic and non-ideographic scripts.
replace: Replaces existing spacing (such asU+0020) between ideographic and non-ideographic characters with the specified spacing.

auto

Lets the browser choose typographically appropriate spacing. The spacing may vary across browsers and platforms.

Note:If neitherinsert norreplace are specified, the behavior is the same asinsert.

Note:This property is additive with theword-spacing andletter-spacing properties. The amount of spacing contributed by theletter-spacing setting is added to the spacing created bytext-autospace. The same applies toword-spacing.

Formal definition

Value not found in DB!

Formal syntax

text-autospace =
normal|
<autospace>|
auto

<autospace> =
no-autospace|
[ideograph-alpha||ideograph-numeric||punctuation]||[insert|replace]

Examples

This example shows the difference between various values oftext-autospace. Try selecting a value from the drop-down box to see how it affects the spacing in the text.

<form>  <label for="autospace">Choose value for <code>text-autospace:</code></label>  <select name="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>  <code>text-autospace</code> is not supported in your browser.</div>

html

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

css

.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;});