방탄 RTL - 네트워크 플랫폼의 RTL(3/6)

이 글은 6부로 구성된 시리즈의 세 번째 부분으로 RTL과 호환되는 웹 플랫폼을 구축하는 방법에 대해 전편을 보십시오.

RTL 방탄복 만들기

앞서 언급한 바와 같이 모든 스타일에서 CSS 논리 속성을 사용하는 것은 몇 가지 문제를 가져올 수 있습니다. 다음은 제가 토론하고자 하는 두 가지 주요 문제입니다.

기존 브라우저 지원

인위적인 오류가 발생하기 쉽다

다행히도, 이 두 가지 문제를 동시에 해결할 수 있는 해결 방안이 있고, 당신의 시스템이 이런 상황에서 방탄할 수 있도록 합니다.쉽게 말해 CSS를 적용하기 전에 이를 반전시키는 것이다.

이전 브라우저 지원

caniuse.com에 따르면 CSS 논리 속성 중의 left와 right 등가물은 모든 브라우저에서 약 86% 를 지지한다.이것은 이미 매우 많으니, 몇몇 플랫폼에 있어서는 이미 충분할 것이다.
하지만'심심한 일'이 있다면 RTL 호환 플랫폼을 낡은 브라우저의 지원을 받을 수 있습니다. (우리는 모두 당신의IE를 주목하고 있습니다...)그렇다면 86%는 분명히 부족하다.

인위적인 착오가 생기기 쉽다

인간으로서 우리는 때때로 작은 실수를 범할 수 있다. 단지 습관의 힘 때문에 우리는'자율주행 모델'에 들어갔다. 이런 모델에서 우리의 잠재의식은 주도적인 위치를 차지하고 우리는 결국 우리가 더 이상 원하지 않는 일을 할 것이다.
이러한 동작은 갑자기 코드 라이브러리에서 CSS 논리 속성을 강제로 사용하는 경우 자주 발생할 수 있습니다.절대 다수의 웹 개발자들이 *-left과*-right가 아니라*-start과*-end에 익숙하기 때문이다.또한 코드 세그먼트를 다른 곳에서 복사하거나 디자인된 CSS까지 읽을 때 발생할 가능성이 높다.
설령 당신이 사용하고 있는 프로젝트에 코드 심사 시스템이 하나 있다 하더라도, 이런 작은 left 과 right CSS 속성은 결국 RTL 버전을 통해 사이트에서 시각적 효과를 볼 수 있다.

솔루션

이론적으로 상술한 두 문제의 해결 방안은 모두 매우 간단하다.웹 사이트를 RTL 언어로 변경하면 *left만 *right로 변경하면 됩니다.
만약에 우리 모두가 똑같은 스타일 해결 방안, 예를 들어 간단한 낡은 CSS 스타일시트, 심지어 CSS 모듈을 사용한다면 이것은 사실 매우 쉽다.그러나 모든 플랫폼은 유일무이하고 모든 플랫폼은 서로 다른 양식 설정을 사용한다.따라서 저는 Styled Components를 어떻게 사용하는지 소개할 것입니다. 이것은 현재 모든 현대 웹 플랫폼에서 JS에서 가장 많이 사용되는 CSS 도구일 것입니다.

RTL이 있는 스타일 지정 어셈블리

이러한 CSS가 JS 라이브러리에서 유행하기 때문에 스타일화된 구성 요소를 둘러싸고 대량의 소스 라이브러리와 도구를 만들었다.stylis-plugin-rtl 중 하나입니다.이것은 RTL 문제를 해결하는 데 특히 유용합니다.
Styles plugin rtl은 패키지의 도구에 전달될 때 스타일링 구성 요소에 정의된 모든 채우기/여백/위치 값을 반전시키는 작은 라이브러리입니다.
다음 코드 세그먼트는 Next에서 작성됩니다.js 프로젝트.

import React from 'react';
import { AppProps } from 'next/app';
import { StyleSheetManager } from 'styled-components';
import { StylisPlugin } from 'styled-components';
import stylisRTLPlugin from 'stylis-plugin-rtl';
import { useTranslation } from 'react-i18next';

const App = (props: AppProps): JSX.Element => {
  const { Component, pageProps, router } = props;

  const { locale } = router;
  const { i18n } = useTranslation();

  // Get direction based on locale
  const direction = i18n.dir(locale);

  return (
    <StyleSheetManager
      stylisPlugins={
        direction === 'rtl' ? [stylisRTLPlugin as unknown as StylisPlugin] : []
      }
    >
      <Component {...pageProps} />
    </StyleSheetManager>
  );
};

export default App;

위의 코드 예시에서 보듯이 방향이 StyleSheetManager로 설정되면 플러그인을 추가합니다. 방향이 rtl로 설정되었을 때 우리는 어떤 내용도 추가하지 않습니다.이렇게 하면 오른쪽에서 왼쪽으로 갈 때 속성ltr이 left, right가 padding-right로 변한다.이러한 속성은 스타일 지정 어셈블리에서 정의된 경우에만 발생합니다.
Styles 플러그인 rtl 없음
Styles 플러그인 rtl 사용
옳았어
왼쪽
왼쪽
옳았어
오른쪽 여백
왼쪽 채우기
왼쪽 채우기
오른쪽 여백
텍스트 정렬:오른쪽;
텍스트 정렬:왼쪽 정렬;
텍스트 정렬:왼쪽 정렬;
텍스트 정렬:오른쪽;
이는 포지셔닝에 도움이 될 뿐만 아니라 사용자 인터페이스 관련 오류를 방지하는 데도 큰 도움이 된다. 슬그머니padding-left 코드 심사를 통해 생산 환경에 들어가기만 하면 된다.

결론

만약 모든 오래된 브라우저를 지원해야 한다면, 사용 중인 스타일 해결 방안 주위의 도구를 보십시오. 문서의 방향에 따라 CSS 속성을 반전시킬 수 있는 도구를 찾을 수 있기를 바랍니다.

다음 장

다음 장에서는 RTL 및 LTR(아이콘)에서 동일한 의미와 이를 구현하는 방법에 대해 반전이 필요한 구성 요소를 설명합니다.
부디 저를 주목해 주시고, 이 시리즈들의 최신 업데이트를 계속 주목해 주십시오!