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:

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

• Anonymous
  June 25, 2014
  But probably, this is a talk with Windows 8/8.1, and a touch panel?

• Anonymous
  June 25, 2014
  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?

• Anonymous
  June 25, 2014
  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.

• Anonymous
  June 25, 2014
  Bugs reported at Connect: connect.microsoft.com/.../vertical-text

• Anonymous
  June 26, 2014
  @Martijn The non-selectable text is deliberate - you can see "user-select: none" in the CSS.

• Anonymous
  June 26, 2014
  when i download new IE , in installing time it want new updates ? why IE is confusion pack ? after install , restart Pc and ...

• Anonymous
  June 26, 2014
  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.

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

• Anonymous
  June 29, 2014
  Can anyone take a notice about this: connect.microsoft.com/.../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..

• Anonymous
  July 02, 2014
  @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 - developer.mozilla.org/.../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.

• Anonymous
  July 02, 2014
  @Bogdan.Brinza[MSFT] and @Martijn According to developer.mozilla.org/.../ruby and developer.mozilla.org/.../rt and developer.mozilla.org/.../rp Firefox does not support <ruby>, <rt> and <rp> which are important aspects of that demo page. Gérard

• Anonymous
  July 04, 2014
  After installing HTML Ruby 6.22.3 addons.mozilla.org/.../html-ruby Firefox 30 is able to render correctly this simple test: (...)  <ruby>    <rb>WWW</rb>    <rt>World Wide Web</rt>  </ruby> but it does not support writing-modes. Gérard

• Anonymous
  July 05, 2014
  Take a look into about:config in Firefox and toggle this preference to true "layout.css.vertical-text.enabled" to enabled writing mode. Regards

• Anonymous
  July 06, 2014
  The comment has been removed

• Anonymous
  July 06, 2014
  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]); ie.microsoft.com/.../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). Gérard

• Anonymous
  July 06, 2014
  How I wish that it can support text-transform: full-width!