RTLCSS 프레임워크 활용해 CSS속성에 RTL 한 번에 적용하기

date

Dec 14, 2022

slug

RTLCSS

author

status

Public

1) What is RTL

1-1) RTL이란?

RTL은 오른쪽에서 왼쪽으로 글자를 읽는 것

단어를 쓰는 방향은 LTR과 같다. 읽는 방향만 다른 것이다. ex) [LTR] Hello Vue World → [RTL] World Vue Hello

글자외에도 이미지,아이콘,인터랙션 등의 UI의 배치 또한 오른쪽을 시작으로 변화함.

1-2) RTL 개발 시 주의사항

모든 UI 요소의 정렬기준을 우측으로 함

움직임, 방향을 나타내는 아이콘일 경우 이미지를 translate 할 것

인터렉션도 반대로 동작한다

숫자와 영어는 정렬과 문장 위치만 오른쪽을 기준으로 바뀌고, 그냥 그대로 쓰면 된다.

문장의 모든 순서를 바꿔야하는가?
ex) [LTR] Hello Vue World → [RTL] World Vue Hello
그럴 필요는 없다. 삼성, bbc RTL 적용 예시 — 문장의 모든 순서를 바꿔야하는가? ex) [LTR] Hello Vue World → [RTL] World Vue Hello 그럴 필요는 없다. 삼성, bbc RTL 적용 예시

1-3) RTL 개발 시 UI에 대한 고민

방향이 설정된 UI는 RTL 속성에 대해서 모두 다 바꿔줘야 하는가

디자이너와 협업하여 가장 translate가 적은 디자인을 채택하는 것이 우선

step에 따른 방향성은 위에서 아래로 구현
방향이 들어간 ui요소는 가급적 자제, 쓴다면 순서로 명확하게 표기

적용해야할 경우 바뀌는 부분만 추출하여 CSS 속성을 변경 (RTLCSS 활용)

관련자료

Right to Left Styling 101

Do you like my content? You can support and buy me a coffee. Thank you so much! Over 292 million people around the world speak Arabic as their first language. Arabic (al-Arabiyyah, pronounced /al ʕarabijja/, /ʕarabiː/) is my native language, and I sometimes build websites that need to support both left-to-right (LTR) and right-to-left (RTL) styles.

https://rtlstyling.com/posts/rtl-styling#bidirectional-icons

Material Design

Build beautiful, usable products faster. Material Design is an adaptable system-backed by open-source code-that helps teams build high quality digital experiences.

https://m2.material.io/design/usability/bidirectionality.html#mirroring-elements

2. HTML dir vs CSS direction

2-1)HTML dir

<div dir="rtl || ltr || auto"></div>

html 파일에 적용된 언어에 맞게 브라우저에서 자동으로 dir속성을 설정한다.

블록 레벨은 rtl 스타일이 적용되지만, 인라인 요소는 rtl스타일이 적용이 안된다.

인라인요소에 대한 rtl 속성 적용하기 위해서는 display:inline-block 설정하거나, 부모요소로 div 같이 블록레벨을 씌울 것

bdo 요소(Bi-Directional Override)는 html 현재 텍스트의 쓰기 방향을 덮어쓰고 다른 방향으로 렌더링한다.

<p>이 글은 왼쪽에서 오른쪽으로 작성합니다.</p>
<p><bdo dir="rtl">이 글은 오른쪽에서 왼쪽으로 작성합니다.</bdo></p>

2-2) CSS dir

.div_list_css {
	direction: rtl;
}

CSS의 dir속성은 direction 텍스트, 테이블 열 및 가로 오버플로의 방향을 설정

2-3) 두 개 중에 뭘 써야할까?

두 속성 모두 ui 요소의 읽는 방향을 다르게 해서 보이는 효과는 똑같다

다만, 작동하는 방식이 다른데 dir은 전역 속성이고, css는 스타일을 조정한다는 것에서 근본적인 차이가 있다.

HTML을 쓰면 좋을 때

