The CSS Corner: writing-modehttp://blogs.msdn.com/b/ie/archive/2009/05/29/the-css-corner-writing-mode.aspxIntroduction
The writing-mode property enables text layout for non-Latin languages like Japanese and Arabic. Supported in IE since release 5.5, this property has been significantly updated in IE8. Our goals were threefold:
To make its behavioren-USTelligent Evolution Platform Developer Build (Build: 5.6.50428.7875)Mongolianhttp://blogs.msdn.com/b/ie/archive/2009/05/29/the-css-corner-writing-mode.aspx#9727295Thu, 11 Jun 2009 21:14:32 GMT91d46819-8472-40ad-a661-2c78acb4018c:9727295Joe Clark<p>Classical Mongolian adds characters from top to bottom and stacks lines left to right. Mongolian is TB-LR, not what you claim.</p>
<div style="clear:both;"></div><img src="http://blogs.msdn.com/aggbug.aspx?PostID=9727295" width="1" height="1">re: The CSS Corner: writing-modehttp://blogs.msdn.com/b/ie/archive/2009/05/29/the-css-corner-writing-mode.aspx#9727292Thu, 11 Jun 2009 21:13:47 GMT91d46819-8472-40ad-a661-2c78acb4018c:9727292Joe Clark<p>No, I didn’t “miss” your correction to my correction. If top, bottom, left, and right are all physical locations in your system, and width is always horizontal while height is always vertical, then in fact vertical Chinese text does not stack lines left to right as claimed in your, or CSS WG’s, tables.</p>
<p>The CSS spec for writing mode is half-assed on a good day and apparently still does not even use the research CSS WG commissioned from Fantasai. I am printing the whole thing out to read in detail later, but I expect this assessment to hold up.</p>
<p>The only spec that got writing direction right was PDF/UA – solely for a brief time before a bunch of foreigners at a meeting in China asserted otherwise and queered the whole thing. I was the author of that section of the spec and am quite sure I got it right where everybody else didn’t. The parallel is inexact, as Web pages are not PDFs.</p>
<div style="clear:both;"></div><img src="http://blogs.msdn.com/aggbug.aspx?PostID=9727292" width="1" height="1">re: The CSS Corner: writing-modehttp://blogs.msdn.com/b/ie/archive/2009/05/29/the-css-corner-writing-mode.aspx#9724724Wed, 10 Jun 2009 21:09:11 GMT91d46819-8472-40ad-a661-2c78acb4018c:9724724Rossen Atanassov [MSFT]<p>@Joe Clark: I think you've missed few things while reading the post. </p>
<p>The property table taken from the W3C CSS3 spec draft (<a rel="nofollow" target="_new" href="http://dev.w3.org/csswg/css3-text-layout/#writing-mode">http://dev.w3.org/csswg/css3-text-layout/#writing-mode</a>) describes how the shorthand of block progression works. This direction doesn't imply anything about the physical orientation and progression of glyphs (we follow the standard Unicode BiDi for determining that).</p>
<p>You are correct in saying that Mongolian uses TB-RL which is exactly what the table reads (not to be confused with &quot;Arabic script block quote embedded in Mongolian script document&quot;).</p>
<p>Stone-carved scripts such as Ogham are bottom-to-top but they are also single line, hence determining block progression is not possible and omitted from the spec. Although, there are examples when Ogham mixed with Latin is written in LR-BT. We will propose a change to the CSS draft to include it for completeness.</p>
<div style="clear:both;"></div><img src="http://blogs.msdn.com/aggbug.aspx?PostID=9724724" width="1" height="1">Errors in tablehttp://blogs.msdn.com/b/ie/archive/2009/05/29/the-css-corner-writing-mode.aspx#9716664Tue, 09 Jun 2009 20:29:24 GMT91d46819-8472-40ad-a661-2c78acb4018c:9716664Joe Clark<p>I really think there are some errors in your Properties and Values table (which, true to Microsoft form, uses crap HTML).</p>
<p>“East Asian writing systems in vertical mode” surely means vertical-text Chinese and Japanese but not, say, Vietnamese. The character progression is top to bottom, not left to right. This is shown in error. You got the block progression correct, namely right to left.</p>
<p>Arabic script blockquote embedded in East Asian vertical text could go in either direction, from bottom to top or top to bottom, depending on author preference. In neither case are characters progressing right to left. An iIndividual character would not necessarily point up or down if the entire blockquote consists of that individual character.</p>
<p>Traditional Mongolian uses top-to-bottom character progression (error in your table) but left-to-right line stacking (correct).</p>
<p>Bottom-to-top scripts include Ogham, so in fact they exist, if only historically.</p>
<p>This stuff is hard to get right. Please try smarter.</p>
<div style="clear:both;"></div><img src="http://blogs.msdn.com/aggbug.aspx?PostID=9716664" width="1" height="1">re: The CSS Corner: writing-modehttp://blogs.msdn.com/b/ie/archive/2009/05/29/the-css-corner-writing-mode.aspx#9716116Tue, 09 Jun 2009 17:25:35 GMT91d46819-8472-40ad-a661-2c78acb4018c:9716116EricLaw [MSFT]<p>Shedy: Please don't imply that I ignore your questions. &nbsp;However, just because I'm not ignoring question doesn't mean I can always answer them.</p>
<p>Thank you for suggesting that CSS border-radius is important to you. &nbsp;If you have other suggestions, I'm happy to hear them.</p>
<p>Thanks!</p>
<div style="clear:both;"></div><img src="http://blogs.msdn.com/aggbug.aspx?PostID=9716116" width="1" height="1">re: The CSS Corner: writing-modehttp://blogs.msdn.com/b/ie/archive/2009/05/29/the-css-corner-writing-mode.aspx#9715994Tue, 09 Jun 2009 16:28:04 GMT91d46819-8472-40ad-a661-2c78acb4018c:9715994Stephen Baker<p>Given that this is a draft, shouldn't the properties be -trident-writing-mode etc.?</p>
<div style="clear:both;"></div><img src="http://blogs.msdn.com/aggbug.aspx?PostID=9715994" width="1" height="1">EricLaw [MSFT]http://blogs.msdn.com/b/ie/archive/2009/05/29/the-css-corner-writing-mode.aspx#9713718Tue, 09 Jun 2009 11:06:11 GMT91d46819-8472-40ad-a661-2c78acb4018c:9713718Shedy<p>EricLaw [MSFT],</p>
<p>Will 'Rounded Corners' (border-radius: 1px) be supported in the next version of IE?</p>
<p>Please don't ignore our questions.</p>
<div style="clear:both;"></div><img src="http://blogs.msdn.com/aggbug.aspx?PostID=9713718" width="1" height="1">re: The CSS Corner: writing-modehttp://blogs.msdn.com/b/ie/archive/2009/05/29/the-css-corner-writing-mode.aspx#9708048Mon, 08 Jun 2009 16:29:22 GMT91d46819-8472-40ad-a661-2c78acb4018c:9708048lenen lening<p>Still waiting for rounded corners support. That would be a lot help for a lot of developers.</p>
<div style="clear:both;"></div><img src="http://blogs.msdn.com/aggbug.aspx?PostID=9708048" width="1" height="1">re: The CSS Corner: writing-modehttp://blogs.msdn.com/b/ie/archive/2009/05/29/the-css-corner-writing-mode.aspx#9704053Sun, 07 Jun 2009 16:01:56 GMT91d46819-8472-40ad-a661-2c78acb4018c:9704053Sarcasm<p>@stifu</p>
<p>execCommand is used on editable documents.</p>
<p>For example to post user comments with html support or email sites such as hotmail. </p>
<p>The only simple way to do it is through execCommand, you can't act on the element as it may not exist before the command.</p>
<p>The point is the browser outputs a font tag even though it really ought to be &lt;span style='font-size:12px'&gt;selected text&lt;/span&gt;</p>
<div style="clear:both;"></div><img src="http://blogs.msdn.com/aggbug.aspx?PostID=9704053" width="1" height="1">re: The CSS Corner: writing-modehttp://blogs.msdn.com/b/ie/archive/2009/05/29/the-css-corner-writing-mode.aspx#9703478Sun, 07 Jun 2009 07:26:54 GMT91d46819-8472-40ad-a661-2c78acb4018c:9703478qualitydirectory<p>Really it's a surprise that IE doesn't support CSS's Rounded Corners.</p>
<p>@David: I know Wikipedia provides good reference, but it's a work in progress/external resource and Microsoft owes it no obligation whatsoever to inform it about everything the company does.</p>
<div style="clear:both;"></div><img src="http://blogs.msdn.com/aggbug.aspx?PostID=9703478" width="1" height="1">re: The CSS Corner: writing-modehttp://blogs.msdn.com/b/ie/archive/2009/05/29/the-css-corner-writing-mode.aspx#9702811Sat, 06 Jun 2009 17:03:03 GMT91d46819-8472-40ad-a661-2c78acb4018c:9702811Stifu<p>@Sarcasm is the lowest:</p>
<p>Why not just do element.style.fontSize = &quot;12px&quot;? Or change its class dynamically, and define the font-size in the class.</p>
<div style="clear:both;"></div><img src="http://blogs.msdn.com/aggbug.aspx?PostID=9702811" width="1" height="1">re: The CSS Corner: writing-modehttp://blogs.msdn.com/b/ie/archive/2009/05/29/the-css-corner-writing-mode.aspx#9702683Sat, 06 Jun 2009 12:36:57 GMT91d46819-8472-40ad-a661-2c78acb4018c:9702683Sarcasm is the lowest<p>@stifu</p>
<p>Rather than hating developers who still use the font tag in 2009, I rather hate browsers that output the font tag while styling.</p>
<p>editabledoc.execCommand(&quot;fontsize&quot;,false,4);</p>
<p>will produce &lt;font size=4&gt;selected text&lt;/font&gt;</p>
<p>This is the behaviour in IE8 and Firefox is only slightly better with a quoted attribute. </p>
<div style="clear:both;"></div><img src="http://blogs.msdn.com/aggbug.aspx?PostID=9702683" width="1" height="1">re: The CSS Corner: writing-modehttp://blogs.msdn.com/b/ie/archive/2009/05/29/the-css-corner-writing-mode.aspx#9701092Fri, 05 Jun 2009 12:33:31 GMT91d46819-8472-40ad-a661-2c78acb4018c:9701092Stifu<p>Wilbert: not sure whether it's an IE bug or not, but in the end, it's certainly due to the fact the font tag is long deprecated. Styling should be done in CSS.</p>
<p>Rather than hating on IE7-8 for this, I'd rather hate developers who still use the font tag in 2009. :p</p>
<div style="clear:both;"></div><img src="http://blogs.msdn.com/aggbug.aspx?PostID=9701092" width="1" height="1">re: The CSS Corner: writing-modehttp://blogs.msdn.com/b/ie/archive/2009/05/29/the-css-corner-writing-mode.aspx#9699633Thu, 04 Jun 2009 16:29:49 GMT91d46819-8472-40ad-a661-2c78acb4018c:9699633Wilbert<p>We, at our company, are hating IE7-8 because CSS attribute selectors for font size work in Firefox, but not IE. Why?</p>
<p>font[size=&quot;1&quot;] {</p>
<p> font-size: 20px;</p>
<p> }</p>
<div style="clear:both;"></div><img src="http://blogs.msdn.com/aggbug.aspx?PostID=9699633" width="1" height="1">re: The CSS Corner: writing-modehttp://blogs.msdn.com/b/ie/archive/2009/05/29/the-css-corner-writing-mode.aspx#9698574Thu, 04 Jun 2009 09:50:44 GMT91d46819-8472-40ad-a661-2c78acb4018c:9698574Rob Parsons<p>Dave,</p>
<p>What a great test page.</p>
<p><a rel="nofollow" target="_new" href="http://idreamincode.co.uk/ie8-bugs">http://idreamincode.co.uk/ie8-bugs</a></p>
<p>I am working my way through it to validate and confirm your issues. There are some workarounds that I have come up with that I have appended to the connect tickets.</p>
<div style="clear:both;"></div><img src="http://blogs.msdn.com/aggbug.aspx?PostID=9698574" width="1" height="1">re: The CSS Corner: writing-modehttp://blogs.msdn.com/b/ie/archive/2009/05/29/the-css-corner-writing-mode.aspx#9690333Wed, 03 Jun 2009 11:45:11 GMT91d46819-8472-40ad-a661-2c78acb4018c:9690333Doogal<p>Perhaps you could explain what is going on with this simple table using writing-mode:tb-rl? Works find in IE7, looks a complete mess in IE8</p>
<p>&lt;table border=&quot;2px&quot;&gt;</p>
<p> &nbsp; &nbsp;&lt;tr&gt;</p>
<p> &nbsp; &nbsp; &nbsp;&lt;td style=&quot;writing-mode:tb-rl&quot;&gt;Some text&lt;/td&gt;</p>
<p> &nbsp; &nbsp; &nbsp;&lt;td style=&quot;writing-mode:tb-rl&quot;&gt;Some more text&lt;/td&gt;</p>
<p> &nbsp; &nbsp;&lt;/tr&gt;</p>
<p> &nbsp;&lt;/table&gt;</p>
<div style="clear:both;"></div><img src="http://blogs.msdn.com/aggbug.aspx?PostID=9690333" width="1" height="1">re: The CSS Corner: writing-modehttp://blogs.msdn.com/b/ie/archive/2009/05/29/the-css-corner-writing-mode.aspx#9689897Wed, 03 Jun 2009 10:51:49 GMT91d46819-8472-40ad-a661-2c78acb4018c:9689897Dave<p>Microsoft,</p>
<p>If the IE9 news is true, then please please PLEASE ensure that you address all the bugs in IE8 before focusing on the next version. &nbsp;IE7 has tons of rendering issues and it makes life painful because of the huge user base!</p>
<p><a rel="nofollow" target="_new" href="http://idreamincode.co.uk/ie8-bugs">http://idreamincode.co.uk/ie8-bugs</a></p>
<div style="clear:both;"></div><img src="http://blogs.msdn.com/aggbug.aspx?PostID=9689897" width="1" height="1">IEBlog : The CSS Corner: writing-modehttp://blogs.msdn.com/b/ie/archive/2009/05/29/the-css-corner-writing-mode.aspx#9689456Wed, 03 Jun 2009 08:53:03 GMT91d46819-8472-40ad-a661-2c78acb4018c:9689456progg.ru<p>Thank you for submitting this cool story - Trackback from progg.ru</p>
<img src="http://blogs.msdn.com/aggbug.aspx?PostID=9689456" width="1" height="1">re: The CSS Corner: writing-modehttp://blogs.msdn.com/b/ie/archive/2009/05/29/the-css-corner-writing-mode.aspx#9687767Wed, 03 Jun 2009 02:33:52 GMT91d46819-8472-40ad-a661-2c78acb4018c:9687767Brianary<p>Are you really supposed to rotate the characters for tb-* and bt-* writing-modes?</p>
<div style="clear:both;"></div><img src="http://blogs.msdn.com/aggbug.aspx?PostID=9687767" width="1" height="1">re: The CSS Corner: writing-modehttp://blogs.msdn.com/b/ie/archive/2009/05/29/the-css-corner-writing-mode.aspx#9686628Tue, 02 Jun 2009 22:30:15 GMT91d46819-8472-40ad-a661-2c78acb4018c:9686628EricLaw [MSFT]<p>@wasworried: No one &quot;forged&quot; anything (it would be more work to do so, and to no benefit).</p>
<p>Screenshots were taken on a machine with visual themes disabled, a common developer configuration.</p>
<p>@David: Wikipedia is a great reference, but it's hardly complete.</p>
<div style="clear:both;"></div><img src="http://blogs.msdn.com/aggbug.aspx?PostID=9686628" width="1" height="1">re: The CSS Corner: writing-modehttp://blogs.msdn.com/b/ie/archive/2009/05/29/the-css-corner-writing-mode.aspx#9683737Tue, 02 Jun 2009 09:04:44 GMT91d46819-8472-40ad-a661-2c78acb4018c:9683737Rossen Atanassov [MSFT]<p>@Ryo Onodera, thank you, it will be great to see support for vertical writing directions in other platforms.</p>
<div style="clear:both;"></div><img src="http://blogs.msdn.com/aggbug.aspx?PostID=9683737" width="1" height="1">re: The CSS Corner: writing-modehttp://blogs.msdn.com/b/ie/archive/2009/05/29/the-css-corner-writing-mode.aspx#9683003Tue, 02 Jun 2009 03:52:31 GMT91d46819-8472-40ad-a661-2c78acb4018c:9683003was worried<p>I was worried at first that your screen shots were pure IE8 extracts!</p>
<p>Thank god you forged them... the XP/Vista themes do apply to the scrollbars and unlike your photoshopped example the scrollbars on the left/top are not inverted into the depressed state.</p>
<div style="clear:both;"></div><img src="http://blogs.msdn.com/aggbug.aspx?PostID=9683003" width="1" height="1">re: The CSS Corner: writing-modehttp://blogs.msdn.com/b/ie/archive/2009/05/29/the-css-corner-writing-mode.aspx#9678185Mon, 01 Jun 2009 17:39:29 GMT91d46819-8472-40ad-a661-2c78acb4018c:9678185Ryo Onodera<p>Thanks for posting this.</p>
<p>I'm implementing writing-mode in the gecko rendering engine(<a rel="nofollow" target="_new" href="https://bugzilla.mozilla.org/show_bug.cgi?id=145503">https://bugzilla.mozilla.org/show_bug.cgi?id=145503</a>).</p>
<p>Well, I was wondering why IE changed the behavior of 'height' between IE7 and IE8. And this article let me know the why. As for this, I'm not still completely agree with you, but I'll follow that 'top', 'right', 'bottom', 'left', 'width' and 'height' refer to those of the physical dimension.</p>
<p>Although, I don't know how much time it'll take to implement this in the gecko. I just wanted to let you know I'm working on this. If we need to discuss the detail of this for interoperability, feel free to contact me, although my work at gecko is in very early stage.</p>
<p>Particularly, I'm very excited to see that even tables are writing-mode-aware now. And the chosen reordering behavior looks fine to me. Great job!</p>
<p>Also, if I can afford time, after finishing gecko, I'm planing to implement it in webkit too. My interest is to bring the vertical text into the web. That means if you need some help from me, it'll be OK(for example, creating various test suites).</p>
<div style="clear:both;"></div><img src="http://blogs.msdn.com/aggbug.aspx?PostID=9678185" width="1" height="1">re: The CSS Corner: writing-modehttp://blogs.msdn.com/b/ie/archive/2009/05/29/the-css-corner-writing-mode.aspx#9672591Mon, 01 Jun 2009 02:20:51 GMT91d46819-8472-40ad-a661-2c78acb4018c:96725912nd time Ive been duped<p>the words &quot;CSS Corner&quot; should not be part of any post title unless the content of the post details how IE supports rounded corners in CSS.</p>
<p>Its amazing how much reading these titles makes my blood boil just re-realizing how annoying it is that IE still doesn't support this - and all my IE end users see ugly harsh rectangles instead of nice soft rounded rectangles.</p>
<p>Grrrrrrrrrrrr!</p>
<div style="clear:both;"></div><img src="http://blogs.msdn.com/aggbug.aspx?PostID=9672591" width="1" height="1">re: The CSS Corner: writing-modehttp://blogs.msdn.com/b/ie/archive/2009/05/29/the-css-corner-writing-mode.aspx#9671079Sun, 31 May 2009 22:27:33 GMT91d46819-8472-40ad-a661-2c78acb4018c:9671079gabe<p>@ david i doubt your see anything about what ie9 has in it for a while probably not for 12 months assuming same time frame as ie7 to 8 was</p>
<div style="clear:both;"></div><img src="http://blogs.msdn.com/aggbug.aspx?PostID=9671079" width="1" height="1">