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-mode Internet Explorer
Mozilla Firefox
Apple Safari
Google Chrome
6 7 8 3.6 4 4
lr-tb yes yes yes yes yes yes
rl-tb emulatable yes yes emulatable emulatable emulatable
lr-bt no no yes no no no
rl-bt no no yes no no no
tb-lr no no yes no no no
tb-rl yes yes yes emulatable emulatable emulatable
bt-lr no no yes no no no
bt-rl emulatable yes yes emulatable emulatable emulatable

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!

< Newer
If the Menu Fitts, We Must Acquit
Older >
Trash that &#8220;Back to Top&#8221; Link

Zach Leatherman IndieWeb Avatar for a builder for the web and the creator/maintainer of IndieWeb Avatar for https://www.11ty.devEleventy (11ty), an award-winning open source site generator. At one point he became entirely too fixated on web fonts. He has given 81 talks in nine different countries at events like Beyond Tellerrand, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Formerly part of CloudCannon, Netlify, Filament Group, NEJS CONF, and NebraskaJS. Learn more about Zach »

  1. Po-chiang Chao Disqus

    31 Mar 2010
    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.
  2. luke barker Disqus

    21 Sep 2010
    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!)
  3. Sriram Sivakumar Disqus

    11 Jun 2013
    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?
Shamelessly plug your related post

These are webmentions via the IndieWeb and

Sharing on social media?

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)