CSS unicode-bidi 속성 – 유니코드 양방향 알고리즘 스타일 처리 방식 설정

`unicode-bidi` 속성의 이해

unicode-bidi 속성은
유니코드 양방향 알고리즘(Unicode Bidirectional Algorithm)에 대한 스타일 처리 방식을 재설정합니다.

이 속성은 다국어 환경에서 특정 언어의 텍스트 방향과 서식에 대한 브라우저의 처리 방식에 대한 스타일을 섬세하게 처리하기 위해 사용됩니다.

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

다양한 언어가 함께 사용된 텍스트에서 이러한 서로 다른 언어들의 읽고 쓰는 방향을 고려한 배치는 근본적으로 중요합니다. 브라우저는 이를 가급적 올바르게 처리하기 위해서 유니코드 양방향 알고리즘(Unicode Bidirectional Algorithm)을 구현합니다.

unicode-bidi 속성은 이 알고리즘으로 구현되는 텍스트의 배치에 대한 스타일을 섬세하게 재설정할 수 있도록 고안되었습니다. 이 속성을 올바르게 사용하기 위해서는 유니코드 양방향 알고리즘에 대해 완벽히 이해할 필요는 없지만(이 알고리즘은 꽤나 개념적으로 깊은 내용이 많습니다.), 어느 정도는 이해하고 있어야 합니다.

유니코드 양방향 알고리즘(Unicode Bidirectional Algorithm)

한국어나 영어 같은 왼쪽에서 오른쪽으로 읽는 언어와
아랍어나 히브리어 같은 오른쪽에서 왼쪽으로 읽는 언어가 섞여 있으면,
브라우저가 자동으로 적절한 방향을 정해줍니다. 그런데, 때때로 예상치 못한 정렬 문제가 발생할 수 있습니다.

문제 발생 상황

실제로 주변 한국어 텍스트와 읽기·쓰기 방향이 다른 아랍어는 서식이 깨져 보이는 것을 알 수 있습니다.

예제

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)을 구현합니다. 하지만 올바르게 처리될 것이라는 예상과는 다르게, 실제 적용된 모습을 보면 주변 텍스트와 읽기·쓰기 방향이 다른 아랍어는 서식이 깨져 보이는 것을 알 수 있습니다.

유니코드 양방향 알고리즘 기본 원리

유니코드 양방향 알고리즘의 기본 원리는 앞서 언급한 바와 같이 서로 다른 언어들의 읽고 쓰는 방향을 판단하기 위해서 표준 문자의 고유 코드인 '유니코드(unicode)' 별로 문자의 방향성에 대해 논리적으로 유형을 나누었습니다. 이 개념이 중요합니다. 논리적이라는 개념입니다.

강한 문자(strong characters)

강한 문자란 명확한 방향성을 가진 문자를 말합니다.

대표적으로 한국어나 영어는 명백하게 왼쪽에서 오른쪽으로 읽고 쓰는 문자이고, 반대로 아랍어와 히브리어는 명백하게 오른쪽에서 왼쪽으로 읽고 쓰는 문자입니다. 이러한 문자들은 강한 문자의 유형에 포함됩니다.

약한 문자(weak characters)

약한 문자란 방향성이 명백하지 않고 애매한 문자를 말합니다.

