The text-autospace CSS property allows you to specify the space applied between Chinese/Japanese/Korean (CJK) and non-CJK characters.

Syntax

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;

Values

normal

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.

Formal definition

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 of text-autospace. Try selecting a value from the drop-down box to see how it affects the spacing in the text.

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

Specifications

Browser compatibility

See also

• text-spacing-trim
• ic and ric units
• CSS Text module