글자 방향 바꾸는 css

서론

input 태그에 padding-inline-start라는 css가 적용된 사례가 있어 무엇인지 알아보다가 다국어와 관련해 유용한 속성인 것을 알게 되었다.

아랍어나 히브리어 등은 한글과 달리 오른쪽에서 왼쪽으로 읽고 쓰는 RTL ( Right To Left ) 계통이다.
텍스트 시작지점에 여백을 주고 싶다고 해서 단순히 padding-left로 처리하게 되면 영어나 한국어 같은 LTR( Left To Right ) 계통은 문제가 없으나 RTL 계통은 UI에 문제가 발생한다. 
그럼 먼저 언어에 따라 텍스트의 방향을 바꿔줘야 하지 않을까? 라는 생각이 들었다.

 

direction

css적으로 요소의 텍스트와 inline 방향을 설정하는 속성이다. 
블록의 시작 위치가 오른쪽으로 이동하여 정렬되지만 한글과 영어 문장순서 자체는 LTR이 유지된다.

 

unicode-bidi: bidi-override;

이 속성은 개발자가 텍스트 방향을 제어할 수 있도록 한다.
bidi-override를 적용하면 css로 RTL이 적용되어 문자 순서도 강제로 반전된다.

 

중간 결론

• 브라우저는 Unicode의 "Bidi Class" 정보를 기반으로 언어의 기본 읽는 방향을 감지한다.
• 한글, 영어는 기본적으로 LTR(좌 → 우) 이므로, direction: rtl; 을 적용해도 글자 순서는 유지됨.
• direction: rtl;은 텍스트 정렬을 오른쪽으로 바꾸지만, 글자의 읽는 방향은 유지됨.
• 읽는 방향까지 바꾸려면 unicode-bidi: bidi-override;을 추가해야 함.
• 다국어 웹사이트를 만들 때direction, unicode-bidi, writing-mode를 적절히 조합하면 유연한 스타일링이 가능

 

그런데 지금까지 웹개발을 하면서 다국어 웹사이트 지원을 위해 direction이나 unicode-bidi를 입력해본 적이 없었다.
알고리즘 문제를 풀 때 많이들 경험하겠지만 뭔가 코드가 길어지거나 다른 방법이 있을 것 같은데 하면 분명히 더 직관적이거나 명확한 방법이 존재한다.

 

Unicode Bidi(양방향) 알고리즘

각 문자는 Unicode에서 기본적인 방향성(Bidi Property)을 가지고 있다.

• 영어(English) → 기본 방향이 LTR(왼쪽 → 오른쪽)
• 한글(Korean) → 기본 방향이 LTR(왼쪽 → 오른쪽)
• 아랍어(عربي), 히브리어(עברית) → 기본 방향이 RTL(오른쪽 → 왼쪽)

브라우저는 direction 속성이 rtl이어도, 문자의 기본 방향이 LTR이라면 그대로 유지한다.
즉, direction: rtl;은 텍스트의 정렬을 오른쪽으로 바꾸지만, 개별 문자들의 기본 방향을 강제로 변경하지 않는다.

 

 

dir 속성

• HTML 요소의 기본 텍스트 방향(Bidi, Bi-directional text direction)을 지정하는 전역 속성
• HTML의 구조적 의미(semantic)와 접근성(Accessibility, a11y)에도 영향을 줌
• 폼 입력 필드(<input>), 콘텐츠 복사 & 붙여넣기, 키보드 탐색 등에 영향을 미침
• 자식 요소까지 방향이 상속됨
• <input>이나 <textarea> 같은 폼 요소에도 적용됨
• 브라우저에서 "기본 텍스트 방향"으로 인식하여, 복사 & 붙여넣기, 음성 읽기(TTS) 등에 영향

css의 direction은 화면상 방향만 바꿀 뿐, 시맨틱한 웹은 아니다.
따라서 기본 텍스트 방향을 설정할 때는 html 태그에 dir 속성을 사용해야 한다.
일반적으로 unicode-bidi 알고리즘이 자동으로 적용되기 때문에 unicode-bidi를 별도로 지정할 필요가 없다.
단, 페이지에 LTR과 RTL 문장이 혼재되어 있다면 기본적인 방향을 dir 속성으로 지정한다.

 

dir 사용 예시

1. RTL(아랍어)과 LTR(영어)이 섞여 있을 때

• dir="rtl"을 설정하지 않으면 레이아웃이 깨질 수 있다.
• 이런 경우 dir="rtl"을 설정하면 자동으로 RTL을 기준으로 문장을 정렬하고 LTR 문장을 맞춰서 배치한다.

 

2. 입력 필드(<input>, <textarea>) 방향을 맞추기 위해

• 기본적으로 LTR 방향에서 입력됨(잘못된 UX).
• 아랍어 사용자는 RTL 입력을 기대하지만, 입력 커서가 왼쪽에서 시작됨.
• 이 때, dir="rtl"을 적용하면 커서가 오른쪽에서 시작한다.

 

3. padding-inline-start 같은 CSS 속성을 사용할 때

CSS에서 padding-inline-start(인라인 방향의 시작점에 패딩 적용)를 사용할 때, dir="rtl"이 없으면 방향이 자동으로 조정되지 않는다.

padding-left-start 

이제 처음의 padding-left-start로 돌아와서, padding-left-start을 사용하면 LTR(왼쪽에서 오른쪽)에서는 padding-left처럼 동작하지만, RTL(오른쪽에서 왼쪽)에서는 padding-right처럼 unicode-bidi에 맞춰서 여백이 동적으로 동작한다.

 

writing-mode

수직, 수평을 바꿔야 한다면 writing-mode를 사용할 수 있다.

결론

• 기본적으로 RTL이 필요시 dir="rtl"을 사용하여 전체 UI 방향을 맞춘다.
• 텍스트와 입력 필드의 정렬 문제를 해결하기 위해 dir="rtl"을 적용한다.
• 필요한 경우, padding-inline-start을 활용하여 UI 여백을 자동 조정한다.
• direction이나 unicode-bidi를 직접 적용하는 방식은 대부분 필요하지 않다.

즉, UI 방향은 dir, 여백 조정은 padding-inline-start로 지정한다.