Logical properties adapt layouts for different writing modes and languages. Here's how to use them.
Physical vs Logical#
Loading code block...
Block and Inline Axes#
Loading code block...
Sizing Properties#
Loading code block...
Padding and Margin#
Loading code block...
Border Properties#
Loading code block...
Position Properties#
Loading code block...
Text Alignment#
Loading code block...
Writing Modes#
Loading code block...
RTL Support#
Loading code block...
Practical Examples#
Loading code block...
Scroll Properties#
Loading code block...
Migration Strategy#
Loading code block...
Best Practices#
Adoption:
✓ Use logical properties for new code
✓ Migrate gradually
✓ Test with RTL languages
✓ Consider writing mode changes
Naming:
✓ block = vertical (in horizontal modes)
✓ inline = horizontal (in horizontal modes)
✓ start/end instead of left/right
✓ Use shorthand when possible
Avoid:
✗ Mixing physical and logical for same property
✗ Assuming left-to-right only
✗ Forgetting border-radius logical values
✗ Ignoring writing-mode contexts
Conclusion#
Logical properties create layouts that adapt to different writing modes and text directions. Use them for international-ready designs, replacing physical properties like margin-left with margin-inline-start. They're well-supported in modern browsers and essential for RTL language support.