Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

一些语言无法与浏览器语言设置同步显示 [Bug] #4853

Closed
3 tasks
DDDDD12138 opened this issue Jun 17, 2024 · 21 comments
Closed
3 tasks

一些语言无法与浏览器语言设置同步显示 [Bug] #4853

DDDDD12138 opened this issue Jun 17, 2024 · 21 comments
Labels
bug Something isn't working

Comments

@DDDDD12138
Copy link
Contributor

DDDDD12138 commented Jun 17, 2024

Bug Description

我的浏览器设置为中文,但是默认显示的却是英文内容。
例如:将浏览器语言设置为中文或日文,却默认显示为英文内容,
若设置为英文或者法文,可以正确显示对应的内容

Steps to Reproduce

  1. 将浏览器语言设置为中文
  2. 进入并刷新页面显示的为英文内容
  3. 将浏览器设置为法语
  4. 进入并刷新页面显示的为正确的法语内容

Expected Behavior

浏览器语言为中文是,默认显示为中文

Screenshots

image

Deployment Method

  • Docker
  • Vercel
  • Server

Desktop OS

Windows 10

Desktop Browser

Edge, Chrome

Desktop Browser Version

126

Smartphone Device

No response

Smartphone OS

No response

Smartphone Browser

No response

Smartphone Browser Version

No response

Additional Logs

No response

@DDDDD12138 DDDDD12138 added the bug Something isn't working label Jun 17, 2024
@Issues-translate-bot
Copy link

Bot detected the issue body's language is not English, translate it automatically.


Title: Some languages ​​cannot be displayed in sync with browser language settings [Bug]

@lloydzhou
Copy link
Contributor

Can you provide the browser version and detailed user agent information?

@DDDDD12138
Copy link
Contributor Author

Can you provide the browser version and detailed user agent information?

User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36 Edg/126.0.0.0
Edge & Chrome 126.0 version

@DDDDD12138
Copy link
Contributor Author

Can you provide the browser version and detailed user agent information?

这和浏览器版本可能没什么关系,只是在代码中 navigator.language 和 国际化 language code 并没有完全对应上,例如我上面的截图, navigator.language 为 ’zh‘ 时,并不能和代码中 ’cn‘ 匹配上,新用户显示的语言会回退到默认语言 DEFAULT_LANG = "en",还有一些语言也存在类似的情况

@lloydzhou
Copy link
Contributor

https://developer.mozilla.org/en-US/docs/Web/API/Navigator/language
image

@DDDDD12138
这个值在不同浏览器上的取值的情况可能有一些差异,所以,这里可能还需要考虑更完善一些

@Issues-translate-bot
Copy link

Bot detected the issue body's language is not English, translate it automatically.


https://developer.mozilla.org/en-US/docs/Web/API/Navigator/language
image

@DDDDD12138
There may be some differences in the value of this value on different browsers, so some more improvements may need to be considered here.

@lloydzhou
Copy link
Contributor

lloydzhou commented Jul 3, 2024

image

同时,我也注意到项目中在语言这里实际是将 language和country code混用的。

例如en是语言,cn实际是国家代码,语言应该是zh/zh-CN,台湾地区的繁体中文应该是 zh-TW
可能也需要整体的规范一下。

@Issues-translate-bot
Copy link

Bot detected the issue body's language is not English, translate it automatically.


image

At the same time, I also noticed that language and country code are actually mixed in the project.
It may also need to be standardized overall.

@DDDDD12138
Copy link
Contributor Author

DDDDD12138 commented Jul 3, 2024

https://developer.mozilla.org/en-US/docs/Web/API/Navigator/language image

@DDDDD12138 这个值在不同浏览器上的取值的情况可能有一些差异,所以,这里可能还需要考虑更完善一些

我观察到了这个区别,但同时项目中 getLanguage 方法默认 toLowerCase 返回了小写的字符,所以 #4855 这个 pr 中 lang 始终是小写的,就目前的情况,是可以解决与浏览器语言不同步的问题
image

@Issues-translate-bot
Copy link

Bot detected the issue body's language is not English, translate it automatically.


https://developer.mozilla.org/en-US/docs/Web/API/Navigator/language ![image](https://private-user-images.githubusercontent.com/1826685/345269993-2bf36cd6-4161 -4fc0-bbd4-a9b0d82b2a6b.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..BMs_RgZ-idI4R5msfBQEIp2ZAbnj0nWkhqWs4Nsl5S8)

@DDDDD12138 There may be some differences in the value of this value on different browsers, so some more improvements may need to be considered here.

