css - 如何测试CSS方向: auto as an english speaker

Question

我发现我可以应用属性 direction: rtl 来强制从右到左对齐:

https://www.w3.org/International/questions/qa-html-dir

它还提到 HTML5 支持 direction: auto，基于用户语言。因为我只懂英语，所以我可以将浏览器设置为在 chrome 配置中强制使用 RTL 布局:

chrome://flags/#force-ui-direction

但是，除非我编辑顶级元素的 css 使其具有属性:direction rtl，否则我正在处理的页面布局没有变化。如果您定义:

direction: auto

您的页面会根据用户选择的语言自动使用 rtl 或 ltr 元素对齐方式？如果是这样，为什么它在我上面的测试中不起作用？

如果不是，我如何有选择地包含 direction: rtl ONLY 如果用户语言是 rtl 语言？

Answer 1

我能想到的最好的方法是使用 Javascript 来确定显示语言。如果你 checkout this post它描述了可以为您提供所需信息的谷歌语言 API。

检测到语言和类型后，我会向您的 body 元素添加一个类，您的 css 会监听该类以更改 ltr 或 rtl。