3

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

<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 语言或英语。

编辑

我必须强调，我们讨论的是相对于彼此对文本跨度进行排序，而不是改变文本本身的流向，因此“English Text”应该按原样显示，而不是“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>
4

4 回答 4

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

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

第二条规则使每个span元素在方向性上成为一个“自治岛”，即其中的文本方向不受封闭元素的影响，而仅受元素本身的属性和字符的方向性属性的影响。因此，例如拉丁字母从左到右排列，希伯来字母和阿拉伯字母从右到左排列。

不过有一个问题。如果 aspan包含，比如说，“foo (2)”，它将被渲染为“(foo (2”)。原因是元素具有 RTL 方向，从父级继承。虽然dir属性，以及direction属性, 仅设置弱方向性（不影响例如具有强 LTR 方向性的拉丁字母序列），它影响例如涉及括号的情况。括号具有不明确的方向性，因此根据弱方向性设置对其进行处理。

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

于 2012-06-05T11:22:04.887 回答
0

如果它只是<span>您需要按 LTR 顺序拥有的元素，我会简单地dir="rtl"从 parent 中删除声明<div>，或者如果它设置在更高的父级别，则通过 include 使用它来覆盖<div>它dir="ltr"。

您也可以通过 CSS 将其强加给孩子：

div {direction: ltr;}
div span {direction: ltr;}
于 2012-06-05T10:28:22.977 回答
0

以下内容不能实现您的目标吗？
请原谅我误解了你的问题，因此是问号。

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

Jsfiddle 示例

于 2014-03-06T23:58:28.490 回答
-1

如果您仍想在每个字符串上使用 LTR，请将您的span元素替换为 atable和td元素。是的，您通常应该避免使用这样的单行表格（人们告诉您使用divorspan代替），但似乎没有其他东西在浏览器之间一致呈现，如果 atable在 HTML 中dir设置为RTL，则 a 中的td元素tr将被呈现第一个在右边，第二个在左边，依此类推，即使连续td的元素dir设置为LTR. 另一方面，设置为 LTR 的连续span元素在非 IE 浏览器中呈现时，如果碰巧在它们之外有一些从左到右的文本，它们似乎会作为单个元素聚集在一起。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="rtl"> <!--Direction marker in the HTML tag.-->
<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>

以下是它在 IE9、Firefox 27 和 Chrome 33 中的呈现方式。我会把图像直接放在这里，但我没有足够的声誉这样做。

出于某种原因，MUSTspan之前和之后的元素都有，否则它们将呈现在表格的错误边上。tabledir="rtl"

于 2014-03-03T18:46:26.093 回答