CSS Logical Properties Converter
CSS Logical Properties Converter is a tool that helps developers convert physical CSS properties (like left, right, top, bottom) to logical properties (like inline-start, inline-end, block-start, block-end). This conversion enables better support for different writing modes and internationalization, making layouts more adaptable to various languages and reading directions.
背景メモ
- CSS Logical Properties（CSS論理プロパティ）は、従来の「left」「right」「top」「bottom」といった物理方向の指定に代わり、**テキストの書字方向（横書き・縦書き）や読み方向に応じて自動でマッピングが切り替わる**CSSの仕様。例えば「margin-inline-start」は左書きの言語では「margin-left」、右書き（アラビア語など）では「margin-right」として機能する。
- このツールは、既存の物理プロパティで書かれたCSSコードを論理プロパティに一括変換するもの。国際化（i18n）や多言語対応サイトで、レイアウトを書字方向に依存しない形に移行したい開発者向け。
- CSS Logical Propertiesは近年の主要ブラウザで広くサポートされており、CSS ModulesやTailwind CSSなどモダンなフレームワークでも採用が進んでいるが、従来のコードベースとの互換性や学習コストが移行の障壁になっている。