[HTML] bdi 태그 (문자 정렬 문제 해결)

728x90

HTML <bdi> 태그란?

<bdi> (Bi-Directional Isolation) 태그는 양방향(Bi-Directional, Bidi) 텍스트를 독립적으로 표시하기 위해 사용됩니다. 즉, 다른 언어의 텍스트 방향이 섞일 때 원래 문장의 방향을 유지하면서 해당 부분만 올바르게 정렬하도록 합니다.

주요 특징

양방향 텍스트의 혼합 표시 문제 해결
- LTR(Left-To-Right, 왼쪽에서 오른쪽) 언어(영어, 한국어)와 RTL(Right-To-Left, 오른쪽에서 왼쪽) 언어(아랍어, 히브리어)가 섞일 때 발생하는 텍스트 정렬 문제를 방지합니다.
자동으로 텍스트 방향을 감지
- <bdi> 안의 텍스트 방향이 자동으로 결정되며, 문장의 나머지 부분에는 영향을 주지 않음.
기본 텍스트 흐름 유지
- <bdi> 태그를 사용하면 문서의 기본 방향이 유지되면서 특정 부분만 독립적으로 처리됩니다.

사용 예시

💡 <bdi> 없이 RTL 텍스트 사용 (문제 발생)

<p>사용자 목록:</p>
<ul>
  <li>홍길동</li>
  <li>John</li>
  <li>أحمد</li>  <!-- 아랍어 (RTL) -->
</ul>

출력 결과:

✅ 홍길동
✅ John
❌ 아랍어 이름이 오른쪽으로 이동하면서 목록 정렬이 깨질 수 있음

💡 <bdi> 태그 사용 (문제 해결)

<p>사용자 목록:</p>
<ul>
  <li><bdi>홍길동</bdi></li>
  <li><bdi>John</bdi></li>
  <li><bdi>أحمد</bdi></li> <!-- 아랍어 (RTL) -->
</ul>

✅ 이제 목록의 정렬이 올바르게 유지됨
✅ 각 언어가 원래 방향대로 표시됨

<bdi> 태그와 <bdo> 태그의 비교

태그	설명
<bdi>	내부 텍스트의 방향을 자동 감지하고, 주변 텍스트에 영향을 주지 않음
<bdo>	지정한 dir 속성을 강제로 적용하여 텍스트 방향을 지정

<p>이름: <bdi>أحمد</bdi></p> <!-- 아랍어 방향 유지 -->
<p>이름: <bdo dir="ltr">أحمد</bdo></p> <!-- 강제로 LTR 적용 -->

<bdi>: 자동으로 방향 감지 → "이름: أحمد" (오른쪽 정렬됨)
<bdo dir="ltr">: 강제로 LTR 적용 → "이름: dحمأ" (문자 순서가 깨짐)