I have observed this difference, but at the same time, the getLanguage method in the project returns lowercase characters by default toLowerCase, so lang in #4855 is always lowercase. As far as the current situation is concerned, it can solve the problem of being out of sync with the browser language.

@DDDDD12138
Copy link
Contributor Author

image

同时,我也注意到项目中在语言这里实际是将 language和country code混用的。

例如en是语言,cn实际是国家代码,语言应该是zh/zh-CN,台湾地区的繁体中文应该是 zh-TW
可能也需要整体的规范一下。

我注意到很多项目都存在这个问题,似乎没有比较完善方案去映射或者最佳实践,又例如香港地区和台湾地区都是以繁体为主,意味这可能不同的语言会对应同一份翻译文件

@Issues-translate-bot
Copy link

Bot detected the issue body's language is not English, translate it automatically.


![image](https://private-user-images.githubusercontent.com/1826685/345270789-cab6cf8a-b867-4e84-8062-6725e44cf90c.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOi JnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTk5Nzc3ODAsIm5iZiI6MTcxOTk3NzQ4MCwicGF0aCI6Ii8xODI2Njg1Lz M0NTI3MDc4OS1jYWI2Y2Y4YS1iODY3LTRlODQtODA2Mi02NzI1ZTQ0Y2Y5MGMucG5nP1gtQW1 6LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZ TFNBNTNQUUs0WkElMkYyMDI0MDcwMyUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0Jlgt QW16LURhdGU9MjAyNDA3MDNUMDMzMTIwWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1 cmU9MDY2YjUyZWI3YTViYmYwNjQ5MzM4MjFiMDkzODY2NGQ4MGU3YmM1NTQzMWMyMDI1Njk5NjNjNTExNGYxY2UwMyZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZ yZXBvX2lkPTAifQ.lTUL7uA6DD1pUzSa8Ri5w4H-wPQBkUoiVk9uslasEbQ)

At the same time, I also noticed that language and country code are actually mixed in the project.

For example, en is the language, cn is actually the country code, the language should be zh/zh-CN, and the traditional Chinese in Taiwan should be zh-TW.
It may also need to be standardized overall.

I noticed that this problem exists in many projects. There seems to be no relatively complete solution for mapping or best practices. For example, Hong Kong and Taiwan both use Traditional Chinese, which means that different languages ​​may correspond to the same translation document.

@lloydzhou
Copy link
Contributor

我经手的有一些项目,使用混合的策略:

  1. 如果一个语言不区分国家/地区,就使用语言本身(两个字符例如 ja)
  2. 如果一个语言区分国家和地区,就使用完整的(zh-CN/zh-TW,有的时候为了考虑文件命名之类的方便,会使用linux中locale的命名方式zh_CN/zh_TW)

@Issues-translate-bot
Copy link

Bot detected the issue body's language is not English, translate it automatically.


Some of the projects I've worked on have used a mix of strategies:

  1. If a language does not differentiate between countries/regions, use the language itself (two characters such as ja)
  2. If a language distinguishes between countries and regions, use the complete (zh-CN/zh-TW. Sometimes, in order to consider the convenience of file naming, the locale naming method zh_CN/zh_TW in Linux will be used)

@DDDDD12138
Copy link
Contributor Author

我经手的有一些项目,使用混合的策略:

  1. 如果一个语言不区分国家/地区,就使用语言本身(两个字符例如 ja)
  2. 如果一个语言区分国家和地区,就使用完整的(zh-CN/zh-TW,有的时候为了考虑文件命名之类的方便,会使用linux中locale的命名方式zh_CN/zh_TW)

感谢老哥的建议!我本想基于你的建议做一些修改。
但可能存在其他问题:lang 被存入了 localStorage,若修改 language 值:
1.对于已经修改过语言的老用户,需要额外的兼容代码以实现平滑过渡(这部分代码可以认为是一次性的)
2.对于新用户,额外的兼容代码就是冗余的
所以我依然希望把他当成一个BUG去处理,不对现有的做过多的修改

@Issues-translate-bot
Copy link

Bot detected the issue body's language is not English, translate it automatically.


I have worked on some projects using a mixed strategy:

  1. If a language does not distinguish between countries/regions, use the language itself (two characters such as ja)
  2. If a language distinguishes between countries and regions, use the complete (zh-CN/zh-TW. Sometimes, in order to consider the convenience of file naming, the locale naming method zh_CN/zh_TW in Linux will be used)

Thanks for the advice bro! I wanted to make some changes based on your suggestions.
But there may be other problems: lang is stored in localStorage. If the language value is modified:

  1. For old users who have modified the language, additional compatibility code is needed to achieve a smooth transition (this part of the code can be considered one-time)
  2. For new users, additional compatibility code is redundant
    So I still hope to treat it as a BUG and not make too many modifications to the existing one.

@lloydzhou
Copy link
Contributor

我想,这里是不是应该改成合理的方式,再针对旧数据做一下兼容?
而不是,在不合理的方案上不停的打补丁?

@Issues-translate-bot
Copy link

Bot detected the issue body's language is not English, translate it automatically.


I think, should we change this to a reasonable way and make compatibility with the old data?
Instead of constantly patching unreasonable solutions?

@lloydzhou
Copy link
Contributor

@DDDDD12138

或者使用另一个API去处理这个事情,而不是依赖字符串比较或者手工去添加一堆兼容的map

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/minimize
https://caniuse.com/?search=intl.locale (浏览器兼容性也挺好的)

可能是一个比较好的兼容处理的方案:

  1. 使用const locale = Intl.Locale(navigator.language).maximize()
  2. 判断locale.region.toLowerCase()在支持语言列表里面就使用region
  3. 如果不在,就判断locale.language是否在支持语言里面。
  4. 如果都不在,就使用默认语言

以下部分展示了不同格式的language使用Intl.Locale.minimize处理之后的格式

new Intl.Locale('zh').maximize()
-->  Intl.Locale { baseName: "zh-Hans-CN", numeric: false, language: "zh", script: "Hans", region: "CN" }

new Intl.Locale('zh-CN').maximize()
--> Intl.Locale { baseName: "zh-Hans-CN", numeric: false, language: "zh", script: "Hans", region: "CN" }

new Intl.Locale('zh-TW').maximize()
--> Intl.Locale { baseName: "zh-Hant-TW", numeric: false, language: "zh", script: "Hant", region: "TW" }

// https://answers.microsoft.com/zh-hans/microsoftedge/forum/all/edgeie%E7%AD%89%E6%B5%8F%E8%A7%88%E5%99%A8/52d04efc-6283-4d1c-a3d4-73984f8b485b
// 部分浏览器返回的格式是这样的
new Intl.Locale('zh-Hant-TW').maximize()
--> Intl.Locale { baseName: "zh-Hant-TW", numeric: false, language: "zh", script: "Hant", region: "TW" }

new Intl.Locale('zh-Hant').maximize()
--> Intl.Locale { baseName: "zh-Hant-TW", numeric: false, language: "zh", script: "Hant", region: "TW" }

@Issues-translate-bot
Copy link

Bot detected the issue body's language is not English, translate it automatically.


1.Intl.Locale

Taught, I have closed what I mentioned before

@DDDDD12138
Copy link
Contributor Author

@DDDDD12138

或者使用另一个API去处理这个事情,而不是依赖字符串比较或者手工去添加一堆兼容的map

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/minimize https://caniuse.com/?search=intl.locale (浏览器兼容性也挺好的)

可能是一个比较好的兼容处理的方案:

  1. 使用const locale = Intl.Locale(navigator.language).maximize()
  2. 判断locale.region.toLowerCase()在支持语言列表里面就使用region
  3. 如果不在,就判断locale.language是否在支持语言里面。
  4. 如果都不在,就使用默认语言

以下部分展示了不同格式的language使用Intl.Locale.minimize处理之后的格式

new Intl.Locale('zh').maximize()
-->  Intl.Locale { baseName: "zh-Hans-CN", numeric: false, language: "zh", script: "Hans", region: "CN" }

new Intl.Locale('zh-CN').maximize()
--> Intl.Locale { baseName: "zh-Hans-CN", numeric: false, language: "zh", script: "Hans", region: "CN" }

new Intl.Locale('zh-TW').maximize()
--> Intl.Locale { baseName: "zh-Hant-TW", numeric: false, language: "zh", script: "Hant", region: "TW" }

// https://answers.microsoft.com/zh-hans/microsoftedge/forum/all/edgeie%E7%AD%89%E6%B5%8F%E8%A7%88%E5%99%A8/52d04efc-6283-4d1c-a3d4-73984f8b485b
// 部分浏览器返回的格式是这样的
new Intl.Locale('zh-Hant-TW').maximize()
--> Intl.Locale { baseName: "zh-Hant-TW", numeric: false, language: "zh", script: "Hant", region: "TW" }

new Intl.Locale('zh-Hant').maximize()
--> Intl.Locale { baseName: "zh-Hant-TW", numeric: false, language: "zh", script: "Hant", region: "TW" }

受教了,我已经把之前提的关闭了

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants