HTML
Bidirectional Isolate element
(
<bdi>
) tells the browser's bidirectional algorithm to treat the text it contains in isolation from its surrounding text.
It's particularly useful when a website dynamically inserts some text and doesn't know the directionality of the text being inserted.
Bidirectional text is text that may contain both sequences of characters that are arranged left-to-right (LTR) and sequences of characters that are arranged right-to-left (RTL), such as an Arabic quotation embedded in an English string. Browsers implement the Unicode Bidirectional Algorithm to handle this. In this algorithm, characters are given an implicit directionality: for example, Latin characters are treated as LTR while Arabic characters are treated as RTL. Some other characters (such as spaces and some punctuation) are treated as neutral and are assigned directionality based on that of their surrounding characters.
Usually, the bidirectional algorithm will do the right thing without the author having to provide any special markup but, occasionally, the algorithm needs help. That's where
<bdi>
comes in.
<bdi>
element is used to wrap a span of text and instructs the bidirectional algorithm to treat this text in isolation from its surroundings. This works in two ways:
<bdi>
does not influence
the directionality of the surrounding text.
<bdi>
is not influenced by
the directionality of the surrounding text.
For example, consider some text like:
EMBEDDED-TEXT - 1st place
若
EMBEDDED-TEXT
is LTR, this works fine. But if
EMBEDDED-TEXT
is RTL, then
- 1
will be treated as RTL text (because it consists of neutral and weak characters). The result will be garbled:
1 - EMBEDDED-TEXTst place
If you know the directionality of
EMBEDDED-TEXT
in advance, you can fix this problem by wrapping
EMBEDDED-TEXT
在
<span>
采用
dir
attribute set to the known directionality. But if you don't know the directionality - for example, because
EMBEDDED-TEXT
is being read from a database or entered by the user - you should use
<bdi>
to prevent the directionality of
EMBEDDED-TEXT
from affecting its surroundings.
Though the same visual effect can be achieved using the CSS rule
unicode-bidi
: isolate
在
<span>
or another text-formatting element, HTML authors should not use this approach because it is not semantic and browsers are allowed to ignore CSS styling.
Embedding the characters in
<span dir="auto">
has the same effect as using
<bdi>
, but its semantics are less clear.
| 内容类别 | 流内容 , 措词内容 ，可触及内容。 |
|---|---|
| 准许内容 | 措词内容 . |
| Tag omission | None, both the starting and ending tag are mandatory. |
| Permitted parents | Any element that accepts 措词内容 . |
| Implicit ARIA role | 无对应角色 |
| Permitted ARIA roles | 任何 |
| DOM 接口 |
HTMLElement
|
Like all other HTML elements, this element supports the
全局属性
, except that the
dir
attribute behaves differently than normal: it defaults to
auto
, meaning its value is never inherited from the parent element. This means that unless you specify a value of either
rtl
or
ltr
for
dir
，
用户代理
will determine the correct directionality to use based on the contents of the
<bdi>
.
This example lists the winners of a competition using
<span>
elements only. When the names only contain LTR text the results look fine:
<ul> <li><span class="name">Henrietta Boffin</span> - 1st place</li> <li><span class="name">Jerry Cruncher</span> - 2nd place</li> </ul>
body {
border: 1px solid #3f87a6;
max-width: calc(100% - 40px - 6px);
padding: 20px;
width: calc(100% - 40px - 6px);
border-width: 1px 1px 1px 5px;
}
This example lists the winners of a competition using
<span>
elements only, and one of the winners has a name consisting of RTL text. In this case the "
- 1
", which consists of characters with neutral or weak directionality, will adopt the directionality of the RTL text, and the result will be garbled:
<ul> <li><span class="name">اَلأَعْشَى</span> - 1st place</li> <li><span class="name">Jerry Cruncher</span> - 2nd place</li> </ul>
body {
border: 1px solid #3f87a6;
max-width: calc(100% - 40px - 6px);
padding: 20px;
width: calc(100% - 40px - 6px);
border-width: 1px 1px 1px 5px;
}
This example lists the winners of a competition using
<bdi>
elements. These elements instruct the browser to treat the name in isolation from its embedding context, so the example output is properly ordered:
<ul> <li><bdi class="name">اَلأَعْشَى</bdi> - 1st place</li> <li><bdi class="name">Jerry Cruncher</bdi> - 2nd place</li> </ul>
body {
border: 1px solid #3f87a6;
max-width: calc(100% - 40px - 6px);
padding: 20px;
width: calc(100% - 40px - 6px);
border-width: 1px 1px 1px 5px;
}
| 规范 | 状态 | 注释 |
|---|---|---|
|
HTML 实时标准
The definition of '<bdi>' in that specification. |
实时标准 | |
|
HTML5
The definition of '<bdi>' in that specification. |
推荐 |
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
bdi
|
Chrome 完整支持 16 | Edge 完整支持 79 | Firefox 完整支持 10 | IE 不支持 No | Opera 完整支持 15 | Safari 完整支持 6 | WebView Android 完整支持 ≤37 | Chrome Android 完整支持 18 | Firefox Android 完整支持 10 | Opera Android 完整支持 14 | Safari iOS 完整支持 6 | Samsung Internet Android 完整支持 1.0 |
完整支持
不支持
<bdo>
direction
,
unicode-bidi