CSS Logical Properties

A guide to writing direction-agnostic CSS using logical properties that adapt to different writing modes and text directions.

Usage

Ask about CSS logical properties, writing modes, RTL support, or internationalized layouts.

Examples

• "Convert physical margin/padding to logical properties"
• "How do logical properties handle RTL languages?"
• "Build a layout that works in both LTR and RTL"

Guidelines

• Use inline for horizontal axis and block for vertical axis
• Replace margin-left/right with margin-inline-start/end
• Replace padding-top/bottom with padding-block-start/end
• Use logical border-radius like border-start-start-radius
• Test with dir attribute to verify RTL behavior