State of CSS 2022 を眺めていて知らなかったことのうち、論理プロパティについて調べた
CSSの論理プロパティ
CSSの論理プロパティとは従来の左上を開始位置にするのではなく、言語によってその開始位置などが切り替わるというもの
例えば、縦書きの日本語は右上から始まり左に文章が積まれていく
もし文章と文章の間にpaddingを設けたい場合、かつ、英語と縦書き日本語が何かしらで切り替えられる場合
padding-topとpadding-rightを文章に合わせて切り替えなければならない
これまでだと少し面倒だが、このCSSの論理プロパティを使うと文章の開始が自動的に切り替わってくれる
CSSの論理プロパティの一つpadding-block-startは文章が積み重なる側のpaddingを意味している
つまり、英語の場合、padding-block-startはpadding-topと同じ
縦書きの日本語の場合、padding-block-startは、padding-rightと同じになる
padding-block-start - CSS: カスケーディングスタイルシート | MDN
他にプロパティがあり、今後多言語対応する場合は論理プロパティにおきかえを検討してもよさそう
他参考
https://coliss.com/articles/build-websites/operation/css/new-css-logical-properties.html
