Internationalization

2 articles

CSS 02 Sep 2026 4 min read

CSS Logical Properties for International and Reusable Layouts

Traditional CSS often describes layout with physical directions: left, right, top, and bottom. That is intuitive until the same component must work in a right-to-left language or a different writing mode. Logical properties describe layout relative to the flow of text. Instead of saying “left padding,” you can say “padding at the inline start.” The browser maps that intent to the correct physical edge. Think in block and inline axes CSS logical layout uses two axes:

CSS Logical Properties

CSS 01 Sep 2026 3 min read

CSS Logical Properties for International and Flexible Layouts

CSS traditionally describes spacing and borders with physical directions such as left, right, top, and bottom. That works until a component must support right-to-left text or a writing mode where the inline direction is not horizontal. Logical properties describe layout relative to the flow of text. They make components more adaptable without maintaining a second set of directional overrides. Physical versus logical directions In a typical English document, the inline axis runs from left to right and the block axis runs from top to bottom. Logical properties name those axes instead of assuming screen directions.

CSS Responsive Design