[HTML] - Dir : "rtl" | "tlr"

Dir - "rtl" | "ltr" 의 사용방법

Dir

<p dir="ltr | rtl">

• Arabic 과 같이 오른쪽에서 왼쪽으로 읽는 언어를 사용하는 특정 국가는 좌우반전의 UI 로 리렌더링 필수
• 이런 설정은 HTML 의 global attribute 중 dir로 설정이 가능
• 기본 UI, 즉 ltr 구성의 웹페이지에서 아랍국가의 언어를 사용하게 될 경우 웹 사이트의 locale값을 확인하여 최상위 컴포넌트의 dir을 설정해주는 방향으로 진행
• dir의 값은 최상위 컴포넌트 혹은 Context, Redux 등을 사용하여 Global State로 관리하는 것을 추천
  
  

Nextjs 예

const Layout = ({children}) => {
	const router = useRouter()

	const dir = useMemo(
		() => router.locale === 'ar' ? 'rtl' : 'ltr'
	,[router])

	return (
		<div dir={dir}>
			{children}
		</div>
	)
}

---

CSS 주의해야 할 점

flex, grid

• 기본적으로 dir의 설정은 CSS의 기본 설정의 영향을 줌
• display: flex를 사용할 때, justify-content의 정렬 또힌 반전되어 적용
• display: grid를 사용할 때, 정렬 또힌 반전되어 적용

absolute

• display: absolute 은 dir의 영향을 받지 않는다.
• dir 의 사용 시 특정 locale값의 따라 UI 가 깨질 수 있는 부분에 대해 주의해야 함
• absolute 포지셔닝으로 되어있는 컴포넌트 내부에서 flex설정을 해주면 간단하게 해결이 가능