<bdi> 和 <span dir="auto"> 之间的区别

Question

在下面的 HTML 中，<bdi> 和 <span dir="auto"> 似乎表现相同：

<p dir="auto">
<bdi>ABC תתת DEF</bdi>
אבג דהו.
</p>

<p dir="auto">
<span dir="auto">ABC תתת DEF</span>
אבג דהו.
</p>

我找不到他们表现不同的任何情况，所以我的问题是：

它们之间有什么区别吗？是否有理由使用 <bdi> 而不是 dir="auto"？特别是如果我想将它应用到我的 HTML 中已经存在的元素，例如 <a>:

<p dir="auto"><a href="http://example.com" dir="auto">http://example.com</a> טקסט טקסט</p>
<p dir="auto"><bdi><a href="http://example.com">http://example.com</a></bdi> טקסט טקסט</p>

带<bdi>的版本有一些不必要的嵌套。

如果dir="auto"完成同样的事情，那么为什么<bdi>存在？

Answer 1

来自 MDN:

Embedding the characters in <span dir="auto"> has the same effect as using <bdi>, but its semantics are less clear.

The spec also confirms 通过在两种条件（dir="auto" 属性或 <bdi> 元素）下对相同算法进行分组，行为是相同的。

换句话说：如果您要应用 dir="auto" 的元素是一个不是 <span> 的短语元素并且已经带有自己的语义（例如 <a> 在你的例子中），最好使用属性来节省 <bdi> 元素的嵌套开销。如果它是 <span>，一个本身没有语义意义的元素，您最好改用专用的 <bdi> 元素。这在原则上与 <main> 优于 <div role="main"> 或 <nav> 优于 <div role="navigation"> 相同。

<bdi> 和 <span dir="auto"> 之间的区别

difference between <bdi> and <span dir="auto">

html

bidi