vuejs / vitepress

Vite & Vue powered static site generator.
https://vitepress.dev
MIT License
11.33k stars 1.83k forks source link

Font face 'Chinese Quotes' causes extra space between English letters #3790

Closed shadow-light closed 2 days ago

shadow-light commented 2 weeks ago

Describe the bug

A custom font-face was added to VitePress to fix rendering issues for quotes in Chinese, but this has inadvertently caused rendering issues in English (and possibly other languages).

Curly apostrophes are particularly affected as Can’t turns into Can’ t, because the spacing of the apostrophe is much larger in some Chinese fonts. This happens on systems that default to the SimHei local font and possibly others.

Reproduction

Add curly quotes between letters (or enable typographer for Markdown)

https://stackblitz.com/edit/vite-jhejpq?file=docs%2Findex.md,docs%2F.vitepress%2Fconfig.ts

But it will only reproduce when the system defaults to the SimHei font (Windows I think).

image

Expected behavior

Curly quotes should not take any extra space than needed.

System Info

Reproduced on Windows systems where the local font used is SimHei.

Additional context

I assume reverting this behaviour would negatively affect Chinese users, so I'll leave it to the discretion of the maintainers as to whether it should be reverted or not. It was very difficult to identify the problem though, so documenting it would at least be helpful so other users know to override the behaviour themselves.

Manually overriding --vp-font-family-base is a workaround.

Validations

brc-dd commented 2 days ago

Instead of reverting, it can be made smarter I guess. Maybe add that inside :lang(zh) selector 👀