What is direction RTL

2020-04-16

html

direction, ltr, rtl, urdu

다국어로 웹 서비스 제작시 지원하는 언어에 우르드어가 포함되어 있다면 이 주제에 대해 반드시 알 필요가 있다. 여기서 RTL이란 ‘Right To Left’의 축약어로써 텍스트의 흐름이 우측에서 시작하고 우르드어의 경우 이 규약을 따른다.

서비스에 적용하는 방법은 매우 간단하다. 문서 상단에 <html dir="rtl">로 속성을 선언하기만 하면 된다.
하지만 float이나 position된 컨텐츠는 반응하지 않는다. 이는 당연한거 같으니 rtl로 되게끔 하려면 direction: rtl; text-align: right; right: 0; 등의 스타일 노가다가 필요할 것 같다. 필자는 [dir=”rtl”] Selector를 이용하여 처리했다. 반면에, flex나 table로 구성된 컨텐츠는 즉각 반응한다.

여기서 끝은 아니다. 아이콘이 사용되었다면 이 역시 대부분 방향 전환이 되어야 자연스러울 것이다. transform: scaleX(-1)을 주면 좌우가 반전되므로 아이콘의 방향을 전환하기에 유용하다.
구글에서 제공하는 material-design-icons에서는 이러한 부분을 위한 가이드를 제공하고 있다.

또한 Carousel 등의 UI도 방향 전환이 되어 제공된다면 좀 더 세심한 배려가 될 것이다. 대표 Carousel 중의 하나인 swiperjs에서는 이를 자체적으로 지원하므로 서비스에 쉽게 적용 가능하다.