개요
웹에서 다국어 지원을 하거나 특정 언어의 텍스트를 표시할 때 텍스트 방향을 제어하는 것이 중요합니다.
방향성을 올바르게 설정하지 않으면 텍스트가 엉뚱하게 보이거나 제대로 읽히지 않을 수 있습니다.
<bdi> (Bidirectional Isolation)
글자를 읽는 방향을 명시.
주로 다양한 언어가 혼합된 경우에 유용.
- 페이지의 기본 언어가 왼쪽→오른쪽(영어)인데,
- 아랍어와 같은 오른쪽→왼쪽 언어가 텍스트 안에 포함된 경우,
<bdi>를 사용하여 해당 텍스트의 방향성을 독립적으로 처리할 수 있습니다.<p>The amount is <bdi>₪1000</bdi></p>
<bdo> (Bidirectional Override)
<bdo>는 텍스트 방향을 명시적으로 설정할 때 사용.예를 들어, 텍스트가 기본적으로 왼쪽에서 오른쪽으로 읽히지만, 특정 텍스트에 대해 오른쪽에서 왼쪽으로 읽도록 하거나 그 반대로 강제로 설정할 수 있습니다.
- ltr : left to right →
- rtl : right to left ←
<p>This is <bdo dir="rtl">right-to-left text</bdo> in the middle of a sentence.</p>
둘의 차이점
<bdi>:- 동적으로 삽입되는 텍스트나 불확실한 텍스트 방향성에 대비하여 사용됩니다.
- 브라우저가 알아서 텍스트 방향성(LTR 또는 RTL)을 결정합니다.
- 주변 텍스트와 독립적으로 처리되고, 브라우저가 텍스트의 언어를 인식하여 알맞은 방향성으로 표시합니다.
<bdo>:- 내가 명시적으로 텍스트 방향성을 설정할 때 사용됩니다.
dir속성을 사용하여 LTR 또는 RTL을 직접 지정합니다.- 이 경우, 텍스트의 방향성을 강제로 변경합니다.