CSS Logical Properties and Values

Logical CSS Properties: A Comprehensive Guide

With cross-browser support for logical properties reaching a critical mass, now's the ideal time to explore their advantages. These properties are invaluable for multilingual websites, offering significant improvements in code efficiency and maintainability. Even for single-language sites, the streamlined syntax provides worthwhile benefits.

For instance, centering an element often involves this cumbersome code:

<code>.thing {
  margin-left: auto;
  margin-right: auto;
}</code>

While margin: 0 auto; offers a shorter alternative, it affects all margins. The margin-inline logical property provides a more precise solution, targeting only left and right margins.

Understanding "Inline" and "Block" Directions

The margin-inline property elegantly sets both margin-left and margin-right. Similarly, margin-block manages margin-top and margin-bottom. This simplification extends to border and padding properties. For example, border-inline applies borders only to the sides, avoiding individual directional specifications.

This approach shifts the focus from physical (left, right, top, bottom) to logical (inline, block) directions. Inline handles horizontal positioning, while block handles vertical positioning.

However, this relationship changes with variations in writing direction.

Writing Mode and Directionality

The examples above illustrate CSS logical properties—alternatives to traditional properties that abstract away physical directions.

CSS, initially designed for left-to-right (LTR) languages like English, doesn't inherently support right-to-left (RTL) languages like Arabic. HTML's dir attribute addresses this:

<div dir="rtl">...</div>

CSS offers an equivalent (direction: rtl;), though the HTML attribute is preferred for robustness.

Languages like Chinese, Japanese, Korean, and Mongolian can be written horizontally (LTR or RTL) or vertically. While horizontal writing is prevalent, vertical writing is more common in Japanese websites, sometimes mixed with horizontal text. Vertical writing orientations vary: Chinese, Japanese, and Korean typically start top-right, while Mongolian starts top-left. CSS's writing-mode property handles this:

• horizontal-tb: Default LTR/RTL, top-to-bottom.
• vertical-rl: RTL, top-to-bottom (Chinese, Japanese, Korean).
• vertical-lr: LTR, top-to-bottom (Mongolian).

Logical properties provide context-aware CSS. Spacing and layout adapt to both writing-mode and direction, enabling cross-language CSS reuse. This contrasts with relying on automatic translation, offering a superior user experience and allowing for region-specific content customization while maintaining consistent visual styling.

The image below illustrates the limitations of physical properties. Using margin-left (red), LTR spacing is correct, but RTL spacing is flawed. Logical properties resolve this.

Logical properties automatically adjust to the language context. In LTR languages, margin-inline-start sets the left margin; in RTL languages, it sets the right margin. For vertical text, it adjusts accordingly, placing the margin at the reading start point. The inline direction adapts to the element's writing-mode.

Complete List of Logical Properties and Values

Numerous CSS properties have logical equivalents. Adrian Roselli's visualization tool helps compare physical and logical properties under default LTR horizontal settings.

The following tables map physical and logical properties (using LTR horizontal mapping as a reference). Remember, the context-sensitive nature of logical properties is key.

Sizing

In horizontal mode, inline-size sets width, block-size sets height; in vertical mode, this reverses. Cross-browser support is excellent.

Borders

Excellent cross-browser support exists for logical border properties. Examples demonstrate border-inline-start, border-block-start, and border-block-end. Individual border color, width, and style properties also have logical counterparts, along with shorthand properties.

Margin and Padding

Logical margin and padding properties mirror each other, offering comprehensive cross-browser support and shorthands.

Positioning

Logical positioning offsets are available. inset-block-start maps to top (horizontal), inset-inline-start maps to left (LTR horizontal), and their behavior adapts to different writing modes. Modern browsers support these, with recent Safari inclusion. inset provides a shorthand for all four offsets. Note that inset is a shorthand for physical values, not logical properties.

Text Alignment

Logical text alignment (text-align: start, text-align: end) has strong browser support, adapting to LTR/RTL contexts.

Border Radius, Floats, and Other Properties

Logical border-radius properties have developing browser support. Logical float values have limited support. Proposed logical properties for overflow and resize have poor support.

Further Exploration

For deeper dives, consider these resources:

• “RTL Styling 101” (Ahmad Shadeed): Comprehensive guide to RTL styling.
• text-combine-upright (CSS-Tricks): For vertical text manipulation.
• Web Awards for Horizontal and Vertical Writings: Real-world examples of vertical typography.

Conclusion

While not requiring immediate codebase overhauls, adopting logical properties offers significant advantages. Excellent browser support and improved code clarity make them a worthwhile addition to any CSS workflow.

The above is the detailed content of CSS Logical Properties and Values. For more information, please follow other related articles on the PHP Chinese website!