Vertical writing mode improvements in IE11

Internet Explorer 11 June 2014 update improves and advances vertical writing mode layout. This enables features such as constant center baseline and ruby positioning preserving line height. Together, those improvements enable rich, interactive textbooks and publications for locales supporting vertical writing mode, such as Japanese locale.

To get hands on experience and see the improvements please try the Vertical Writing Mode Improvements Test Drive:

Vertical writing mode improvements
Center baseline allows characters and glyphs to stay correctly aligned, even when they have additional ruby characters that are positioned preserving element’s line height

With those updates, content creators can tap into Internet Explorer powerful vertical layout features in their Web sites, Web applications and modern Windows apps. We look forward your feedback through Connect.

— Bogdan Brinza, Program Manager, Internet Explorer

Comments (16)

  1. aaa says:

    But probably, this is a talk with Windows 8/8.1, and a touch panel?

  2. Martijn says:

    In fully-up-to-date IE11:

    1) Text is not selectable

    2) Numeral digits and alphabetic characters are turned 90 degrees

    3) In "combine text", some numerals seem arbitrarily put together in pairs of two, or something, but alphabetic text is still the wrong way up.

    In fully up-to-date Firefox:

    4) NOTHING works, not even text size. So you're obviously doing something wrong somewhere somehow.

    Can we assume these problems will be fixed?

  3. matarillo says:

    The improvements are great, but I, one of Surface RT users in Japan, strongly urge IE to promptly support W3C CR values(horizontal-tb, vertical-rl, vertical-lr). SVG1.1 writing-mode values (lr, lr-tb, rl, rl-tb, tb, and tb-rl)  are deprecated, you know.

    Store App version of Kindle is still unavailable in Japan, and I suppose the reason is IE's lack of "vertical-rl" support. Tired of waiting.

  4. Echo 8 says:


    The non-selectable text is deliberate – you can see "user-select: none" in the CSS.

  5. serni says:

    when i download new IE , in installing time it want new updates ?

    why IE is confusion pack ?

    after install , restart Pc and …

  6. NumbStill says:

    Please, fix the demo to use the standardized writing-mode values (vertical-rl) in addition to the proprietary values supported by Internet Explorer (tb-rl), including prefixes for other browsers as necessary in order to have a true comparison when running the demos under various browsers.

  7. NumbStill says:

    (And, of course, just like your demo uses the -ms- prefix, make sure it adds the relevant prefixed properties and non prefixed properties)

  8. Polak says:

    Can anyone take a notice about this:…/xpath-2-and-3-in-microsoft-world

    W3C has approved XPath 3 now. Microsoft hasn't brought even the old XPath 2 support in any of their products (SharePoint, Internet Explorer, .NET).

    Is this the "commitment to standards" we were promised lately? Let alone the MathML which is 15 years old standard. According to Scott Hanselman, its only supported by Firefox so its ok! No sir, its not OK. Microsoft IE was developed before Mozilla foundation was formed or Google Corporation was established. So its not a big ask to expect IE to take the lead in Standards support..

    C99 is fully supported in MSVC now, please bring those established standards in Internet Explorer (at least!). If you open source certain feature branch, I am ready to contribute, so are many others I am sure..

  9. Bogdan.Brinza[MSFT] says:

    @Martijn – we've updated the demo with feedback to allow text selection and fix few bugs. The content was specifically developed by Japanese subsidiary, so I cannot comment on that points.

    Also to my best knowledge Firefox doesn't support vertical layout features, see this article for more information –…/writing-mode

    @NumbStill, @matarillo – this is a snapshot of our work in progress in this area and we've developed the demo to show recent Internet Explorer improvements. In one of the next versions we hope to enable current Writing modes standards updates.

    Vertical layout and writing modes have many areas where browsers have different implementations in positioning, centering and alignment. We hope to improve interoperability in this area through continued CSS working group participation with other vendors.

  10. Gérard Talbot says:

    @Bogdan.Brinza[MSFT] and @Martijn

    According to…/ruby



    Firefox does not support <ruby>, <rt> and <rp> which are important aspects of that demo page.


  11. Gérard Talbot says:

    After installing HTML Ruby 6.22.3…/html-ruby

    Firefox 30 is able to render correctly this simple test:




       <rt>World Wide Web</rt>


    but it does not support writing-modes.


  12. Ahmad Saleem says:

    Take a look into about:config in Firefox and toggle this preference to true "layout.css.vertical-text.enabled" to enabled writing mode.


  13. Gérard Talbot says:

    @Ahmad Saleem

    Yes, you are correct. But glyphs orientation in vertical text still has not been implemented. So far, only CSS parsing of writing modes.

    The meta-bug appears to be

    Bug 145503: (writing-mode) CSS3 writing-mode (vertical text)


    There seems to be issues anyway with the demo.

    line 65: <label><input type="radio" name="hyphens" onclick="SetWritingMode('vertical');" />Vertical</label>


    we can read

    function SetWritingMode(mode) {

       var horizontal = (mode === "horizontal");

       var value = horizontal ? "lr-tb" : "tb-rl";

       $("textCombine").disabled = horizontal ? "disabled" : "";

       SetPropertyValue("writing-mode", value);


    function TextCombine() {

       var checked = $("textCombine").checked;

       var value = checked ? "digits 2" : "none";

       SetPropertyValue("-ms-text-combine-horizontal", value);


    while the editor's draft



    and the CR



    both state

    Name: writing-mode

    Value: horizontal-tb | vertical-rl | vertical-lr

    Name: text-combine-upright

    Value: none | all | [ digits <integer>? ]

    and do not mention text-combine-horizontal .

    "tb-rl" (which is the js result of SetWritingMode ('vertical') is deprecated; "vertical-rl" has replaced "tb-rl" but the demo has not been updated to reflect this.


  14. Gérard Talbot says:

    The more I examine the demo, the more I have questions and doubts.

    <span class="marked">

    <span class="emphasis">

    <span class="tcy">

    Where are classes marked, emphasis and tcy defined?


    "This demo allows you to see effects of the CSS Writing Modes and CSS Text Decoration modules (…)"

    Where exactly are we supposed to see the effects of CSS Text Decoration module in that demo ?


    var browserInfo = (function () {

           var isPPB = false;                  // if true, browser is an Internet Explorer platform preview        

           var isPPB6 = false;                 // if true, browser is IE9 PPB6 or newer

           var isIE = false;                   // if true, browser is any version of Internet Explorer (including platform previews)

           var isChrome = false;               // if true, browser is any version of Chrome

           var isOpera = false;                // if true, browser is any version of Opera

           var isSafari = false;               // if true, browser is any version of Safari

           var isFirefox = false;              // if true, browser is any version of Firefox


           var browserVersion = 0;             // Browser version number

           /*  Initialize flags ————————————————*/

           var version;

           // Parse UA string for browser name and version

           if (version = document.documentMode) {

               isIE = true;

               browserVerison = document.documentMode;

           } else if (version = /Firefox/(d+.d+)/.exec(navigator.userAgent)) {

               isFirefox = true;

               browserVerison = parseFloat(version[1]);

           } else if (version = /Chrome/(d+.d+)/.exec(navigator.userAgent)) {

               isChrome = true;

               browserVerison = parseFloat(version[1]);…/FeatureDetection.js

    browserVersion suddenly is replaced with browserVerison ("i" and "s" are permutated) and browserVerison has everything to do with browser sniffing of user agent string and nothing to do with feature detection (albeit document.documentMode is IE9-and-higher-specific).


  15. _bug_ says:

    How I wish that it can support text-transform: full-width!