Skip to content

Lack of support for applying extra spacing between Chinese/Japanese and Western text #401

Open

Description

@xfq

This issue applies to Chinese and Japanese.

In Chinese and Japanese composition, it is usually recommended to apply extra spacing between Chinese/Japanese han/kana characters and certain other types of text to make the text read better. The gap is typically used between han/kana characters and Latin letters, numbers, or punctuation, and should be smaller than an ASCII space would be.

ASCII spaces are not only too wide, but they spoil the semantics and behaviour of the text.

More:

The GAP (original text)

Currently, browsers do not support this feature, so content authors have to work around the problem by adding spaces manually, but because this produces too wide spaces and inserts characters that are not appropriate into the text, many texts don't have any gap between these runs of text.

In the css-text specification, text-autospace is intended to create 1/8em extra spacing between runs of ideographs/kana and Western letters/numerals.

In order to remediate texts where ASCII spaces have been used, the CSS text-autospace property also has a replace value, which will (without changing the underlying code points) replace the spaces with an appropriately-sized gap during the rendering of the text.

By default space should be added (the default value is normal, which is equivalent to ideograph-alpha and ideograph-numeric.)

Gecko, Blink, and Webkit browsers all fail to add the extra spacing between runs of ideographs and non-ideographic letters.

Priority

Given that, though not ideal, people have been forced to omit the gap or (worse) use ASCII spaces, this is prioritised as an advanced issue, however this is really a basic feature of Chinese/Japanese text, and so needs to be addressed.

Tests & results

text-autospace: ideograph-alpha ideograph-numeric; creates a thin gap between runs of han characters and both ASCII letters and digits in Chinese

text-autospace: ideograph-alpha ideograph-numeric; creates a thin gap between runs of kanji and both romaji letters and digits in Japanese

text-autospace: ideograph-alpha ideograph-numeric; creates a thin gap between runs of hiragana and both romaji letters and digits in Japanese

text-autospace: ideograph-alpha ideograph-numeric; creates a thin gap between runs of katakana and both romaji letters and digits in Japanese

text-autospace: ... replace; replaces ASCII spaces with a thin gap when adding text spacing in Japanese

Action taken

Bug reports: Gecko 1 • Gecko 2 • Blink 1 • Blink 2 • WebKit 1 • WebKit 2 • WebKit 3

GH issues: spacing

Outcomes

As of version 18.4 WebKit browsers now support text-autospace: ideograph-alpha|ideograph-numeric, but they don't yet support the replace keyword. This is problematic because, many websites currently use a space to separate these items, even though it is not ideal.

WebKit also applies no-autospace as the default, contrary to the CSS spec, which expects the value to be normal. There is an ongoing discussion about whether the default behaviour should add or not add gaps.

Gecko is considering support but it is not yet available.

The Blink issue has been marked as fixed on Jul 10, 2025. It is not yet available on Blink browsers.

Unicode proposal: EAST ASIAN AUTO SPACING (Proposal)

text-autospaceBlinkGeckoWebKit
ideograph-alpha❌❌✅
ideograph-numeric❌❌✅
replace❌❌❌

Activity

  1. added
    gapThe first comment in this issue is read by the gap-analysis document.
    doc:clreqUsed for gap analysis (only) to indicate target document.
    on Oct 17, 2021
  2. xfq commented on Oct 17, 2021

    @xfq
    MemberAuthor

    The first comment in this issue contains text that will automatically appear in one or more gap-analysis documents as a subsection with the same title as this issue. Any edits made to that comment will be immediately available in the document. Proposals for changes or discussion of the content can be made in comments below this point.

    Relevant gap analysis documents include:
    Chinese • Japanese

  3. xfq commented on Oct 17, 2021

    @xfq
    Author
  4. macnmm commented on Oct 18, 2021

    @macnmm

    The main problem with the workaround is the lack of control in how the widths of these spaces are adjusted. For Japanese spacing, the space glyph in whatever font is likely too wide and doesn't collapse correctly when the line is compressed. For Korean, the space character is always input for word spaces, but again the width is not correct and not contextually controllable (Latin-K versus K-K can be different).

  5. r12a commented on Oct 19, 2021

    @r12a
  6. r12a commented on Oct 19, 2021

    @r12a
  7. r12a commented on Oct 19, 2021

    @r12a
    Contributor

    Btw, i think this issue probably also applies to Thai and other scripts that don't use space as a word-separator, not just C&J. And you should probably create a stub, pointing here for the Japanese gap-analysis doc, so that we don't end up duplicating work.

  8. xfq commented on Oct 20, 2021

    @xfq
    Author
  9. xfq commented on Oct 20, 2021

    @xfq
    Author
  10. xfq commented on Oct 20, 2021

    @xfq
    MemberAuthor

    Btw, i think this issue probably also applies to Thai and other scripts that don't use space as a word-separator, not just C&J. And you should probably create a stub, pointing here for the Japanese gap-analysis doc, so that we don't end up duplicating work.

    I did consider Thai at the time of writing, but because Thai do use spaces (although not as a word-separator), I didn’t write it. If you are sure that Thai also has this requirement, I can write it in this issue. Or should I create a sealreq issue?

  11. added
    x:blinkBlink needs to fix this.
    x:clreqThis affects the clreq group of languages.
    on Oct 20, 2021
  12. 3 remaining items

  13. xfq commented on Mar 27, 2023

    @xfq
    MemberAuthor

    I updated the links to reflect the refactoring of text-spacing in Feb 2023.

  14. xfq commented on Oct 16, 2023

    @xfq
    MemberAuthor

    Added a link to another Chromium issue.

  15. xfq commented on Oct 16, 2023

    @xfq
    MemberAuthor

    Added a link to another WebKit issue.

  16. moved this to Browser bug raised in Gap-analysis pipelineon Jun 20, 2024
  17. xfq commented on Jul 1, 2024

    @xfq
    MemberAuthor

    There is also a proposal in Unicode related to this: v1 v2 v3

  18. xfq commented on Dec 19, 2024

    @xfq
    MemberAuthor

    Safari added support for the text-autospace property in Technology Preview 210: https://webkit.org/blog/16406/release-notes-for-safari-technology-preview-210/

  19. xfq commented on Oct 19, 2025

    @xfq
    MemberAuthor

    The Chromium issue has been marked as fixed on Jul 10, 2025: https://issues.chromium.org/issues/40275399?pli=1

  20. xfq commented on Oct 20, 2025

    @xfq
    MemberAuthor

    The text-autospace property has just been enabled for Firefox 145, though note that not all values are implemented yet (there's no support for replace at this time).

  21. duyuang commented on Oct 20, 2025

    @duyuang
  22. xfq commented on Oct 22, 2025

    @xfq
    Author
  23. moved this from Browser bug raised to Bug fix in progress in Gap-analysis pipelineon Nov 7, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    doc:clreqUsed for gap analysis (only) to indicate target document.gapThe first comment in this issue is read by the gap-analysis document.i:spacingText spacingl:zhChinesep:advanceds:haniChinese scriptx:blinkBlink needs to fix this.x:clreqThis affects the clreq group of languages.x:geckoGecko needs to fix this.x:jpanThis affects the jlreq group of languages.x:webkitWebKit needs to fix this.

    Type

    No type

    Projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions