In this post, I'll be introducing you to a new CSS property writing-mode which many of you might not have heard of, but can be very useful certain times. Before starting, let's have a brief overlook on the key application of this property.
Normally, Latin languages like English are written from left to right and starts from top towards the bottom. However, there are many different writing modes apart from this. There are certain scripts like Arabic and Hebrew which are written from right to left. These are the languages with horizontal orientation. There are even languages with vertical orientation in which a line of text starts from the top of the page to the bottom. These include the CJK script (Chinese, Japanese and Korean script).
In all such cases where different writing modes are required, the writing-modeproperty can be used. This property defines the alignment and direction of lines of text (i.e. whether the lines of text goes horizontally or vertically) and the direction in which the block of text advances.
Values
The values of this property specify two directions - the direction in which the lines of text run (text flow direction) and the direction in which the block of text is read (block flow direction). This may sound a little confusing right now, but will soon be understandable as you'll go through the examples. The three values that this property can take are explained below.
horizontal-tb
This value specifies that the text lines are horizontal and the block of text is to be read from top to bottom. Thus, the text is read from left to right, and top to bottom. This is also the default value.
For the writing-mode property to get support from all the browsers, the vendor prefixes -ms-, -webkit- and -moz- are used. For IE, an additional value is defined which is lr-tb (left to right, top to bottom) for this particular case.
CSS
-ms-writing-mode: lr-tb;
-webkit-writing-mode: horizontal-tb;
-ms-writing-mode: horizontal-tb;
-moz-writing-mode: horizontal-tb;
writing-mode: horizontal-tb;
See the Pen bRpQxW by Aakhya Singh (@aakhya) on CodePen.
This is the most commonly used writing mode for most of the languages. You can also change the direction of text flow from right to left by giving the value rtl to the direction property as shown below.
CSS
-ms-writing-mode: rl-tb;
-webkit-writing-mode: horizontal-tb;
-ms-writing-mode: horizontal-tb;
-moz-writing-mode: horizontal-tb;
writing-mode: horizontal-tb;
direction: rtl;
See the Pen Writing Modes in CSS with text direction rtl by Aakhya Singh (@aakhya) on CodePen.
vertical-rl
The text direction specified by this value is vertical and the block of text is read from right to left. Thus, the value defined for IE is tb-rl.
CSS
-ms-writing-mode: tb-rl;
-webkit-writing-mode: vertical-rl;
-moz-writing-mode: vertical-rl;
-ms-writing-mode: vertical-rl;
writing-mode: vertical-rl;
See the Pen gRrZWG by Aakhya Singh (@aakhya) on CodePen.
vertical-lr
This value specifies the direction of text flow vertically from top to bottom as in the previous case, but the direction in which the block of text is read from left to right.
CSS
-ms-writing-mode: tb-lr;
-webkit-writing-mode: vertical-lr;
-moz-writing-mode: vertical-lr;
-ms-writing-mode: vertical-lr;
writing-mode: vertical-lr;
See the Pen Writing Modes in CSS: vertical-lr by Aakhya Singh (@aakhya) on CodePen.
sideways-lr and sideways-rl
These two are experimental values and hence should not be used in code at present. Let's look at both the values
The sideways-rl value specifies the direction of text flow from top to bottom and the direction in which the block of text is read from right to left and sets the glyphs sideways towards the right.
The sideways-lr value specifies the direction of text vertically from top to bottom and the block flow direction from left to right and sets the glyphs sideways towards the left.
Summing Up
writing-mode: horizontal-tb;
writing-mode: vertical-rl;
writing-mode: vertical-lr;
writing-mode: sideways-rl;
writing-mode: sideways-lr;
This property is used not just for languages with different writing mode orientations. It can also be used by Latin languages like English in different ways.
More with vertical text
In many books or magazines, you must have noticed the title being displayed vertically by the side of the text. This can be done by setting the value of writing-mode as vertical-lr for the heading and positioning it at the top right of its parent if you want the vertical headline to be on the right side of the text. For that, you need to give position: relative to the parent and position: absolute to the heading.
See the Pen Vertical Headline Using Writing Modes in CSS by Aakhya Singh (@aakhya) on CodePen.
To display the title vertically on the left side of the text, set the writing-modevalue as vertical-lr and position it at the top left of its parent div. Also rotate the heading by 180 degrees by using the transform property so that the heading faces the text.
See the Pen Vertical Headline With Writing Mode by Aakhya Singh (@aakhya) on CodePen.
You can change the orientation of the characters of the vertical text to be vertical as well. This can be done by giving the value upright to the text-orientationproperty as shown below.
See the Pen JJXVRo by Aakhya Singh (@aakhya) on CodePen.
In the above code, I also set the letter-spacing value as -5px so that the letters of the title move closer to each other vertically.
Another application of this property can be to position the social share icons vertically.
See the Pen Vertical positioning of social icons using writing-mode property by Aakhya Singh (@aakhya) on CodePen.
You can position it at different heights by enclosing the images in a span and giving different margin-top values to it. In the following demo, I have given this value as 35%.
See the Pen Positioning social icons using writing-mode property by Aakhya Singh (@aakhya) on CodePen.
Another example of where you can use this property is given below.
See the Pen Vertical tag using writing mode property by Aakhya Singh (@aakhya) on CodePen.
Browser Support
This property is supported by almost all the browsers by using the prefixed versions, though IE doesn't fully support it. This property is not supported by Opera Mini.
