LTR（Left to Right）とRTL（Right to Left）の文脈でマージンを効率的に設定する方法

概要

カードコンポーネントを実装するときに横並びのアイコンとテキストの間にマージン（余白）を入れることはよくありますが、LTR か RTL かによってマージンを入れる箇所が異なります。LTR ならアイコンに margin-right: 1rem; をあてて RTL ならアイコンに margin-right: 0; とmargin-left: 1rem;をあてる方法もありますが、margin-inline-end: 1rem; をあてることによってそれを効率的に実装することができます。ちなみに margin-inline-end というプロパティは Tailwind CSS にもあるので Tailwind CSS でも使用できます。

.avatar {
  /* Default for LTR */
  margin-right: 1rem;
}

.rtl .avatar {
  /* for RTL */
  margin-right: 0;
  margin-left: 1rem;
}

.avatar {
  margin-inline-end: 1rem;
}

こちらのCodePenは margin-inline-end プロパティを使用して、LTR と RTL の文脈でアイコンとテキスト間のマージンがどのように適用されるかを示しています。

See the Pen margin-inline-end demo by Tahera Alam (@alam_tahera) on CodePen.

LTR と RTL

LTR と RTL はテキストの読み書きの方向性を指します。LTR は Left to Right（左から右へ）を意味し、英語や日本語など多くの言語がこの読み書きの方向を採用しています。RTL は Right to Left（右から左へ）を意味し、アラビア語やヘブライ語など一部の言語がこの読み書きの方向を採用しています。海外展開をより重視したいサービスの場合 margin-right margin-left を使用するより margin-inline-end を使用すると適切かもしれないですね。

margin-inline-start と margin-inline-end

margin-inline-start というプロパティもあって margin-inline-start と margin-inline-end は要素の周囲にマージン（余白）を追加するために使われますが、その適用は要素のインライン軸（テキストの流れの方向）に沿って行われます。これにより、特に多言語サイトを設計する際に、Left to Right（左から右へ） または Right to Left（右から左へ） のテキスト方向に基づいて、自動的にマージンを適切に配置することができます。

• margin-inline-start
  意味: 要素のインライン軸の開始側（テキストが始まる側）にマージンを適用します。
  LTR言語の場合: 左側にマージンが適用されます。
  RTL言語の場合: 右側にマージンが適用されます。

• margin-inline-end
  意味: 要素のインライン軸の終了側（テキストが終わる側）にマージンを適用します。
  LTR言語の場合: 右側にマージンが適用されます。
  RTL言語の場合: 左側にマージンが適用されます。

参照

自らの備忘録のために投稿してますが、なにかお役に立てましたら幸いです！
また、なにか間違ってましたらご指摘いただけますと幸いです！