Writing mode

As explained in CSS in Depth, Second Edition

A CSS writing mode determines the directions in which inline content flows and block boxes stack.

A writing mode changes the inline direction of text and the block direction in which boxes stack. This matters when layouts must support right-to-left or vertical languages. section 3.1.2

Use logical directions instead of assuming horizontal top-to-bottom layout:

• Use inline-size instead of width and block-size instead of height; each adapts to the current writing mode. section 3.1.2
• Use inline-start and inline-end or block-start and block-end instead of left, right, top, and bottom. section 3.1.2
• Treat inline direction as text flow and block direction as the stacking direction for boxes such as paragraphs. section 3.1.2

Figure 3.5 Inline and block directions in various writing modes

Compare inline and block directions across several writing modes, including the highlighted inline-start border. section 3.1.2

How CSS in Depth, Second Edition covers it

How deep it goes

Explains inline and block directions and their logical sizing and edge terms, without detailing browser implementation.

Examples

Uses right-to-left languages, vertical languages, and diagrams of inline and block directions.

What it assumes

Assumes familiarity with normal document flow and teaches direction-aware alternatives to physical dimensions and edges.

What you can do after

Apply it via CSS logical properties to create layouts that adapt across writing directions.

How it connects

Connects document flow with logical properties, inline direction, block direction, and the box model.

liveBookmanning.com

Read CSS in Depth, Second Edition on liveBook Get the book at manning.com

Related concepts

• logical propertyused by · A CSS logical property expresses a dimension or position relative to writing direction and flow rather than a fixed physical side or axis.
• viewport unitused by · The CSS vw unit is a viewport-relative length equal to one percent of the viewport width.

This explainer was generated by Manning's knowledge graph from the text of CSS in Depth, Second Edition. The section links point to the parts of the book it draws on.