HTML
회사 업무상 70여 개의 언어를 처리하고 있는데 이번에는 아랍어, 페르시아어, 히비리어, 우르두어 등 처리가 가능한 RTL 언어 지원 템플릿을 만들어야 했다.
처음이 아니지만 간혹 있기에 이참에 HTML에서 기존 LRT 언어를 RTL 언어로 바꾸는 법을 기록해 놓고자 한다.
흔히 접하는 영어와 한글의 경우 왼쪽에서 오른쪽으로 글을 쓰는 LTR 언어라 불리며, 오른쪽에서 왼쪽으로 읽히는 글은 RTL 언어라 구분되며 대표적으로 아랍어나 페르시아 어 같은 언어들이 있다.
이 언어들의 특이점은 우측에서 텍스트를 읽으며 영어는 또 왼쪽방향으로 다시 쓰이기에 혼합되어 처리해야 하는 문제가 있다.
일단 간단히 LTR 언어를 LTR 언어로 바꾸는 법은?
<html dir="rtl">
dir=”rtl”은 HTML 문서의 기본 텍스트 방향을 오른쪽 → 왼쪽(RTL)으로 지정하는 속성이다.
텍스트 방향, 폼 입력, 브라우저 기본 동작이 바뀌게 된다. 예를 들면 입력 창 커서도 오른쪽에서 시작하게 된다.
기본은 생략할 수 있으며 생략 시 dir=”ltr”과 같다.
이 외 다른 코드 부분은 html에서 건드릴 일은 잘 없고~ 내부 그림이 있으면 자체적으로 방향 바꿔서 넣어주기 정도?
body{direction: rtl;}dicrection:rtl도 CSS에서 문서의 텍스트 방향을 오른쪽→왼쪽(RTL)으로 지정하는 방법이다.
크게 시각적 방향이 바뀐다고 보면 되는데 텍스트 흐름을 오른쪽에서 왼쪽으로 방향 바꾸며, css에서 쓰면 문단, 리스트, 표 기본 정렬 방향이 rtl로 된다.
선언 1개만 하는 html과는 달리 css에서는 내가 추가로 건드린 속성은 다 바꿔주어야 한다.
예를 들어 우측에 마진 10px를 줬다면, rtl에서는 왼쪽 마진을 제거하고 우측 마진 10px를 줘야 시각적으로 봤을 때 동일하게 보인다.
| 속성 | LTR | RTL |
|---|---|---|
| translateX | translateX(50%) | translateX(-50%) |
| translateX(-50%) | translateX(50%) |
| 속성 | LTR | RTL |
|---|---|---|
| margin | margin-left | margin-right |
| margin-right | margin-left | |
| padding | padding-left | padding-right |
| padding-right | padding-left | |
| text-align | text-align: left; | text-align: right; |
| text-align: right; | text-align: left; | |
| gap | 그대로 사용 |
그리고 css에 background가 쓰였다면 background-posiion 체크를 해줘야 한다.
만약 background: url(‘./../contents/images/m-note.png’) no-repeat 2px 2px; 였다면
background: url(‘./../contents/images/m-note.png’) no-repeat right 2px top 2px;
| 속성 | LTR | RTL |
|---|---|---|
| flex-direction | row | row-reverse / 내부에 따라 주의 |
| row-reverse | row / 내부에 따라 주의 | |
| column | 그대로 사용 | |
| column-reverse | 그대로 사용 |
| 속성 | LTR | RTL |
|---|---|---|
| justify-content | flex-start | flex-end |
| flex-end | flex-start | |
| center / space-between / space-around | 그대로 사용 | |
| align-items | flex-start / flex-end | 그대로 사용 |
원래 rtl 시 해당 부분은 권장으로 뜨지만, 실 작업해보면 해당 부분은 쓰지 않고 ltr 속성 유지하는 게 오히려 더 그대로 나왔다. 조금 더 확인이 필요해 보인다.
JS 자체에서 RTL을 위해 따로 변경해 주어야 하는 부분은 없다.
다만, 스와이프 등을 사용하면 기준 좌측에서 우측으로 되게 변경 해 주어야 한다.
// Swipe
this._pos[i] = this._item_w * i - page_gap;
->
this._pos[i] = this._item_w * i * (-1) + page_gap; // RTL
return ( (this._start[0] == 0 && this._left > 0) || (this._start[last_p] == 0 && this._left < 0) );
->
return ( (this._start[0] == 0 && this._left < 0) || (this._start[last_p] == 0 && this._left > 0) ); // RTL
_this.animate(1, true);
->
_this.animate(-1, true); // RTL
return ( (this._start[0] == 0 && this._left > 0) || (this._start[last_p] == 0 && this._left < 0) );
->
return ( (this._start[0] == 0 && this._left < 0) || (this._start[last_p] == 0 && this._left > 0) ); // RTL
_this.animate(-1, true);
->
_this.animate(1, true); // RTL
if ((thisIndex != h2Length && this.direction() == -1) || (this.direction() == 1 && thisIndex != 0)) {
var direction = this.direction();
urlChange(direction);
}
->
if ((thisIndex != h2Length && this.direction() == 1) || (this.direction() == -1 && thisIndex != 0)) {
var direction = this.direction();
urlChange(-direction);
}
if( (this._start[0] == 0 && this._left > 0)){
->
if( (this._start[0] == 0 && this._left < 0)){ // RTL
} else if(this._start[last_p] == 0 && this._left < 0){
->
} else if(this._start[last_p] == 0 && this._left > 0){ // RTL
return ( (this._start[0] == 0 && this._left > 0) || (this._start[last_p] == 0 && this._left < 0) );
->
return ( (this._start[0] == 0 && this._left < 0) || (this._start[last_p] == 0 && this._left > 0) );
this.animate(-1, true);
->
this.animate(1, true);
this.animate(1, true);
->
this.animate(-1, true); 이렇게 정도 해주면 기본 rtl은 처리 된다. 하지만 복합어 등이 있기에 그거엔 또 세밀한 조정이 필요하다.
다른 HTML 글들: https://pixiclue.com/weblab/html/