CSS의 unicode-bidi 속성은 direction 속성과 함께 사용하여 텍스트의 양방향(bidirectional) 렌더링 방식을 제어합니다. 아랍어, 히브리어처럼 오른쪽에서 왼쪽으로 읽는 RTL(Right-to-Left) 언어를 다룰 때 특히 유용하며, 여러 언어가 섞인 콘텐츠의 텍스트 흐름을 세밀하게 조정할 수 있습니다.
기본 문법
unicode-bidi: normal | embed | isolate | bidi-override | isolate-override | plaintext;
주요 속성값
- normal – 기본값이며, 추가적인 임베딩 수준을 만들지 않습니다.
- embed – 인라인 요소에 대해 추가 임베딩 수준을 엽니다.
- bidi-override – 유니코드 양방향 알고리즘을 무시하고
direction속성에 지정된 순서대로 문자를 강제로 재정렬합니다. - isolate – 요소의 내용을 주변 텍스트와 격리하여 방향이 서로 영향을 주지 않도록 합니다.
- isolate-override – 격리 기능과 강제 재정렬 기능을 모두 적용합니다.
- plaintext – 부모 요소의 방향이나
direction값을 무시하고 유니코드 규칙에 따라 방향을 결정합니다.
예제
아래 예제는 direction: rtl과 함께 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>unicode-bidi 속성</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>참고 사항
unicode-bidi 속성은 단독으로 사용할 수 없으며 반드시 direction 속성과 함께 설정해야 의미가 있습니다. 일반적인 한글·영문 문서에서는 기본값인 normal을 그대로 두면 되지만, 다국어 콘텐츠나 RTL 언어 지원이 필요한 프로젝트에서는 isolate 또는 bidi-override 값을 활용해 텍스트 표시 순서를 정확하게 제어할 수 있습니다.