bdi

설명

The HTML Bi-directional Isolation Element (<bdi>) isolates a span of text that might be formatted in a different direction from other text outside it.

This element is useful when embedding text with an unknown directionality, from a database for example, inside text with a fixed directionality.

Though the same visual effect can be achieve using the CSS rule unicode-bidi: isolate on a <span> or another text-formatting element, the semantic meaning is only conveyed by the <bdi> element. Especially, browsers are allowed to ignore CSS styling. In such a case, the text would still be correctly displayed using the HTML element, but will become garbage when using the CSS styling to convey semantic.

<bdi>요소(Bi-directional Isolation Element)는 텍스트 중 일부를 고립시키는 역할을 한다. 이렇게 고립을 시키는 이유는 포맷 방식이 다를 수도 있기 때문이다.

텍스트를 쓰는 방향이 왼쪽에서 오른쪽으로 쓰는지 오른쪽에서 왼쪽으로 쓰는지를 알 수 없는데, 이런 텍스트를 본문에 삽입하는 경우에 <bdi>요소를 쓰면 유용하다.  예를 들면 데이터베이스에서 본문을 불러와서 본문에 삽입하려고 하는데, 글자쓰는 방향을 알 수 없는 경우를 들 수 있다. 시각적으로 같은 효과를 내려면 방향을 알 수 없는 부분을 <span>으로 감싸고 CSS로 unicode-bidi: isolate라고 써주면 된다. 의미적인 부분(??)은 <bdi> 요소를 사용해서만 전달할 수 있다. 특히 브라우저에서는 CSS 스타일을 무시할 수가 있다. 이런 경우에 <bdi>요소를 써주면 문자열을 정상적으로 표시해줄 수 있다. 그러나 의미적인 부분을 전달하기 위해서 CSS 스타일을 써준다면 본문은 쓸모없게 될 것이다.(??)

Usage Context

Permitted content	Phrasing content
Tag omission	None, must have both a start tag and an end tag.
Permitted parent elements	Any element that accepts phrasing content.
Normative document	HTML 5, section 4.6.23

Attributes

Like all other HTML elements, this element has the global attributes, with a slight semantic difference: the dir attribute is not inherited. If not set, its default value is the auto which let the browser decide the direction based on the element's content.

속성

다른 HTML 요소와 마찬가지로 <bdi>요소도 전역속성을 지원한다. 다만 의미적인 부분은 약간 다르다. dir속성은 상속되지 않는다. dir속성이 지정되지 않으면 기본값은 auto가 되고, 이 경우 브라우저는 요소의 내용에 근거해서 문자를 쓰는 방향에 대해 판단을 내린다.

Examples

<p dir="ltr">This arabic word <bdi>ARABIC_PLACEHOLDER</bdi> 
is automatically displayed right-to-left.</p> 

<p dir="ltr">아라비아 문자인 <bdi>ARABIC_PLACEHOLDER</bdi>은 자동으로 오른쪽에서 왼쪽으로 출력된다.</p> 

출력결과

아라비아 문자인REDLOHECALP_CIBARA은 자동으로 오른쪽에서 왼쪽으로 출력된다.

DOM Interfaces

This element implements the HTMLElement interface.

이 요소는 HTMLElement 인터페이스를 구현하였다.

호환성

Desktop

기능	구글크롬	파이어폭스Gecko)	인터넷 익스플로러	Opera	Safari
기본적인 지원	16	10.0(10.0)	--	--	--

Mobile

기능	안드로이드	파이어폭스 모바일(Gecko)	인터넷 익스플로러 모바일	오페라 모바일	사파리 모바일
기본적인 지원	--	10.0(10.0)	--	--	--

참고

• 원본 - https://developer.mozilla.org/en/HTML/Element/bdi
• Related HTML element: <bdo>
• Related HTML properties: direction, unicode-bidi