CSS unicode-bidi 속성으로 다국어 텍스트 방향 재정의하기

CSS의 unicode-bidi 속성을 사용하면 텍스트를 재정의(override)하여 여러 언어를 지원하도록 설정할 수 있습니다. 이 속성은 특히 아랍어, 히브리어처럼 오른쪽에서 왼쪽으로(RTL) 읽는 언어와 왼쪽에서 오른쪽으로(LTR) 읽는 언어가 한 문서에 섞여 있을 때 텍스트의 표시 방향을 세밀하게 제어하는 데 유용합니다.

unicode-bidi 속성의 주요 값

bidi-override: 양방향 알고리즘을 무시하고 direction 속성에서 지정한 방향으로 텍스트를 강제로 표시합니다.
isolate: 해당 요소의 텍스트를 주변 텍스트의 방향 계산으로부터 분리(isolate)하여, 문서 전체의 양방향 레이아웃에 영향을 주지 않고 독립적으로 처리합니다.

예제

아래 예제는 direction: rtl과 함께 unicode-bidi 속성의 두 가지 값(bidi-override, isolate)을 각각 적용한 결과를 보여줍니다.

<!DOCTYPE html>
<html>
   <head>
      <style>
         p.demo1 {
            direction: rtl;
            unicode-bidi: bidi-override;
         }
         p.demo2 {
            direction: rtl;
            unicode-bidi: isolate;
         }
      </style>
   </head>
   <body>
      <h1>The unicode-bidi Property</h1>
      <p>This is demo text.</p>
      <p class="demo1">This is demo text</p>
      <p class="demo2">This is demo text</p>
   </body>
</html>

실행 결과 설명

위 코드를 실행하면 다음과 같이 동작합니다.

첫 번째 문단은 기본 설정으로 왼쪽에서 오른쪽으로 정상적으로 표시됩니다.
demo1 클래스가 적용된 문단은 bidi-override 값으로 인해 텍스트가 오른쪽에서 왼쪽으로 강제 재정의되어, 문자 순서가 역순처럼 보이게 됩니다.
demo2 클래스가 적용된 문단은 isolate 값으로 인해 텍스트가 주변 내용과 독립적으로 격리되어 처리됩니다.

정리

unicode-bidi 속성은 단독으로 사용하기보다 direction 속성과 함께 사용해야 의미가 있습니다. 다국어 웹사이트를 개발할 때 RTL 언어와 LTR 언어가 혼재된 콘텐츠를 올바르게 렌더링하려면 이 두 속성의 조합을 반드시 이해하고 있어야 합니다.