<bdi> 태그의 정의 및 사용법

<bdi> 태그는
주변 텍스트의 읽기·쓰기 방향과 분리되어 영향을 받지 않고,
태그 내의 텍스트는 언어의 특성에 맞게 텍스트 방향이 자동으로 지정되었음을 나타냅니다.

<bdi>는 "Bi-Directional Isolation(양방향 격리)"의 약자로 사용된 것입니다.

이 태그는 다국어 환경에서 특정 텍스트의 방향을 미리 알지 못할 때 그 텍스트의 방향을 자동으로 처리해주기 위해 사용됩니다.

많은 언어에서 텍스트는 일반적으로 왼쪽에서 배치되어 오른쪽으로 읽고 쓰지만,
일부 언어(예: 아랍어, 히브리어 등)의 경우에는 반대로 오른쪽에 배치되어 왼쪽으로 읽고 씁니다.

언어의 텍스트의 방향은 dir 속성(dir="rtl" 또는 dir="ltr")을 사용하여 브라우저가 자동으로 설정합니다.
이때, 텍스트 방향이 서로 다른 언어들로 섞여 있을 경우 텍스트 방향을 미리 알지 못하고 HTML로 작성할 경우 서식이 깨질 수 있습니다. 다음의 예제를 통해 살펴보겠습니다.

예제

HTML 
<ul>
    <li>글쓴이 <span class="name">홍길동</span>: 12개의 게시글</li>
    <li>글쓴이 <span class="name">John Doe</span>: 18개의 게시글</li>
    <li>글쓴이 <span class="name">أحمد</span>: 23개의 게시글</li> <!-- 👈 아랍어가 사용되었습니다. -->
</ul>
실제 적용된 모습

예제에서 글쓴이 홍길동, John Doe는 사용된 텍스트의 언어가 왼쪽에서 오른쪽으로 배치되어 쓰거나 읽은 한국어와 영어입니다. 하지만, 글쓴이 أحمد는 사용된 언어는 아랍어인데, 오른쪽에서 왼쪽으로 배치되는 언어입니다.

브라우저는 이를 처리하기 위해서 유니코드 양방향 알고리즘(Unicode Bidirectional Algorithm)을 구현합니다. 이 알고리즘을 완벽히 이해하면 좋지만 이해하지 못하더라도, 실제 적용된 모습을 보면 주변 텍스트와 읽기·쓰기 방향이 다른 아랍어는 서식이 깨져 보이는 것을 알 수 있습니다.

<bdi> 태그를 사용하면 이러한 현상을 미리 방지할 수 있습니다.

<bdi> 태그는 주변의 텍스트가 왼쪽에서 오른쪽으로 배치되거나, 혹은 반대인 오른쪽에서 왼쪽으로 배치되거나 상관없이 이 태그 내의 텍스트는 이 주변의 텍스트의 양방향과 격리(Bi-Directional Isolation)되어 처리하도록 지시합니다. 이는 두 가지 방식으로 작동합니다.

  • <bdi> 태그에 포함되어 있는 텍스트의 방향성은 주변 텍스트의 방향성에 영향을 주지 않습니다.
  • <bdi> 태그에 포함되어 있는 텍스트의 방향성은 주변 텍스트의 방향성에 영향을 받지 않습니다.

그럼 위 예제를 <bdi> 태그를 사용해서 다시 적용해 보겠습니다.

HTML 
<ul>
    <li>글쓴이 <bdi class="name">홍길동</bdi>: 12개의 게시글</li>
    <li>글쓴이 <bdi class="name">John Doe</bdi>: 18개의 게시글</li>
    <li>글쓴이 <bdi class="name">أحمد</bdi>: 23개의 게시글</li>
</ul>
실제 적용된 모습

<bdi> 태그를 사용해 아랍어 텍스트가 올바르게 표시되도록 했습니다. 이로 인해 아랍어 텍스트가 다른 언어들과 섞여 있을 때 서식이 깨지지 않고, 각 언어의 방향에 맞게 올바르게 표시됩니다.

<bdi> 태그의 실제 활용과 장점

<bdi> 태그는 다음과 같은 상황에서 사용하면 좋습니다.

다국어 환경에서 텍스트 방향이 혼합되는 경우

다양한 언어가 혼합된 콘텐츠에서 텍스트의 방향이 서로 달라서 서식이 깨질 수 있습니다.
이때 <bdi> 태그는 텍스트 방향을 독립적으로 처리하여 서식을 안정적으로 유지할 수 있습니다. 예를 들어, 한국어와 아랍어가 섞인 콘텐츠에서 아랍어 부분이 오른쪽에서 왼쪽으로 읽히는 방식으로 자동으로 처리됩니다.

특정 텍스트에 사용되는 언어의 방향성을 미리 알 수 없는 경우

웹 페이지에서 외부 사용자가 입력한 텍스트나 데이터(예: 사용자 이름, 코멘트 등)가 다국어로 제공될 때, 그 텍스트의 방향을 미리 알 수 없는 경우가 많습니다. 이럴 때 <bdi> 태그를 사용하면, 텍스트에 사용되는 언어의 특성에 맞게 방향을 자동으로 설정할 수 있습니다.

동적으로 생성된 콘텐츠에서의 텍스트 방향 처리

동적으로 생성되는 콘텐츠나 외부에서 받아오는 데이터를 표시할 때, 텍스트의 방향을 미리 알 수 없거나 사용자가 다양한 언어를 입력하는 경우가 많습니다. 이런 경우에도 <bdi> 태그를 사용하여 각 텍스트의 방향을 정확하게 처리할 수 있습니다.

다국적 사용자들을 대상으로 하는 웹사이트

여러 국가의 사용자가 이용하는 사이트에서는 다양한 언어가 사용되므로, 텍스트의 방향을 자동으로 맞추는 기능이 중요합니다. <bdi> 태그는 이런 웹사이트에서 텍스트가 혼합된 상황에서도 서식이 깨지지 않도록 도와줍니다.

속성

<bdi> 태그는 모든 전역 속성을 사용할 수 있지만, 그 중에서 dir 속성은 일반적인 방식과 다르게 동작합니다.

dir 속성은 기본값이 auto로 설정되어 있어, 부모 요소로부터 값이 상속되지 않습니다. 즉, dir 속성에 rtl 또는 ltr 값을 명시하지 않으면, 브라우저는 <bdi>의 텍스트 내용에 따라 적절한 방향성을 자동으로 결정합니다.

기술적인 문법 요약

bdi 태그의 구문 형식
암시적인 role 속성 값 generic
허용된 role 속성 값 모두(Any)

주의할 점

dir 속성에는 auto 값이 있습니다. dir="auto"를 사용하면 브라우저가 해당 태그 내의 텍스트를 자동으로 감지해서 텍스트의 방향을 자동으로 설정합니다.

HTML 
<ul>
    <li>글쓴이 <bdi class="name">أحمد</bdi>: 23개의 게시글</li>
    <li>글쓴이 <span class="name" dir="auto">أحمد</span>: 23개의 게시글</li>
</ul>
실제 적용된 모습

하지만, <bdi> 태그를 사용해야 하는 곳에 이 태그 대신에 dir="auto"를 사용하지 말아야 합니다. 화면에 표시되는 것은 같은 효과를 갖지만, <bdi> 태그와 비교할 때 dir="auto"는 의미론적 측면에서 덜 명확합니다.

브라우저 호환성

bdi 태그의 브라우저 호환성
태그
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
<bdi> 16 79 10 6

명세서

bdi 태그의 명세서 사양
명세서 사양
<bdi> HTML
#the-bdi-element

참고문헌

같이 보기