<bdi>

You’re reading the English version of this content since no translation exists yet for this locale. Help us translate this article!

HTML <bdi> 요소는 바깥 텍스트의 방향과 다르게 포맷될수 있는 일정 범위의 텍스트를 분리시킵니다.

이 요소는 포함된 텍스트의 방향을 알수 없을떄 내부의 텍스트의 방향이 고정되도록 하는데에 유용합니다.

CSS 규칙(unicode-bidi: isolate를 <span>이나 다른 텍스트 포맷 요소에 사용)을 사용해서 같은 시각적 효과를 이룰수도 있지만, 시멘틱 의미는 <bdi> 요소를 통해서만 전달됩니다. 특히, 브라우저가 CSS 스타일링을 무시할수도 있습니다. 이러한 경우, CSS 스타일링을 통해 시멘틱을 전달하는것은 쓸모없게 되고, HTML 요소를 사용하는것이 옳게 됩니다.

속성

다른 모든 HTML 요소들처럼 이 요소도 전역 속성을 포함하지만, 약간의 시멘틱 차이가 있습니다: dir 속성은 상속받지 않습니다. 이 속성이 설정되어있지 않으면, 기본값은 auto이며, 요소의 내용에 기반하여 브라우저가 방향을 결정합니다.

예제

Suppose you want to list the winners of a competition:

<ul>
 <li><span class="name">Henrietta Boffin</span> - 1st place</li>
 <li><span class="name">Jerry Cruncher</span> - 2nd place</li>
</ul>

This works fine as long as the names are LTR, but when you insert an RTL name, then 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>

You can use <bdi> to instruct the browser to treat the name in isolation from its embedding context:

<ul>
 <li><bdi class="name">اَلأَعْشَى</bdi> - 1st place</li>
 <li><bdi class="name">Jerry Cruncher</bdi> - 2nd place</li>
</ul>

This arabic word REDLOHECALP_CIBARA is automatically displayed right-to-left.

명세

명세 상태 주석
HTML Living Standard
The definition of '<bdi>' in that specification.
Living Standard  
HTML5
The definition of '<bdi>' in that specification.
Recommendation  

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
bdiChrome Full support 16Edge No support NoFirefox Full support 10IE No support NoOpera Full support 15Safari No support NoWebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 10Opera Android Full support 14Safari iOS No support NoSamsung Internet Android Full support 1.0

Legend

Full support  
Full support
No support  
No support

같이 보기