如何测试 CSS 方向：汽车作为英语母语者

Question

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

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

chrome://flags/#force-ui-方向

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

，我的假设是否正确？

direction: auto

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

如果不是，我如何有选择地包含方向：仅当用户语言是 rtl 语言时才包含？

Answer 1

我能想到的最好的方法是使用 Javascript 来确定显示语言。如果您查看 this post，它描述了一种 google 语言 api，可以为您提供所需的信息。

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

Answer 2

要使方向自动作用于文本，您可以使用另一个 CSS 属性和 direction，即 unicode-bidi:

* { /* Or what selector you need */
  unicode-bidi: plaintext;
  text-align: start; /* Align text automatically left/right*/
}

但这只适用于文本的非元素方向！

使用这将强制用户输入 <input> text-align，例如，如果用户尝试输入英文文本，这将像 text-align: left 一样工作，而对于阿拉伯语输入则像设置 text-align: right.

How to test CSS direction: auto as an english speaker