{"id":6243,"date":"2012-10-26T07:00:00","date_gmt":"2012-10-26T07:00:00","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/oldnewthing\/2012\/10\/26\/whether-the-unicode-bidi-algorithm-is-intuitive-depends-on-your-definition-of-intuitive\/"},"modified":"2012-10-26T07:00:00","modified_gmt":"2012-10-26T07:00:00","slug":"whether-the-unicode-bidi-algorithm-is-intuitive-depends-on-your-definition-of-intuitive","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/oldnewthing\/20121026-00\/?p=6243","title":{"rendered":"Whether the Unicode Bidi algorithm is intuitive depends on your definition of "intuitive""},"content":{"rendered":"

In Windows, we spend a good amount of time with the pseudo-mirrored build<\/a>. And one of the things that you notice is that pseudo-mirrored text comes out looking really weird. For example, the string really? (yup).<\/span> comes out pseudo-mirrored as .(really? (yup<\/span>. Just for fun, here’s here’s how your browser renders it:<\/p>\n

really? (yup). <\/p><\/blockquote>\n

Even stranger, the IPv6 address 2001:db8:85a3::8a2e:370:7334<\/span> comes out as db8:85a3::8a2e:370:7334:2001<\/span>. (The IPv6 address was the string that prompted this article.) The result of the RTL IPv6 address is even weirder if you force a line break at a particular point. If your browser follows the Unicode Bidi algorithm, you can resize the box below to see how the line break position affects the rendering.<\/p>\n

2001:db8:85a3::8a2e:370:7334 <\/p><\/blockquote>\n

If your browser doesn’t follow the Unicode Bidi algorithm, or if you can’t resize the window, here’s what you get:<\/p>\n\n\n\n
No line break<\/td>\ndb8:85a3::8a2e:370:7334:2001<\/td>\n<\/tr>\n
Line break<\/td>\n:2001
db8:85a3::8a2e:370:7334<\/td>\n<\/tr>\n<\/table>\n

“Is this a bug?”\n No.\n Well, maybe yes.\n It depends.\n But mostly yes.\n Windows is following the Unicode Bidirectional Algorithm<\/a>. So the part that’s not a bug is “Windows is correctly following an international standard.” The weirdness you’re seeing is just a consequence of following the standard.\n Let’s look at what’s going on.\n When you render text in RTL context, what you’re saying is “Render this text in the form you would see it if it appeared in a newspaper printed in an RTL language.” For illustration, we follow the convention that uppercase characters are considered to be in an RTL script, lowercase characters are considered to be in an LTR script, and non-letters stand for themselves.\n Say you want to render the string “NEXT COMES john smith.” A newspaper would say, “Well, my readership expects things to be laid out right to left. The string ‘john smith’ is a foreign name inserted into a paragraph that otherwise is written my readers’ native language. If the name were in my readers’ native language, I would render it as<\/p>\n

.HTIMS NHOJ SEMOC TXEN <\/p><\/blockquote>\n

Since the name is in a foreign language, I will treat it as an opaque ‘name blob’ that got inserted into my otherwise beautiful RTL sentence.”<\/p>\n

.john smith<\/span> SEMOC TXEN <\/p><\/blockquote>\n

(The black outline is not part of the actual output. I am using it to highlight that the phrase john smith<\/i> is being treated as a single unit.)\n This also explains why “hello.” comes out as “hello.<\/span>“. The LTR text is treated as a blob inside an otherwise RTL sentence.<\/p>\n

.hello<\/span> <\/p><\/blockquote>\n

Things get weirder once parentheses and digits and more complex punctuation marks are thrown into the mix. For example, the Unicode Bidirectional Algorithm has to figure out that in the text “IT IS A bmw 500, OK.” the “500” is attached to the LTR text “bmw”, resulting in<\/p>\n

.KO ,bmw 500<\/span> A SI TI <\/p><\/blockquote>\n

And it also needs to work out the correct text rendering order when you have RTL text embedded inside LTR text, all of which is embedded inside other RTL text, as illustrated by the brain-teaser “DID YOU SAY ’he said “car MEANS CAR”‘?”\n But maybe the standard is buggy. The problem is that the Unicode Bidirectional Algorithm is designed for text, so when you ask it to render things that aren’t text (such as IPv6 addresses and URLs), the results can be nonsensical.\n At least for the IPv6 case, you can work around the problem by explicitly marking the IPv6 address as LTR, so that the Unicode Bidirectional Algorithm doesn’t get involved, and the characters are rendered left-to-right in the order they were written.\n Exercise<\/b>: Study the Unicode Bidirectional Algorithm and explain why really? (yup).<\/span> comes out as .(really? (yup<\/span>.<\/p>\n

Bonus reading<\/b>: What you need to know about the bidi algorithm and inline markup<\/a>. <\/p>\n","protected":false},"excerpt":{"rendered":"

In Windows, we spend a good amount of time with the pseudo-mirrored build. And one of the things that you notice is that pseudo-mirrored text comes out looking really weird. For example, the string really? (yup). comes out pseudo-mirrored as .(really? (yup. Just for fun, here’s here’s how your browser renders it: really? (yup). Even […]<\/p>\n","protected":false},"author":1069,"featured_media":111744,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[26],"class_list":["post-6243","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-oldnewthing","tag-other"],"acf":[],"blog_post_summary":"

In Windows, we spend a good amount of time with the pseudo-mirrored build. And one of the things that you notice is that pseudo-mirrored text comes out looking really weird. For example, the string really? (yup). comes out pseudo-mirrored as .(really? (yup. Just for fun, here’s here’s how your browser renders it: really? (yup). Even […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/posts\/6243","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/users\/1069"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/comments?post=6243"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/posts\/6243\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/media\/111744"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/media?parent=6243"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/categories?post=6243"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/tags?post=6243"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}