💭

`text-align: right`　がなぜだめなのか？

に公開
CSS
tech

はじめに

右詰めのテキストを作るときに無意識にtext-align: rightを指定している人も多いと思います。
実際にはtext-align: endを使うことが推奨されています。

今回紹介するのは、web.devの「Learn Responsive Design」からInternationalization(i18n)です。
この記事では、やってしまいがちな記述の問題点について理由を説明し、その解決方法を紹介します。

https://web.dev/learn/design/internationalization/

理由

主な理由は文字が左から右に書くものとは限らないからです。
アラビックでは右から左に書きます。
また旧日本語も上から下に書きます。

こういった観点から、右左と「方向で指定」するのではなく、start, endで指定するのが論理的に妥当な記述です。

これらは方向指定（directional value）と対比して、logical propertyと呼ばれます。

解決方法

4方向の対応表は以下のような感じです。

directional logical property
right inline-end
left inline-start
top block-start
bottom block-end

例えばmarginの場合、

label {
  margin-right: 0.5em;
}

ではなく

label {
  margin-inline-end: 0.5em;
}

が適切です。（意味的に右を指す場合はmargin-rightでもいいと思う。）

まとめ

こういった記述ができるようになった背景には様々な国の人にとって分かりやすくしようという気持ちがあります。
日本人としては気づきにくい観点なのでアンコンシャスバイアスが働くと思います。
OSSや海外労働者が増える機会に向けて意識的に使っていきたいです。

Discussion