Logical properties make internationalization seamless. Instead of manually flipping your entire layout for RTL languages, the browser handles direction changes automatically when you use logical properties. This reduces code duplication and makes your stylesheets work across all writing modes.
Logical Properties and Writing Modes
The web is global, but CSS was originally designed for left-to-right, horizontal English text. Logical properties solve this by describing layout in terms of inline and block directions rather than physical top, right, bottom, and left. This makes your CSS work automatically across different writing modes, including right-to-left (RTL) languages like Arabic and Hebrew, and vertical writing modes used in Japanese and Chinese.
Understanding Inline and Block Directions
Instead of thinking about physical directions (top, right, bottom, left), logical properties use flow-relative directions based on how content flows in a given writing mode.
Block Direction
The block direction is the direction block-level elements stack. In horizontal writing modes (English, Arabic, Hebrew), blocks stack vertically from top to bottom. In vertical writing modes (traditional Japanese, Chinese), blocks stack horizontally.
Inline Direction
The inline direction is the direction text flows within a line. In left-to-right languages (English), inline flows left to right. In right-to-left languages (Arabic, Hebrew), inline flows right to left.
English (LTR, Horizontal)
Inline Direction →
Block Direction
First paragraph
Second paragraph
Third paragraph
Arabic (RTL, Horizontal)
← Inline Direction
Block Direction
الفقرة الأولى
الفقرة الثانية
الفقرة الثالثة
Physical vs Logical Properties
Physical properties reference absolute directions that do not change with writing mode. Logical properties adapt based on the document's direction and writing mode.
Common Property Mappings
| Physical Property | Logical Property | What It Controls |
|---|---|---|
margin-left |
margin-inline-start |
Start of inline direction |
margin-right |
margin-inline-end |
End of inline direction |
margin-top |
margin-block-start |
Start of block direction |
margin-bottom |
margin-block-end |
End of block direction |
padding-left / padding-right |
padding-inline |
Both inline edges |
padding-top / padding-bottom |
padding-block |
Both block edges |
border-left |
border-inline-start |
Start border in inline direction |
width |
inline-size |
Size in inline direction |
height |
block-size |
Size in block direction |
Interactive Property Comparison
See how physical properties stay fixed while logical properties adapt to writing direction. Toggle between LTR and RTL to see the difference.
Direction:
Physical Properties (Fixed)
This box uses margin-left and border-left.
The margin and border stay on the physical left side regardless of direction.
Logical Properties (Adaptive)
This box uses margin-inline-start and border-inline-start.
The margin and border move to the start of the inline direction.
Right-to-Left (RTL) Languages
Languages like Arabic, Hebrew, and Persian read from right to left. Using logical properties ensures your layouts adapt automatically when you add dir="rtl" to your HTML.
Interactive RTL Demo
Toggle between English and Arabic to see how the entire layout flips with logical properties.
Language:
📰
Understanding Logical Properties
Vertical Writing Modes
Some languages like traditional Japanese and Chinese can be written vertically. The writing-mode property controls text orientation, and logical properties automatically adapt to vertical layouts.
Writing Mode Examples
Horizontal (Default)
This is horizontal text, reading left to right, top to bottom.
writing-mode: horizontal-tb;
Vertical Right-to-Left
縦書きの日本語テキストです。右から左へ、上から下へ読みます。
writing-mode: vertical-rl;
Vertical Left-to-Right
这是垂直的中文文本。从左到右，从上到下阅读。
writing-mode: vertical-lr;
Notice how the same logical properties work across all writing modes. A margin-inline-start always refers to the start of the inline direction, whether that is left, right, top, or bottom.
When to Use Logical vs Physical Properties
Use Logical Properties When:
- Building multilingual sites that support RTL languages
- Creating reusable components that need to work in any direction
- Working with writing modes (vertical text)
- Building design systems meant for international use
- You want future-proof, adaptable layouts
Use Physical Properties When:
- Positioning decorative elements that should not flip (logos, icons)
- Creating visual effects that depend on absolute positioning
- Working with animations or transforms that need physical directions
- Dealing with third-party components that expect physical properties
Default to logical properties: Even if your site only supports English today, using logical properties costs nothing and makes future internationalization much easier. Consider them the default choice unless you have a specific reason to use physical properties.
Practical Implementation Tips
Setting Document Direction
Use the dir attribute on the <html> element to set the document's text direction. The browser automatically applies the correct direction to all elements using logical properties.
<!-- For English or other LTR languages -->
<html lang="en" dir="ltr">
<!-- For Arabic or other RTL languages -->
<html lang="ar" dir="rtl">
<!-- For Hebrew -->
<html lang="he" dir="rtl">
Mixing Directions
You can mix directions within a document using the dir attribute on specific elements. This is useful when quoting text from another language.
<p>
In Arabic, "hello" is <span lang="ar" dir="rtl">مرحبا</span>.
</p>
Browser Support
Logical properties have excellent browser support. All modern browsers support the complete set of logical properties and writing modes. For older browser compatibility, check Can I Use.
Check Your Understanding
A student just completed learning about logical properties and writing modes. They learned the difference between inline and block directions, how logical properties like margin-inline-start adapt to writing direction while physical properties like margin-left stay fixed, how RTL languages work, and when to use logical vs physical properties. They understand that logical properties are preferred for internationalization but physical properties are sometimes needed for decorative elements or absolute positioning.\n They are analyzing scenarios to determine when to use logical vs physical properties. Review their reasoning and provide feedback. Check whether they correctly identified when logical properties are beneficial and when physical properties are more appropriate. Common mistakes include thinking all properties should be logical, not recognizing when decorative elements need physical positioning, or misunderstanding how writing modes affect property behavior. Guide them back to specific concepts rather than providing answers.
/**
* For each scenario, determine if you should use
* logical or physical properties, and explain why:
*
* 1. Padding on a button component that will be used
* in both English and Arabic versions of a site
*
* 2. Positioning a decorative corner graphic that should
* always appear in the top-right corner
*
* 3. Margin between paragraphs in an article that may
* be displayed in various writing modes
*
* 4. Border on a sidebar that should adapt when the
* site switches between LTR and RTL
*
* 5. Transform animation that rotates an element
* in a specific physical direction
*/
Additional Resources
- MDN: CSS Logical Properties — Complete reference with examples
- RTL Styling 101 — Comprehensive guide to RTL web design
- W3C: Structural markup and right-to-left text — Official guidance on text direction
Summary
Logical properties transform how we think about layout by describing direction in flow-relative terms rather than physical absolutes. This makes internationalization natural rather than an afterthought. As you continue building websites, consider logical properties your default choice for spacing, sizing, and positioning. Your future international users will thank you, and your code will be more adaptable and maintainable.