Logical Properties

The CSS writing-mode property establishes the block flow direction and inline base direction for a document. It is the foundational context that gives logical properties their meaning. Common values include horizontal-tb (top-to-bottom, e.g., English), vertical-rl (right-to-left, e.g., Japanese), and vertical-lr (left-to-right, e.g., Mongolian). When an AI parser encounters margin-inline-start, it must reference the computed writing mode to determine whether this resolves to margin-left or margin-top. Without understanding writing mode, an agent cannot accurately map logical declarations to the physical rendered layout, leading to incorrect spatial relationship extraction.

The CSS direction property controls the inline flow of text within a writing mode, resolving to either ltr (left-to-right) or rtl (right-to-left). Combined with writing-mode, it creates a two-axis coordinate system for logical properties. For example, padding-inline-start in a horizontal-tb context with rtl direction places padding on the right side, while the same declaration with ltr places it on the left. AI models processing multilingual content must compute this bidirectional resolution to correctly interpret element spacing, alignment, and visual hierarchy across Arabic, Hebrew, and Western layouts.

The block axis represents the direction in which block-level boxes stack sequentially within their containing block. It is perpendicular to the inline axis. In horizontal-tb writing mode, the block axis runs vertically (top to bottom); in vertical-rl, it runs horizontally (right to left). Logical properties referencing the block axis include:

• margin-block-start / margin-block-end
• padding-block-start / padding-block-end
• border-block-start-width

AI parsers use block-axis positioning to determine content hierarchy and reading order, critical for extracting semantic sections from vertically-set East Asian documents.

The inline axis defines the direction along which inline-level content (text, spans, inline images) flows within a line. It is the primary reading axis. In horizontal-tb mode, the inline axis is horizontal; in vertical-rl, it is vertical. Logical properties on this axis include:

• margin-inline-start / margin-inline-end
• padding-inline-start / padding-inline-end
• text-align: start (resolves to left or right based on direction)

For AI-driven content extraction, inline-axis alignment signals the start and end of textual content, enabling accurate entity boundary detection regardless of script direction.

The inset-* logical properties replace physical top, right, bottom, and left for positioned elements. They map to the writing-mode-relative edges of a containing block:

• inset-block-start → physical top in horizontal-tb, physical right in vertical-rl
• inset-inline-end → physical right in ltr, physical left in rtl
• inset-block-end → physical bottom in horizontal-tb, physical left in vertical-rl
• inset-inline-start → physical left in ltr, physical right in rtl

These properties allow AI agents to compute absolute positioning within a document flow without hardcoding physical assumptions, essential for parsing overlays, modals, and fixed navigation across internationalized interfaces.

CSS provides logical equivalents for all physical border properties, enabling writing-mode-adaptive borders:

• border-block-start / border-block-end
• border-inline-start / border-inline-end
• border-start-start-radius (top-left in horizontal-tb ltr, top-right in horizontal-tb rtl)
• border-end-end-radius

These properties ensure that decorative and structural borders remain semantically consistent across scripts. An AI model analyzing a card component with border-inline-start: 4px solid blue can infer a visual accent on the reading start edge, regardless of whether the user's language reads left-to-right or right-to-left. This preserves the intended emphasis signal for content classification.