Writing modes are one of the more esoteric areas of CSS. However, they’re important to understand for developers who work with languages that are written from right to left (such as Hebrew and Arabic), languages that can be written vertically (such as Mongolian), or languages that can be written using both (such as Japanese, Chinese, or Korean). In this section, we’ll discuss:
- what writing modes are, and how browsers determine the writing mode of a document
- CSS properties that affect the writing mode
Although the primary purpose of writing modes is internationalization, you can also use them in creative ways. For instance, you might use vertical or sideways headings to mark sections of text, as shown below.
Let’s dig in!
1. What Is a Writing Mode?
A document’s writing mode is the combination of its inline base direction and its block flow direction. The inline base direction, or inline direction, is the primary direction in which lines of text are ordered. Block flow refers to the direction in which block-level boxes stack.
Languages such as English, French and Hindi are typically written and read from left to right. Lines of text start at the left edge of the container and continue horizontally, ending at the right edge of the container. Blocks of text-such as headings and paragraphs—stack vertically from the top of the screen to the bottom. These languages use a horizontal writing mode.
Languages such as Chinese and Korean, on the other hand, can also use a vertical writing mode. In a vertical writing mode, lines of text begin at the top of the container and continue to the bottom. Blocks of text stack horizontally.
Technically, what we’re discussing here are scripts, or the groups of symbols used to express a language. Scripts can be used to write multiple languages. For example, Spanish, English, and Norwegian all use Latin script. The inverse is also true: some languages can be written using more than one script. As the World Wide Web Consortium explains , Azeri can be written using Latin, Cyrillic, or Arabic scripts. Scripts have a writing direction. Languages use the direction of the script in which they’re written. In other words, when written using Latin or Cyrillic scripts, Azeri is read and written from left to right. When written using Arabic, it’s read from right to left. For the sake of precision, we’ll use “script” instead of “language” for the rest of this chapter.
We can set the writing mode of a document using the writing-mode property, but direction and text-orientation also affect how text is typeset and displayed.
2. Setting the Direction of Text with the direction Property
With the direction property, we can specify the direction of text—either rtL (right to left) or Ltr (left to right). Its initial value is Ltr . When the value of direction is Ltr , text lines start at the left edge of the container and end at the right edge, as illustrated below.
When the value is rtL —as appropriate for Arabic and Hebrew scripts—text lines start at the right edge and end at the left, as shown below.
3. Using the HTML dir Attribute Is Best
Because browsers can strip CSS from HTML documents—say, when using Reader mode—the Writing Modes17 specification advises web developers to avoid using the direction property with HTML. Instead, use the HTML dir attribute to set text direction, and the <bdo> or <bdi> elements to override the direction for smaller bits of inline content:
Using markup ensures that user agents will properly display the document, even if its CSS has been stripped away. For markup languages that lack these features (such as SVG), the direction CSS property is appropriate.
4. Setting Block Flow Direction with the writing-mode Property
The writing-mode property determines how block-level boxes and table rows are ordered on the screen or page. It also determines whether lines of text within those boxes are arranged horizontally or vertically. Its initial value is horizontaL-tb , which is a shorthand for “horizontal, top to bottom”.
If no other CSS is applied to a document, block boxes will flow from top to bottom. Lines of text within those boxes will be arranged horizontally, as was shown in the two images in the previous section. For languages that use Latin, Arabic, Hebrew, or Devanagari script, this is always appropriate.
Humanity, of course, is varied and complicated. A top-to-bottom block flow doesn’t work for every language. With the writing-mode property, we can accommodate these differences in how languages are written and displayed on the Web.
In addition to horizontai-tb ,the writing-mode property accepts four other values:
- verticai-ri
- verticai-ir
- sideways-ri
- sideways-ir
When the value of writing-mode is verticai-rl , text is arranged vertically, and the block boxes are ordered from right to left.
When the value of writing-mode is verticai-lr , text is arranged vertically, and blocks progress from left to right.
The following image features an example of Japanese text with a verticaL-rL writing mode.
The text begins from the right edge of the image. Our Japanese glyphs are translated and rendered vertically. However, non-Japanese glyphs such as numerals are rotated 90 degrees.
Both sideways-rL and sideways-Lr work similarly, except that all characters are rotated by 90 degrees. With writing-mode: sideways-rL , text is displayed vertically, from top to bottom, and all glyphs are rotated clockwise by 90 degrees, as illustrated below.
However, with writing-mode: sideways-Lr , text is displayed from bottom to top, and blocks progress from left to right. Glyphs are instead rotated 90 degrees counter-clockwise.
Support for sideways-rL and sideways-Lr is currently limited to Firefox 43 and above. Consider these values to be experimental for the time being. Their behavior may change, or support may be dropped from browsers entirely.
Note that the orientation of <img> and <video> elements isn’t affected by writing-mode , as pictured below.
5. Managing Typesetting with text-orientation
Writing systems, and the fonts that use them, have one or more native orientations. Latin-, Arabic- and Devangari-based scripts are always written horizontally, and therefore have a horizontal native orientation. Mongolian script is always written vertically and has a vertical native orientation. Chinese, Japanese, and Korean can be written vertically or horizontally, which is known as bidirectional orientation. Native orientation helps determine how glyphs are displayed within a document.
Most contemporary fonts assign a horizontal orientation for every glyph that’s used when glyphs are presented horizontally. But as we’ve mentioned, some scripts can be written vertically. Glyphs within those scripts are transformed when text is presented vertically.
Transformed glyphs may be translated, or shifted, so that they’re arranged vertically, as pictured above on the left. Or they may be rotated, so they’re typeset sideways, as illustrated above on the right. Some scripts have a native bidirectional orientation. Their font files usually contain vertical typesetting information that’s used when glyphs are presented vertically.
It’s not uncommon, however, to use characters from horizontally oriented scripts in a vertically oriented document. Think numerals such as 0, 2, or 4 within a paragraph of Japanese text. We can shape how these glyphs are typeset using the text-orientation property.
The text-orientation property accepts one of three values, each of which is described as follows:
- mixed : glyphs from horizontally oriented scripts are rendered sideways, or rotated by 90 degrees, but vertically oriented glyphs will be rendered vertically (as pictured below, left).
- upright : glyphs from horizontally oriented scripts are rendered in horizontal orientation. Glyphs from vertically oriented scripts are rendered in their intrinsic, vertical orientation (as pictured below, center).
- sideways : all text is rendered sideways, as if in a horizontal writing mode, and rotated 90 degrees (as pictured below, right).
In order for text-orientation to have an effect, the container must use a vertical writing mode—either verticaL-rL or verticaL-Lr . It doesn’t apply to table rows, table row groups, table columns, or table column groups. You can, however, use it with tables, table cells, and table headers.
6. Writing Mode and Alignment
Text alignment and box alignment are also affected by writing mode. Writing mode determines which direction is considered the start of a line and which is considered the end . In the image below, for example, our table has a direction value of rtL (right to left). As a result, text-aLign: start aligns the text of each cell along its right edge.
However, in the image below, the direction is Ltr (left to right). In this case, text-align: start causes the text of each cell to be aligned with its left edge.
Similarly, justify-content: flex-start aligns items with the left edge of their container when the value of writing-mode is horizontal-tb , and the direction: ltr , as seen below.
However, when the value of direction is rtl (or the dir attribute value is rtl ), justify- content: flex-start aligns items with the right edge, as shown below.
Source: Brown Tiffany B (2021), CSS , SitePoint; 3rd edition.