Question

假设我们有多个span文本元素（2个或更多），并且'dir'指定为RTL：

<div dir="rtl">
<span>First-Element</span>
<span>Second-Element</span>
<span>Third-Element</span>
</div>

我们希望它们从右到左依次出现：

Third-Element Second-Element First-Element

如果文本元素具有RTL方向性（来自阿拉伯语，波斯语，希伯来语等的文本），或者它们与RTL元素交错，则可以正常工作：

<div dir="rtl">
<span>First-Element-RTL</span>
<span>Second-Element-RTL</span>
<span>Third Element-RTL</span>
</div>

或：

<div dir="rtl">
<span>First-Element-LTR</span>
<span>Second-Element-RTL</span>
<span>Third Element-LTR</span>
</div>

但是如果所有元素都具有LTR方向性，则使用语言的顺序，我们得到不需要的排序：

First-Element Second-Element Third-Element

我们如何实现元素的固定顺序，而不依赖于元素中文本的方向性 - 也就是说，技术（无论是html还是css）应该对单个文本元素的语言无动于衷。

当span元素的内容可变并由用户提供时会出现此问题，例如可以使用RTL语言或英语的用户名。

修改

我必须强调的是，我们所讨论的是相对于彼此排序文本跨度，而不是改变文本本身的流量，所以'英文文本'应该按原样显示，而不是'txeT hsilgnE'。

修改

这是一个简单的HTML细分，用于测试Jukka提供的答案。这表现为右侧对齐的“bar foo”。它显示（至少在我的浏览器上）容器级别不需要{ unicode-bidi: bidi-override; }来获得所需的结果。

<html>
<head>
    <style type="text/css">
        span { unicode-bidi: embed; }
    </style>
</head>
<body>
<div dir="rtl">
<span>foo</span>
<span>bar</span>
</div>
</body>
</html>

Answer 1

div { unicode-bidi: bidi-override; }
span { unicode-bidi: embed; }

第一条规则强制一个特定的方向，在本例中是在HTML中设置的RTL，它会覆盖文本的固有方向性（取决于字符的方向性）。

第二个规则使每个span元素成为方向性的“自治岛”，即其内部的文本方向不受封闭元素的影响，只影响元素本身上设置的属性和字符的方向性属性。所以例如拉丁字母从左到右，希伯来语和阿拉伯字母从右到左。

但是有一个问题。如果span包含，例如“foo（2）”，它将呈现为“（foo（2”。原因是该元素具有RTL方向，从父节点继承。虽然{{ 1}}属性以及dir属性仅设置弱方向性（这不影响例如具有强LTR方向性的拉丁字母序列），它影响例如涉及括号的情况。括号具有方向性模糊，因此根据弱方向性设置对待它们。

我担心这部分使用没有简单的方法。您当然可以根据您期望的最常见情况来设置direction元素的方向性，例如span如果您希望文本主要使用英语。但是对于真正的解决方案，您需要根据内容的语言控制弱方向性设置。

Answer 2

如果您需要以LTR顺序排列<span>个元素，我只需从父dir="rtl"中删除<div>声明，或者如果它设置在更高的父级别，使用<div>覆盖dir="ltr"。

覆盖它

您也可以通过CSS强制孩子：

div {direction: ltr;}
div span {direction: ltr;}

Answer 3

以下是否达到了您的目标？请原谅，如果我误解了你的问题，那就是问号。

[dir="rtl"] > span {
    display: inline-block;
}

Jsfiddle sample

Answer 4

如果您仍想在每个字符串上使用LTR，请将span元素替换为table和td元素。是的，你通常应该避免使用像这样的单行表（人们告诉你改为使用div或span）但是浏览器之间没有其他任何东西似乎一致，如果是{{1}在HTML table设置为dir的情况下，RTL中的td元素将使用右侧的第一个元素进行渲染，其中第二个元素位于左侧，依此类推，即使连续的tr个元素的td设置为dir。另一方面，设置为LTR的连续LTR元素在非IE浏览器中呈现时似乎是作为单个元素聚集在一起，如果在它们之外恰好有一些从左到右的文本。

span

Here's how it renders in IE9, Firefox 27, and Chrome 33。我将图像直接放在这里，但我没有足够的声誉这样做。

出于某种原因，<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html dir="rtl">  <head> <style type="text/css"> table.ltrCells { border-collapse: collapse; /* Removes extra borders */ display: inline-table; /* Keeps the table from appearing on its own line. */ vertical-align: bottom; /* Lines up the table text with previous and next text. */ } table.ltrCells tbody tr td { padding-bottom: 0px; /* If not 0, text before and after the table gets pushed down. */ } </style> <title>Tester</title> </head> <body> <span dir="rtl">Here's some stuff before</span> <table class="ltrCells"> <tr> <td dir="ltr">first</td> <td dir="ltr">(Two) Second.</td> <td dir="ltr">שלישי) שלוש)</td> <td dir="ltr">ארבעה</td> <td dir="ltr">5</td> <td dir="ltr">(שישית Six)</td> </tr> </table> <span dir="rtl">and some stuff after.</span> </body> </html>之前和之后的span元素必须有table，否则它们会在表格的错误一侧呈现。

订购独立于文本方向性的跨度元素

4 个答案: