In Chapter 3, the dir attribute and <bdo> and <bdi> elements were introduced that are used in specifying text direction and ordering. Ideally, these should always be used instead of CSS properties, such as those introduced here, because some user agents may not support CSS. In CSS, the properties used to specify the direction flow of content are addressed under the general banner of writing modes. These properties are intended to provide support for various international writing modes, such as left- to-right (used, for example, in Latin and Indie languages), right-to-left (used, for example, in Arabic and Hebrew), bidirectional (used, for example, in mixed Latin and Arabic), and vertical (used, for example, in some Asian languages).
Writing mode is detennined in tenns of the inline base direction of text and the direction of block flow. For example, the inline base direction of text in English writing is left-to-right and the direction of block flow is top-to-bottom. The main properties used in writing modes are direction, writing-mode, text-orientation, and text-combine-upright. Another, the unicode-bidi property, which is used to override the Unicode bidi algorithm, is not recommended for Web designers. See Section 3.16 in Chapter 3 for more on the Unicode bidi algorithm.
1. direction
The direction property is generally equivalent to the HTML dir attribute introduced in Chapter 3. It is used to specify the inline base direction of the content of an element, but can also be used with the unicode-bidi property to override the ordering of the characters of text, as can be done using the <bdo> element discussed in Chapter 3. It is inherited and the values it takes are ltr (which displays content left to right and is default) and rtl (which displays content right to left). When used on a <table> element, it contributes to how the contents of table columns are ordered. It can also be used on specific <tr>, <td>, and <th> elements. Figure 14.19 shows example of how it is used and Figure 14.20 the effect.
In the example, the content of the first <p> element is displayed using the default Itr base direction. In the <p> element of class=“first”, specifying Itr does not make a difference. In the <p> element of class=“second”, rtl makes the text start from the right. In the fourth <p> element, the Arabic text is not displayed from the right as it should be, because the default Itr base direction is used. In the <p> element of class=“third”, specifying rtl makes the text display correctly from the right. In the <p> element of class=“fourth”, the unicode-bidi property is used to override the bidi algorithm and set the base direction to rtl, even though the correct direction for displaying the text is left to right. Notice that the result is similar to when the dir attribute and <bdo> element were used in Chapter 3.
2. writing-mode
The writing-mode property allows you to specify whether the inline content should be laid out horizontally or vertically, and the direction of block flow (i.e., direction in which new lines are stacked). It is inherited and the values supported are listed in Table 14.6. Figures 14.21 and 14.22 show how the property is used, using English and Japanese, and Figure 14.23 the effects.
In the example, horizontal-tb was used for the content of each cell in the first row; vertical-lr for those in the second, and vertical-lr for those is the third. The horizontal and vertical scripts say “Introduction to Writing Modes,” while the mixed script says “Introduction to Writing Modes 2016.”
3. text-orientation
The text-orientation property allows you to specify the orientation of text within a line. It is useful for controlling how vertical scripts are displayed and also for presenting table headers. As of time of writing, it only has an effect on vertical writing mode. It is inherited and the values it supports are listed in Table 14.7. Figure 14.24 shows their effects using English and Chinese text.
To achieve the example, each of the three rules used to specify the text-orientation property also specifies the writing-mode property with the value of vertical-rl.
4. text-combine-upright
The text-combine-upright property is used to combine and place multiple characters in the space of a single character in vertical writing mode. The combined text must not be displayed wider than lem and is displayed as a single upright glyph. If there are too many characters in a sequence to fit into lem (e.g., 2016), the characters are not combined; rather, each character is displayed vertically and upright. The property is often used to display horizontal text (e.g., Latin-based dates and initials) in East Asian documents. The property is inherited and only has effect in vertical writing mode. Table 14.8 list the values it supports and Figures 14.25 and 14.26 show its usage and the illustration of the effect.
In the example, the ,date{} rule says to fit two characters into the space for one. Note that Figure 14.26 does not show the actual output of the code, only a rough illustration of what should be produced, as the property is not yet supported by major browsers as of time of writing.
Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.