Flow Layout and Writing Modes

When describing Block and Inline layout I mentioned that while the CSS 2.1 specification which details how normal flow behaves assumes a horizontal writing mode, these properties should work in the same way in a vertical writing mode. In this guide, we will look at how flow layout behaves when used with different document writing modes.

This is not a comprehensive guide to the use of writing modes in CSS, the aim here is to document the areas where flow layout interacts with writing modes in ways that you may not have anticipated. The external resources and see also sections of this document will point you to more resources for writing modes.

The Writing Modes Specification

The CSS Writing Modes Level 3 Specification is where we look to understand the impact a change to the writing mode of the document has on flow layout. In the introduction to writing modes the specification says,

“A writing mode in CSS is determined by the writing-modedirection, and text-orientation properties. It is defined primarily in terms of its inline base direction and block flow direction”

The specification then goes on to define the inline base direction as the direction in which content is ordered on a line, this defines the start and end of the inline direction. The start is where sentences start, and the end is where a line of text ends before it would begin to wrap onto a new line.

The block flow direction is the direction in which boxes, for example paragraphs, stack in that writing mode. The CSS writing-mode property controls the block flow direction. If you want to change your page, or part of your page to vertical-lr then you can set writing-mode: vertical-lr on the element and this will change the direction of the blocks and therefore also the inline direction.

While certain languages will use a particular writing mode or text direction, we can also use these properties for creative effect, for example to run a heading vertically.

The writing-mode property and block flow

The writing-mode property accepts the values horizontal-tb, vertical-rl and vertical-lr. These values control the direction that blocks flow on the page. The initial value is horizontal-tb which is a top to bottom block flow direction, with a horizontal inline direction. Left to right languages such as English and Right to left languages such as Arabic are all horizontal-tb.

The following example shows blocks using horizontal-tb.

The value vertical-rl gives you a right-to-left block flow direction with a vertical inline direction, as shown in the next example.

The final example demonstrates the third possible value for writing-mode - vertical-lr. This gives you a left-to-right block flow direction and a vertical inline direction.

Boxes with a different writing mode to their parent

If you give a nested box a different writing mode to its parent, then an inline level box will display as if it has display: inline-block.

A block-level box will establish a new block formatting context, meaning that if its inner display type would be flow it will get a computed display type of flow-root. You can see this in the next example where the box which displays in horizontal-tb contains a float, which is contained due to its parent establishing a new BFC.

Replaced elements

Replaced elements such as images will not change their orientation based on the writing-mode property. However replaced elements such as form controls which include text should match the writing mode in use.

Logical Properties and Values

Once you are working in writing modes other than horizontal-tb many of the properties and values that are mapped to the physical dimensions of the screen seem strange. For example, if you give a box a width of 100px, in horizontal-tb that would control the size in the inline direction. In vertical-lr it controls the size in the block direction, because it does not rotate with the text.

Therefore we have new properties of block-size and inline-size. If we give our block an inline-size of 100px, it doesn’t matter whether we are in a horizontal or a vertical writing mode, inline-size will always mean the size in the inline direction.

The Logical Properties and Values specification includes logical versions of the properties that control margins, padding and borders as well as other mappings for things that we have typically used physical directions to specify.

Summary

In most cases flow layout works as you would expect it to when changing the writing mode of the document, or parts of the document. This can be used to properly typeset vertical languages or for creative reasons. CSS is making this easier by way of introducing logical properties and values so that when working in a vertical writing mode we can size things based on their inline and block size. This will be useful when creating components which can work in different writing-modes.

See Also

External Resources

Document Tags and Contributors

Contributors to this page: rachelandrew
Last updated by: rachelandrew,