`text-autospace` CSS property

Baseline 2025 *

Newly available

Since November 2025, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Want more browser support for this feature? Tell us why.

* Some parts of this feature may have varying levels of support.

Learn more
See full compatibility

The text-autospace CSS 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 both ideograph-alpha and ideograph-numeric.

<autospace>

Provides more control over spacing behaviors. It accepts the keyword no-autospace, or a combination of one or more of ideograph-alpha, ideograph-numeric, and punctuation, optionally followed by insert or replace.

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 as U+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 neither insert nor replace are specified, the behavior is the same as insert.

Note: This property is additive with the word-spacing and letter-spacing properties. The amount of spacing contributed by the letter-spacing setting is added to the spacing created by text-autospace. The same applies to word-spacing.

Formal definition

Initial value	`normal`
Applies to	text elements
Inherited	yes
Computed value	as specified
Animation type	discrete

Formal syntax

text-autospace = 
  normal       |
  <autospace>  |
  auto         

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

This syntax reflects the latest standard as per CSS Text Module Level 4. Not all browsers may have implemented every part. See Browser compatibility for support information.

Examples

This example shows the difference between various values of text-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" 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>

html

<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>

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