CSS Logical Properties for i18n Layouts

Technical Deep Dive & Specifications

The Two Axes: Block vs. Inline

================================================================================
                                 BLOCK AXIS (↓)
================================================================================
   INLINE AXIS (→ in LTR, ← in RTL)
   [Inline-Start] ───────────────────────────> [Inline-End]
   Paragraph 1: "The quick brown fox jumps..."
   
   [Inline-Start] ───────────────────────────> [Inline-End]
   Paragraph 2: "Over the lazy dog..."
================================================================================
                                 BLOCK END (↓)
================================================================================

1. Inline Axis: The direction in which text runs within a line. In horizontal English, it is horizontal (left to right). In Arabic, it is horizontal (right to left). In vertical Japanese, it is vertical (top to bottom).
2. Block Axis: The direction in which blocks of content (like paragraphs and headers) stack. In horizontal text, block axis runs vertically top to bottom.

Complete Physical-to-Logical Mapping Matrix

Logical Border Radius Anatomy

When styling rounded cards, tabs, or speech bubbles where only specific corners are rounded, physical corner properties (border-top-left-radius) break in RTL.

CSS Logical Properties introduce a 2D matrix for corners: border-[block-start/end]-[inline-start/end]-radius:

+-------------------------------------------------------------------------------+
|                       LOGICAL CORNER RADIUS MATRIX                            |
+-------------------------------------------------------------------------------+
| border-start-start-radius          | border-start-end-radius                  |
| (LTR: Top-Left  |  RTL: Top-Right) | (LTR: Top-Right  |  RTL: Top-Left)       |
| ───────────────────────────────────┼───────────────────────────────────────── |
| border-end-start-radius            | border-end-end-radius                    |
| (LTR: Bottom-Left | RTL: Bottom-Rt)| (LTR: Bottom-Right | RTL: Bottom-Left)   |
+-------------------------------------------------------------------------------+

/* A notification pill with a rounded tip at the start edge */
.pill-badge {
  border-start-start-radius: 16px;
  border-end-start-radius: 16px;
  border-start-end-radius: 0;
  border-end-end-radius: 0;
  /* Automatically flips in RTL with zero extra code! */
}

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

• Line 26 (inline-size: 100%; max-inline-size: 520px;): Sets the logical width of the card. If rotated into vertical writing mode, this smoothly governs block height.
• Line 28 (padding-block: 1.5rem; padding-inline: 1.5rem;): Defines top/bottom and left/right internal padding in a single logical statement.
• Line 30 (border-inline-start: 5px solid #2563eb;): Places a thick blue accent stripe at the start of the card. In LTR, this renders on the left edge; in RTL, it automatically flips to the right edge.
• Lines 31–32 (border-start-start-radius: 16px; border-end-start-radius: 16px;): Rounds the two start-side corners (left in LTR, right in RTL).
• Line 46 (margin-inline-end: 1rem;): Creates space between the avatar and the username text. In LTR, it pushes right; in RTL, it pushes left.
• Lines 63–64 (inset-block-start: 1rem; inset-inline-end: 1rem;): Positions the active status pill at the trailing corner of the card without writing separate top/left/right rules.

Expected Browser Render Output

• When clicking "English (LTR)", the blue accent line is on the left, the avatar is on the left, the status badge is on the top-right, and the button arrow points right (→).
• When clicking "Arabic (RTL)", the entire card layout mirrors automatically: the blue stripe flips to the right, the avatar shifts to the right, the badge jumps to the top-left, and the button arrow points left (←)—all powered by the exact same CSS file with zero override rules!