facebook / facebook/docusaurus

Enable `text-autospace: normal` for better Japanese/Chinese rendering in CSS

Open
#11,928 5 comments 0 reactions 0 assignees View on GitHub
proposal status: needs triage
Dominant language
TypeScript
Stars
66.2k
Forks
10k
Avg merge
1d 3h
Merged PRs (30d)
52

Description

### Have you read the Contributing Guidelines on issues?

- [x] I have read the [Contributing Guidelines on issues](https://github.com/facebook/docusaurus/blob/main/CONTRIBUTING.md#issues).

### Motivation

Especially in Chinese and Japanese, `text-autospace: normal` is preferred for better looking. It has been battle-tested in not a few sites including VitePress and Rspress:

- https://developer.chrome.com/blog/css-i18n-features#inter-script_spacing_text-autospace
- https://developer.mozilla.org/docs/Web/CSS/text-autospace
- https://github.com/vuejs/vitepress/issues/4996
- https://github.com/web-infra-dev/rspress/pull/2920
- https://github.com/web-infra-dev/rspress/releases/tag/v2.0.0-rc.3

Without this, some users and AIs try to insert such spaces manually but they are too wide and prevent keywords from searched.

Without `text-autospace: normal`:

Image

Image

WIth `text-autospace: normal`:

Image

Image

Manual space insertion (you can't search for "curlが", "wgetを", "5分" any longer):

Image

Image

Do we need to bother to touch Infima to apply this change?

---

Warning: should be disabled in `

`, ``, ``, ``:

- https://github.com/vuejs/vitepress/issues/5115
- https://github.com/web-infra-dev/rspress/issues/3110
- https://github.com/web-infra-dev/rspress/pull/3254

It looks like `text-autospace` for non-han-based[^hrkt]-or-Latin scripts imposes extra rendering time overhead (~1–5%) as of now:

https://github.com/w3c/csswg-drafts/issues/12386#issuecomment-3005178363

We might need to restrict it to Chinese and Japanese for the time being:

```css
[lang]:where(:lang(zh), :lang(ja)) {
text-autospace: normal;

pre, code, samp, kbd {
text-autospace: no-autospace;
}
}

[lang]:where(:not(:lang(zh), :lang(ja))) {
text-autospace: initial;
}
```

[^hrkt]: Japanese hiragana and katakana were originally made by simplifying han/kanji unlike Korean hangul.

### Self-service

- [x] I'd be willing to do some initial work on this proposal myself.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.