글자의 쓰기 방향은 외형이 아니라 그 의미에 관여하므로, 웹 개발자로서 되도록 CSS 속성 대신 dir 특성을 사용하세요. 관련 속성을 지원하지 않거나, CSS를 비활성화한 브라우저에서도 텍스트가 올바른 방향으로 나타납니다.

HTML 파일 자체를 RTL로 인식 → 웹기반의 동작들에 관여 → 웹브라우저의 동작을 안정화

브라우저마다 지원하는 기능에 영향을 받지 않을 확률이 크다

CSS를 비활성화한 브라우저에서도 텍스트가 올바른 방향으로 나타난다.

CSS를 쓰면 좋을 때

다양한 locale에서 접속환경을 구현해야할 때

UI 요소에 대한 여러가지 효과, 이미지, 아이콘에 대한 조정이 필요할 때

2-4) 결론

웹표준 혹은 RTL 속성으로만 서비스할 웹페이지라면 HTML을 적용하는 것이 안정성 측면에서는 조금 나을 수 있음

그러나, 다양한 언어로 서비스 해야하고, UI요소에 대한 세부적인 디자인이 중요한 작업이라면 CSS를 통해 구현하는 것이 나음.

하이메디 서비스는 기본적으로 하나의 서비스를 다국어로 구현하기 때문에 CSS를 통해 RTL을 구현하는 것이 적절하다고 판단

3. RTLCSS 프레임워크

3-1) RTLCSS 프레임워크란?

CSS 요소들을 RTL 방식에 맞춰서 모두 미러링해주는 프레임워크

적용가능한 요소 (좌우값을 설정할 수 있는 대부분)

background
border
padding,margin
etc…

Processing Directives (처리 지시문)

프레임워크 동작시 특정 process를 주석처리해서 전달하면 특정 노드에 대해 ignore 하거나, 특정 범위의 선택자 이름을 maping해서 해당 node에 대해서만 적용 가능

3-2) RTLCSS webpack plugin 적용

What is webpack plugin

webpack is a bundler for modules

웹팩은 번들러이다.

번들러 : js,css,image 파일을 묶는 것(번들링)을 하는 역할
따라서 웹팩은 여러 기능이 모인 모듈을 js,css,image 등의 요소로 번들링해서 효율적으로 build 할 수 있게 돕는 것

웹팩의 4가지 주요설정 웹팩은 묶는거다. 묶으려면 시작점과 끝점을 정해야하는데, 어떻게 읽을지 정하고, 읽을 때 도움을 받을 수 있다.

entry 설정 : 웹팩은 디펜던시 그래프를 그리면서 모든 모듈을 번들링하는데 그 시작점에 대한 설정 기본적으로 index.js
output 설정 : 번들링한 결과물을 어디로 내보낼지 지정하는 속성 기본적으로 main.js
loader 설정 : 웹팩은 기본적으로 javascript와 json파일만 이해할 수 있는데, 다른 포맷의 리소스도 디펜던시 그래프에 추가하기 위해 Loader를 설정해준다. 주로 test 설정(파일 형식), use 설정(파일 변환시 사용할 로더)

plugin 설정 : 번들링 할 때 플러그인을 하면 특정 조건이나 특정 기능을 추가할 수 있다.

플러그인 설치

webpack-rtl-plugin

Webpack plugin to use in addition to mini-css-extract-plugin to create a second css bundle, processed to be rtl. This uses rtlcss under the hood, please refer to its documentation for supported properties. Check out the webpack-rtl-example to see an example of an app using the rtl-css-loader and webpack-rtl-plugin.

https://www.npmjs.com/package/webpack-rtl-plugin

npm install webpack-rtl-plugin

const WebpackRTLPlugin = require('webpack-rtl-plugin')

vue.config.js에서 웹팩 설정

vue cli에서는 vue.config.js를 통해서 기본적인 웹팩 설정을 해두고 있다.
그래서, webpack.config.js파일이 아닌 vue.config.js 파일을 통해서 plugin 설정을 할 수 있다. configureWebpack에 plugins를 객체형태로 전달할 수 있다.