ウェブプラットホーム(3/6)の弾丸証明RTL

このポストはRTL互換のWebプラットフォームを構築する方法について、6部シリーズの第3部です.

RTL弾丸を作る

最後の投稿で述べたように、CSSの論理的なプロパティをすべてのスタイルで使用して、テーブルに問題をもたらします.

古いブラウザのサポート

ヒューマンエラー

幸いにも、一度に両方の問題を解決する1つのソリューションがあり、このコンテキストであなたのシステム弾丸の証拠になります!そして、それが適用される前に、それは単純な用語で、CSSを逆転させます.

古いブラウザのサポート

によるとcaniuse.com , the left and right CSSの論理的なプロパティの等価物は、すべてのブラウザ全体で約86 %のサポートを持っています.これは既に多くのプラットフォームで十分かもしれません.
しかし、あなたが「退屈な仕事」を持っているならば、あなたのRTL互換のプラットホームを古いブラウザーによってサポートさせてください(我々全員はあなたを見ています...).86 %は明らかに十分ではない.

ヒューマンエラー

人間として、私たちは時には小さな間違いをするだけで、習慣の力によって、我々はその“自動操縦モード”では、我々の潜在意識が引き継ぐ、と我々は我々がもはや意味していない何かを作るに終了します.
この動作は、CaseBaseのCSS論理プロパティの使用を突然強制する場合、おそらく多くの場合に起こります.ウェブ開発者の大部分が書くのに用いられるように*-left & *-right の代わりに*-start & *-end . また、他の場所からのコード断片をコピーしたり、デザインのCSSを通して読んだりするとき、これらのタイプの状況が発生する可能性が高い.
たとえあなたが働いているプロジェクトのコードレビューシステムを持っていてもleft and right CSSのプロパティは、最終的には、RTLバージョンのウェブサイト上のF * CKいくつかの映像を取得します.

解決策

理論上、上で参照される両方の問題の解決は、非常に単純です.我々は、逆にするだけです*left to *right そして、逆のとき、我々のウェブサイトをRTL言語に変えてください.
そして、私たちのすべてがスタイリングのために全く同じ解決を使用しているならば、それは実際に簡単です.しかし、いいえ、各々のプラットホームはユニークです、そして、各々はスタイリングのために異なるセットアップを使います.それで、私はちょうど我々がこれをすることができる方法についてカバーするつもりですStyled Components , おそらく最近のすべての現代のWebプラットフォームのJSツールで最も使用されるCSSです.

RTL形式のコンポーネント

このCSSの人気がJS Libにあるため、オープンソースのLIBとスタイルのコンポーネントの周りのツールを作成しました.存在stylis-plugin-rtl そのうちの一つです.そして、これは特に私たちのRTLの問題を解決するために使用することができます.
StyleプラグインRTLは、StyleSheetManager ラッパーの小道具は、スタイルのコンポーネント内で定義されているすべてのパドル/マージン/ポジショニング値を逆にします.
次のコードスニペットが次の内部に構築されました.プロジェクト.

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;

上記のコードサンプルでわかるように、方向が設定されるたびにプラグインを添付しますrtl そして、方向に何かを付けていないltr . この方法では、右のプロパティを残してleft なるright , padding-right なるpadding-left など.これらのプロパティがスタイル付きコンポーネント内で定義されている場合にのみ発生します.
スタイラスプラグイン
スタイラスプラグイン
右
左側
左側
右
パディング
左詰め
左詰め
パディング
テキストの整列
テキストの整列
テキストの整列
テキストの整列
これは、位置決めに役立つだけではありませんが、それも多くのUI関連のバグを防ぐのに役立ちますpadding-left コードレビューをパスし、生産に入ります.

結論

すべての古いブラウザをサポートしなければならない場合は、使用しているスタイリングソリューションの周りのツールを見てください.うまくいけば、ドキュメントの方向に応じてCSSプロパティを逆にすることができます.

次の章

次の章では、RTLとLTR(アイコン)で同じ意味を持つために、反転する必要のあるコンポーネントを見ていきます.
これらのシリーズで最新のアップデートで調整されたままでいるために、私について来てください!