Glossary
Glossary Logical properties

Logical properties

Also known as: css logical properties, margin-inline, inset-inline-start, block-start
TechCSSModern Css

Definition

CSS properties named by flow direction rather than physical side — margin-inline-start instead of margin-left, padding-block instead of padding-top and -bottom, inset-inline-end instead of right — so that a layout written once is correct in a right-to-left language or a vertical script without a mirrored stylesheet

Internationalization at the CSS level: inline is the direction text runs, block is the direction lines stack, and start and end follow the document’s dir and writing-mode. Tailwind exposes them as ms-4, pe-2, start-0; this site’s five locales are all left-to-right, so the difference is invisible today and would be the whole difference on the day an RTL locale is added. The habit costs nothing and the retrofit costs everything, which is the argument for writing logical properties from the first line.

Tech

Left and right are facts about a screen; start and end are facts about a language. A stylesheet written in the second kind is one that never has to be written twice.

Related Terms

  • a: Appearance
  • ?: Keyboard shortcuts