html - 在 ap 标签 html 内改变方向

Question

我想改变另一个标签内标签的方向，但它不能正常工作。

在下面的例子中，我想看到aslami @我写的完全一样，但结果它显示@在之前a而不是之后i。

<p style="width: 100%; direction: rtl; text-align: right;">
  مهدی
  <em style="direction: ltr; text-align: left;">aslami @</em>
  خاوری
</p>

标签： htmlcss

Answer 1

您需要添加unicode-bidi:isolate;^参考

<p style="width: 100%; direction: rtl; text-align: right;">
  مهدی
  <em style="direction: ltr;unicode-bidi:isolate; text-align: left;">aslami @</em>
  خاوری
</p>

但正如规范中所述，您应该更好地dir使用direction

因为 HTML UA 可以关闭 CSS 样式，我们建议 HTML 作者使用 HTML dir 属性和<bdo>元素来确保在没有样式表的情况下正确的双向布局。作者不应在 HTML 文档中使用方向。

---

您还应该注意dir和之间存在细微差别direction。

对于方向，我们有：

升

此值将内联基本方向（双向方向性）设置为 line-left-to-line-right。^参考

对于目录，我们有：

ltr 关键字，映射到 ltr 状态

指示元素的内容是从左到右的明确方向隔离的文本。^参考

所以 usingdir=ltr等价于direction: ltr;unicode-bidi:isolate;且不仅direction: ltr;

^{查看@Ori Drori的回答}

---

您也可以考虑bdi使用 tag 来做同样的事情：

<p style="width: 100%; direction: rtl; text-align: right;">
  مهدی
  <bdi><em style="direction: ltr; text-align: left;">aslami @</em></bdi>
  خاوری
</p>

bdi 元素代表一段文本，为了双向文本格式化^ref