Zach’s ugly mug (his face)

Zach Leatherman

CSS 3 Text: A Tale of writing-mode Woe

12 Feb 2010 Read in about 6 minutes

After reading an interesting article on using the writing-mode CSS property to display vertical text (I’m always interested in how to abuse what browsers currently support into something new and exciting), I decided to look into this writing-mode property and see what opportunities it might present.

Generally when exploring a development opportunity, I tend to prioritize my adventures towards things that are supported in Internet Explorer first. This often has the biggest cross-browser payoff, since the other browser vendors tend to have a quicker draw than the Microsoft Team. However, surprisingly enough, this writing-mode study proved the opposite to be true. It seems very interesting that Microsoft has decided to implement a portion of the CSS 3 specification, given its general stance of moving slower than an iceberg to avoid “breaking the web.” But I, for one, welcome our new choose-your-own-adventure standards loving overlords.

As far as my tests go, the only browser to support the writing-mode property at all is Internet Explorer, which was very surprising. At it’s heart, though, writing-mode is just shorthand for two other properties: direction and block-progression. Luckily, Firefox, Safari, Chrome and IE back through at least version 6 support the direction property and have proprietary options for rotation, which allows for emulation of a few of the unsupported writing-mode‘s, but not all of them. The missing piece of writing-mode emulation belongs to the block-progression property, which isn’t supported by anyone, and would allow elements to flow reverse vertically (start at the bottom of a block and flow upwards).

It’s important to note that while IE8 has really set the bar for implementation here and has chosen to support writing-mode: lr-bt and writing-mode: rl-bt, they aren’t used to display any known language text. They’re just included for completeness, and aren’t a part of the W3C CSS 3 Text Module specification.

View the Demo / Test Page

Compatibility Table

writing-modeInternet Explorer
(Trident)
Mozilla Firefox
(Gecko)
Apple Safari
(Webkit)
Google Chrome
(Webkit)
6783.644
lr-tbyesyesyesyesyesyes
rl-tbemulatableyesyesemulatableemulatableemulatable
lr-btnonoyesnonono
rl-btnonoyesnonono
tb-lrnonoyesnonono
tb-rlyesyesyesemulatableemulatableemulatable
bt-lrnonoyesnonono
bt-rlemulatableyesyesemulatableemulatableemulatable

CSS Code for Emulation

Writing Mode: lr-tb

// Do nothing, this is the default

Writing Mode: rl-tb

direction: rtl;

Writing Mode: lr-bt

// Not possible using W3C spec

Writing Mode: rl-bt

// Not possible using W3C spec

Writing Mode: tb-lr

// Not possible using W3C spec

Writing Mode: tb-rl

-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

Writing Mode: bt-lr

// Not possible using W3C spec

Writing Mode: bt-rl

direction: rtl;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

Conclusion

Given that 4 of the 6 known writing modes are available or available through CSS emulation means we’re in pretty good shape on the internationalization front. Consulting the Microsoft provided table for common use cases, we’re only in trouble when trying to use the “Mongolian script writing system” and an “Arabic script block quote embedded in Mongolian script document.”

In some far fetched fantasy-world legacy application where a page may use tables for layout, I could see an application team possibly using the direction property to redistribute the tables for a print stylesheet. But that certainly wouldn’t be a common use case, since using CSS for layouts is going to give you much more flexibility in that regard. If you can think of any other off the wall uses for writing-mode or direction, I’d love to hear them!

Related

3 Comments

➡ Load Disqus to Leave a Comment ⬅

About the "tb-rl" part, IMO this might not be a very good emulating method, since CJK characters also "rotated" 90 degree with CSS transform, which is wrong -- CJK characters should be remained normal, and just the "text flow" rotated.

I only have this case tried this on Firefox, but I think the behavior of Webkit, and other browser rendering engines which don't support writing-mode, will do the same.

yes, the emulation is problematic in that the actual block in the flow is different when emulated to the writing-mode block. I forget which is which :) I think us web developers will soon be bale to add this to our designs though - I am interested in seeing if writing-mode is as consistently supported in ie9 too - don't suppose you know? nice blog. Laters. Luke. (I live in Glasgow!)

Sriram Sivakumar

11 Jun 2013 at 11:07AM

writing-mode css on IE 9 has issues in displaying the correct font. The font on screen is a squeezed making it hard to read. Is there any work-around for it?