가장 일반적인 언어 방향(왼쪽에서 오른쪽 및 오른쪽에서 왼쪽)으로 웹 사이트를 지원하려면 역사적으로 많은 작업이 필요했습니다.

그러나 2023년에는 CSS 논리적 속성의 주요 기능을 대부분 확보한 후 다방향 언어 웹사이트를 지원하는 것이 훨씬 쉬워졌습니다.

그럼에도 불구하고 CSS 논리적 속성은 여전히 ​​개선되어야 하며 추가 솔루션이 필요합니다.

이 글에서는 다방향 언어 웹사이트 지원의 누락된 부분을 어떻게 해결했는지 살펴보고자 합니다.

CSS 논리적 속성이란 무엇입니까?

현재 대부분의 웹사이트는 위/오른쪽/아래/왼쪽과 같은 물리적 방향에 따라 고정된 축으로 작동합니다.

margin-right, padding-bottom, border-left등과 같은 물리적 방향의 오래되고 친숙한 CSS 물리적 속성이 있습니다 .

물리적 특성의 문제

오른쪽에서 왼쪽( direction: rtl)과 왼쪽에서 오른쪽( direction: ltr)으로 가는 언어에 대한 지원을 활성화할 때 웹 사이트의 일종의 수평 거울을 만들어야 합니다.

물리적 속성을 사용하는 경우 거울을 만들려면 다른 CSS 파일 집합이 필요합니다.

다방향 웹사이트가 어떻게 보일 수 있는지에 대한 예:

CSS 논리적 방향

이 문제는 CSS 논리적 속성으로 해결할 수 있습니다. 물리적 방향 대신 이제 두 개의 축이 있습니다.

• 인라인 축 — 이것은 텍스트의 축입니다.
• 블록 축 — 이것은 웹사이트 흐름의 축입니다.

인라인 축: 인라인 축을
설명하기 위해 두 가지 방향이 있습니다.

• 인라인 시작 — 텍스트 줄의 시작을 설명합니다. 영어로 이것은 왼쪽 입니다 .
• Inline-end — 텍스트 행의 끝을 설명합니다. 영어로는 this is the right 입니다 .

• Block-start — 웹사이트 흐름의 시작을 설명합니다. 오늘날 영어와 대부분의 언어에서 이것이 최고 입니다 .
• Block-end — 웹 사이트 흐름의 끝을 설명합니다. 영어와 오늘날 대부분의 언어에서는 이것이 맨 아래 입니다 .

이러한 논리적 방향에서 대부분의 물리적 속성에 대한 업데이트를 얻습니다. 예를 들면 다음과 같습니다.

margin-left => margin-inline-start
padding-top => padding-block-start

/* position properties - for example for: position: fixed; */

top => inset-block-start
bottom => inset-block-end
left => inset-inline-start
right => inset-inline-end

왼쪽에서 오른쪽으로의 예:

html {
  direction: ltr; /* default value */
}

div {
  margin-inline-start: 20px; /* = margin-left: 20px */
}

html {
  direction: rtl;
}

div {
  margin-inline-start: 20px; /* = margin-right: 20px */
}

상하 방향은 웹사이트의 메인 플로우인 차단축을 나타냅니다.

웹에서는 일반적으로 사용되지 않지만 속성을 사용하여 block-axiswriting-mode 에 영향을 줄 수 있습니다 .

참고: 웹사이트의 주요 흐름에 영향을 미치는 것은 중국어와 같은 극동 언어에 대해 만들어지며 텍스트 줄을 위에서 아래로 쓸 수 있습니다.

writing-mode: horizontal-tb; /* top to bottom (default value) */
writing-mode: vertical-rl;   /* right to left */
writing-mode: vertical-lt;   /* left to right */

데모 ( HJ Chen 작성 ):

재산 writing-mode은 대부분 사용되지 않습니다. 99.99%의 웹사이트는 또는 direction로 설정된 경우 에만 작동합니다 .ltrrtl

이것은 또한 와 같은 기본 축/블록 축 속성을 사용하는 것이 margin-block-start일반적으로 우리에게 영향을 미치지 않는다는 것을 의미합니다. 그러나 저는 여전히 일관성을 유지하기 위해 웹 사이트 전체에서 CSS 논리적 속성을 사용하는 것을 선호합니다.

CSS 논리적 속성으로 충분합니까?

CSS 논리적 속성이 대부분의 작업을 수행하지만 사용 후 몇 가지 문제가 발생했습니다. 이러한 문제와 이를 해결할 수 있는 방법에 대해 이야기해 봅시다.

변환 속성

요즘은 CSS Flexbox와 CSS Grid 모듈로 대부분의 레이아웃 정렬을 합니다. transform그러나 어떤 경우에는 예를 들어 함수를 사용하여 속성을 통해 사물을 배치하려고 합니다 translateX().

