Zach’s ugly mug (his face)

Zach Leatherman

CSS 3 Text: A Tale of writing-mode Woe

February 12, 2010

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
Mozilla Firefox
Apple Safari
Google Chrome

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);


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!

Zach’s ugly mug (his face)

Zach is a builder for the web with IndieWeb Avatar for https://www.netlify.comNetlify. He created the IndieWeb Avatar for https://www.11ty.devEleventy site generator and is still fixated on web fonts. His public speaking résumé includes talks in eight different countries at events like IndieWeb Avatar for Conf,btconf’s AvatarBeyond Tellerrand, IndieWeb Avatar for Conference,CSSConf’s AvatarCSSConf, and IndieWeb Avatar for https://www.whitehouse.govThe White House. He is an emeritus of IndieWeb Avatar for https://www.filamentgroup.comFilament Group, nejsconf’s AvatarNEJS CONF, and still helps out with nebraskajs’s AvatarNebraskaJS. Read more about Zach »

If the Menu Fitts, We Must Acquit
Trash that “Back to Top” Link
3 Replies
    1. Po-chiang Chao Disqus

      30 Mar 2010 at 07:50PM
      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.
      1. luke barker Disqus

        20 Sep 2010 at 07:26PM
        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!)
        1. Sriram Sivakumar Disqus

          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?
            Social Card Image Preview

            This is what will show up when you share this post on Social Media:

            How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)