Set `lang` attribute to language labels

[tats-u]

Describe the bug

lang attibute to language labels in the language switcher (文_A) makes the shape of each han correct in all system locales.

If you vary the value of lang, you will get:

🇯🇵简体中文 繁體中文 日本語
🇨🇳简体中文 繁體中文 日本語
🇹🇼简体中文 繁體中文 日本語
🇭🇰简体中文 繁體中文 日本語
🇰🇷简体中文 繁體中文 日本語

• The first stroke of 文 and 語
• 骨 in 體
• 糸 in 繁

Without that attribute, the forms in the system locale language are used. (e.g. If your OS is Japanese, all han where lang is non-CJK are set to Japanese shapes)

Reproduction

Visit a site with i18n using VitePress (at least 2 of Japanese, Simplified Chinese, and Traditional Chinese exist):

• https://vuejs.org/
• https://vite.dev/
• https://ja.vuejs.org/
• https://ja.vite.dev/

1. Analyze tags wrapping language labels
2. Determine whether Each han in each CJK language is displayed as the expected/correct form (except for some environment, e.g. Windows + Firefox (the OS locale is prioritized))

Wrong:

Expected behavior

1. lang attribute (e.g. lang=zh-CN or lang=ja) is added to one of ancestor tags of each language label
2. Each han is displayed as the correct/expected form

Correct:

Set the correct lang attribute values to Simplified/Traditional Chinese labels:

↓Note: Japanese 文 is prioritized due to system-ui and ui-sans-serif, so this is not ideal:

(sans-serif instead of them will fix the shape of 文)

System Info

N/A

Additional context

No response

Validations

• Check if you're on the latest VitePress version.
• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[brc-dd]

Fixed the first point in f0b29d7. Though vuejs.org sites use a different theme, and it likely won't be updated till vp reaches v2.

For the second one, I'm not fully sure if we should move sans-serif before the system ones. Generally, people prefer things to be rendered like other native apps. Also, using sans-serif doesn't guarantee anything; someone might have customized their browser font too.

[tats-u]

Fixed the first point in f0b29d7. Though vuejs.org sites use a different theme, and it likely won't be updated till vp reaches v2.

Thank you for the first aid.

f0b29d7#diff-5a628d1968485980dfc86e06a4a9ed3ed19a912261045f65d3e343e57ad91a97R29

I think lang: value.lang should be lang: value.lang ?? key to provide a fallback. (e.g. ko-KR can be ko because ko-KP is very rare in the internet and those people in KP cannot use GitHub in the first place)

Generally, people prefer things to be rendered like other native apps.

Windows Japanese UI font (Yu Gothic UI) is a very peculiar font. Also it is too condensed and not versatile.

w3c/csswg-drafts#11074
w3c/csswg-drafts#3658 (comment)

The default CJK sans-serif font in recent Chromium-based browsers in Windows is Noto Sans CJK. (In this screen shot, an equivalent font Source Han Sans VF is used instead)

This part in https://ja.vuejs.org/ does not use system-ui or ui-sans-serif. Only sans-serif is used for Japanese part.

The other CJK Windows fonts seem to have UI (condensed) variants. (e.g. Microsoft YaHei UI)

• Apple devices: -apple-system & BlinkMacSystemFont are the best and the same as system-ui. If an user disliked it, s/he wouldn't have bought their device.
• Linux-based: can expect Noto Sans CJK in major distros. Both system-ui and sans-serif should be same.
• Windows: sytem-ui might look too condensed. Be careful!

GitHub combines the Apple system font, sans-serif, and some Latin-only fonts.

Also, using sans-serif doesn't guarantee anything

It guarantees that the font is one targeting at the language designated by lang attribute. A Japanese font is never chosen as a font for zh content. system-ui can be a foreign font if the lang and the OS language is different.

someone might have customized their browser font too.

I know not a few Japanese users have changed sans-serif from Noto Sans JP to Meiryo because they believe Meiryo is more readable. (Noto Sans CJK is sometimes said to be not so good at low-resolution displays especially in Windows) We can expect users have chosen the most readable font as sans-serif. We should not force anything for the main text as a document site.

[tats-u]

For system-ui vs sans-serif, we may have to create another issue.

[brc-dd]

I think lang: value.lang should be lang: value.lang ?? key to provide a fallback.

key can be anything and is not required to be a valid bcp 47 tag. Anyway, people should always specify lang as that will be put on the html root too and helps with other stuff like browser translation.

We can update the docs to emphasize this more. Currently, it just says optional..., maybe something along the lines of highly recommended... would work better.

---

For second, what should be the fix? Currently, we are using tailwind's default font stack. We can use primer's if that's desirable. 👀

--vp-font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans',
  Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
  'Noto Color Emoji';

Vue docs are using

Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif

[tats-u]

key can be anything and is not required to be a valid bcp 47 tag.

I see.

Anyway, people should always specify lang as that will be put on the html root too and helps with other stuff like browser translation.

Right. c.f.: https://heistak.github.io/your-code-displays-japanese-wrong/

Currently, we are using tailwind's default font stack.

Oh, so that's why.

We can use primer's if that's desirable.

From what I can see at https://primer.style/product/primitives/typography/#font-family, I think it's good enough. We can adjust Latin fonts if necessary.

--vp-font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans',
  Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
  'Noto Color Emoji';

The CJK part is Looks great as a Japanese user. You might want to ask Korean, Taiwanese, and Hong Kongnese Windows users, too. (i.e. Which is better for main text, sans-serif or system-ui (ui-sans-serif) generally speaking?)
The Latin part can be kept or changed.

[tats-u]

The font issue has been split out into #4946.

• Prefer sans-serif to system-ui in default fonts #4946

[tats-u]

This issue itself has been fixed. If you remove system-ui, all platforms including Android that changes the UI font to a non-Pan-CJK font (other than Noto Sans CJK) and Windows will be able to render Chinese text by a Chinese font as Chinese shapes.