속성 의 문제는 transform해당 축이 논리적 방향으로 작동하지 않는다는 것입니다. 예를 들어 웹사이트의 가치 transform: translateX(100px)에 관계없이 항상 오른쪽으로 이동합니다 .direction

transform: translateX(100px); /* will move the element always right */

언어 유형에 따라 요소를 번역해야 하는 경우 값을 양수 값이 아닌 음수 값으로 변경하거나 음수이면 양수 값으로 변경해야 합니다.

이를 위해 기본적으로 값이 인 CSS 변수를 만듭니다 1.

:root {
  --transform-direction: 1;
}

transform: translateX( calc(100px * var(--transform-direction)) );

RTL 언어 지원:
--transform-direction 이제 변수 값을 -1.

이를 위해 :root기본 <html>요소에 기본 dir=”rtl”특성이 있는 경우에만 재정의하는 다른 선택기를 만들기만 하면 됩니다.

:root[dir="rtl"] {
  --transform-direction: -1;
}

<html dir="rtl">

웹사이트 방향을 변경할 때 화살표가 잘못된 방향을 가리킬 수 있습니다.

이 문제를 해결하기 위해 변수를 다시 사용할 수 --transform-direction있지만 이제는 약간 다른 방식으로 사용합니다.

아이콘을 가로로 뒤집기 위해 값이 있는 속성 scaleX의 기능을 사용하고 있습니다 .transform--transform-direction

이제 scaleX변환 속성의 값이 와 같을 때 -1이 값은 화살표를 제자리에서 가로 방향으로 뒤집습니다.

.icon-arrow-left,
.icon-arrow-right {
  transform: scaleX(var(--transform-direction));
}

더 많은 것들

일부 CSS 논리적 속성, 더 정확하게는 논리적 값은 현재 널리 지원되지 않습니다.

속성 float에는 2개의 새로운 논리 값 inline-start및 가 있습니다 inline-end. 안타깝게도 현재로서는 Firefox에서만 지원됩니다.

이를 해결하기 위해 줄의 시작과 끝을 나타내는 두 개의 새로운 변수를 추가하고 있습니다.

기본값은 요소 dir=“rtl”의 특성이 있는 경우 해당 값을 재정의할 수 있는 기능이 있는 왼쪽에서 오른쪽으로 쓰는 언어용입니다 <html>.

CSS 코드 예:

/* default - left-to-right languages */
:root {
  --start-direction: left;
  --end-direction: right;
}

/* Support for right-to-left languages */
:root[dir="rtl"] {
  --start-direction: right;
  --end-direction: left;
}

float: var(--start-direction);

background-position: var(--end-direction) top;
background-repeat: no-repeat;

여기에서 본 것처럼 CSS Logical Properties 지원을 완료하는 데 도움이 되는 세 가지 CSS 변수를 정의했습니다.

CSS 코드는 다음과 같습니다.

/* default - left-to-right languages */
:root {
  --transform-direction: 1;
  --start-direction: left;
  --end-direction: right;
}

/* Support for right-to-left languages */
:root[dir="rtl"] {
  --transform-direction: -1;
  --start-direction: right;
  --end-direction: left;
}

:root {
  /* default - left-to-right languages */
  --transform-direction: 1;
  --start-direction: left;
  --end-direction: right;

  /* Support for right-to-left languages */
  &[dir="rtl"] {
    --transform-direction: -1;
    --start-direction: right;
    --end-direction: left;
  }
}

이 게시물에서는 다방향 웹사이트를 지원할 수 있는 방법을 살펴보았습니다.

첫 번째 단계는 가능한 모든 곳에서 네이티브 CSS 논리적 속성을 사용하는 것입니다. 두 번째 단계는 덜 지원되는 CSS 논리적 속성에 추가 CSS 변수를 사용하는 것입니다.

마지막 말

핑크 디자인 이 오늘 드디어 나왔습니다. 핑크 디자인은 새롭고 독창적인 CSS 방법으로 구축되었으며 접근성과 개발자 경험을 우선시합니다. 오픈 소스 제품을 개발하는 회사로서 이는 Appwrite의 기고자 커뮤니티에 큰 진전입니다. 항상 그렇듯이 우리는 Pink Design을 계속 개선하여 Appwrite 와 함께 성장할 수 있도록 할 것입니다 .

우리 여행의 일부가 되어 주셔서 감사합니다! 아직 하지 않았다면 Pink Design GitHub 리포지토리를 찾아보거나 시작 안내서를 확인하여 프로젝트에서 또는 Appwrite 에 기여할 때 Pink Design을 사용하십시오 .

다음 시간까지!