대표적으로 숫자(1,2,3)나 특정 기호(+, -, (, ()처럼 단독으로는 방향을 판단할 수 없는 문자입니다. 이 문자들은 주변의 강한 문자(strong characters)의 방향을 따라가는 것이 특징입니다.

중립 문자(neutral characters)

중립 문자란 주변 문맥 없이는 방향을 결정할 수 없는 문자입니다.

대표적으로 마침표(.), 느낌표(!) 등의 구두점에 해당하는 문자와 키보드의 스페이스(Space) 바를 누르면 입력되는 공백과 키보드의 탭(Tab) 키를 누르면 입력되는 탭, 그리고 엔터(Enter) 키를 누를 때 줄바꿈 등 공백 문자입니다. 이 문자들은 문장의 전체 방향에 따라 정렬되는 것이 특징입니다.

브라우저의 문자 방향성 처리 방식

브라우저는 문자를 렌더링할 때, 이 논리적인 유형을 해석하려는 순서인 강한 문자 → 약한 문자 → 중립 문자 순서로 우선순위를 정하여 표시합니다. 이 알고리즘으로 텍스트의 방향이 논리적으로 결정됩니다.

유니코드 양방향 알고리즘을 더하여

유니코드 양방향 알고리즘은 앞서 살펴본 것처럼 문자의 논리적 순서를 기준으로 방향을 결정합니다.

그러나, 이 알고리즘만으로는 항상 텍스트가 올바르게 표시되는 것은 아닙니다.
특정한 경우에는 논리적 방향과 시각적 표시가 다르게 나타날 수 있으며, 이를 해결하기 위해 추가적인 제어가 필요합니다.

명시적 서식(explicit formatting)

이를 보완하기 위해 유니코드 양방향 알고리즘에는 "명시적 서식(explicit formatting)" 개념도 함께 도입되었습니다. 이 명시적 서식을 활용하면 기본 알고리즘의 동작을 조정하여 원하는 방향으로 텍스트를 제어할 수 있습니다.

간단히 말해, 명시적 서식이란 유니코드 양방향 알고리즘의 기본 동작을 직접 수정할 수 있는 특정 제어 문자들을 의미합니다.
이러한 문자는 크게 다음 네 가지 방식으로 나뉩니다.

Marks - 특정 텍스트의 방향을 조정하는 기호
Embeddings - 다른 방향을 가진 텍스트 블록을 포함하는 방식
Isolates - 주변의 텍스 방향에 영향을 받지 않는 텍스트의 독립적인 방향 설정
Overrides - 기본 방향을 강제로 변경하는 방식

이러한 방식은 HTML의 의미론적 측면에서도 매우 중요하기 때문에 관련된 HTML의 태그(<bdi>, <bdo>)와 속성(dir)으로 구현할 수 있습니다.

CSS `unicode-bidi` 속성으로 제어하기

CSS에서 unicode-bidi 속성은 이 유니코드 양방향 알고리즘과 명시적 서식을 바탕으로 텍스트의 방향성을 제어할 수 있게 해줍니다.

이 속성을 사용하면 HTML의 기본 설정 외에도 텍스트의 방향을 섬세하게 조정할 수 있습니다. 하지만, 브라우저의 읽기 모드에서나 HTML의 의미론적 측면에서는 아무런 영향을 미치지 못하므로, 스타일만을 위한 사용은 매우 제한적이어야 합니다.

형식 구문

구문

CSS

/* 키워드 값 */
unicode-bidi: normal; /* 초깃값 */
unicode-bidi: embed;
unicode-bidi: isolate;
unicode-bidi: bidi-override;
unicode-bidi: isolate-override;
unicode-bidi: plaintext;

/* 전역 값 */
unicode-bidi: inherit;
unicode-bidi: initial;
unicode-bidi: revert;
unicode-bidi: revert-layer;
unicode-bidi: unset;

값

각 값은 텍스트의 방향을 제어하는 방식과 그 영향을 다르게 설정합니다.
값의 의미는 다음과 같습니다.

`normal`

유니코드 양방향 알고리즘과 관련하여 추가적인 수준의 방향성을 제어하지 않습니다.
초깃값입니다.

`embed`

embed 값은 인라인 수준의 요소에서만 영향을 미칩니다.

인라인 수준의 요소에서 유니코드 양방향 알고리즘과 관련하여 추가적인 수준의 방향성을 제어하기 위해 사용되는 값입니다.
즉, 브라우저에게 암묵적으로 주변의 텍스트 방향과는 구별되는 인라인 수준에서 텍스트의 방향임을 알려주는 역할을 합니다. 이 값을 사용하면 해당 요소에 대한 유니코드 양방향 알고리즘의 재정렬이 암묵적이면서도 자동으로 수행됩니다.

이때, embed는 텍스트의 배치를 재정렬하지만, 텍스트의 진행 방향(왼쪽 → 오른쪽, 오른쪽 → 왼쪽)은 변경하지 않으며, 이 방향은 direction 속성으로 설정해야 합니다.

embed는 주변 문자 순서의 영향을 받을 수 있기 때문에 이 값과 유사하지만 주면 문자 순서의 영향을 받지 않는 isolate를 사용하거나 아니면, direction 속성으로 문자의 순서를 명시적으로 설정하는 것이 권장됩니다.

`isolate`

isolate 값은 인라인 수준의 요소에서만 영향을 미칩니다.

인라인 수준의 요소에서 유니코드 양방향 알고리즘과 관련하여 주변 텍스트의 읽기·쓰기 방향과 분리되어 영향을 받지 않고, 요소 내의 텍스트는 언어의 특성에 맞게 텍스트 방향이 자동으로 지정되었음을 나타냅니다.

embed는 여전히 주변 문자 순서의 영향을 받을 수 있지만, isolate는 주변 문자 순서의 영향을 전혀 받지 않는 점이 큰 차이점입니다.

`bidi-override`

텍스트 방향성을 강제로 재정의합니다. 이 값을 설정하면, 내부에 포함된 텍스트도 방향성의 영향을 받지 않으며, 요소 내부에서 재정렬은 direction 속성에 따라 엄격하게 순서대로 이루어집니다. 양방향 알고리즘의 암묵적 부분은 무시됩니다.

`isolate-override`

이 값은 isolate의 동작을 부모 컨테이너에 적용하고, 내부 콘텐츠에 대해서는 bidi-override의 동작을 적용합니다. 요소 내부의 콘텐츠에 대한 방향성은 bidi-override처럼 강제로 변경하며, 요소의 외부는 isolate처럼 독립적 분리되어 처리합니다.

`plaintext`

이 값은 부모 요소의 양방향 상태나 direction 속성 값을 고려하지 않고, 이 요소의 방향성(유니코드 양방향 알고리즘)을 계산합니다.

형식 정의

table-layout 속성의 형식 정의
초깃값	`normal`
적용 요소	모든 요소 단, 일부 값은 인라인 수준이 아닌 요소에는 영향을 미치지 않습니다.
상속	아니오
애니메이션	아니오

예제

브라우저 호환성

unicode-bidi 속성의 브라우저 호환성
속성과 값	데스크탑 Chrome	데스크탑데스크탑 Edge	데스크탑 Firefox	Safari
`unicode-bidi`	2	12	1	1.3
`normal`	2	12	1	1.3
`bidi-override`	2	12	1	1.3
`embed`	2	12	1	1.3
`isolate`	48	79	50	11
`isolate-override`	48	79	50	11
`plaintext`	48	79	50	11

명세서

unicode-bidi 속성의 명세서 사양
명세서 사양
`unicode-bidi`	CSS Writing Modes Level 4 #unicode-bidi

CSS unicode-bidi 속성 – 유니코드 양방향 알고리즘 스타일 처리 방식 설정

`unicode-bidi` 속성의 이해