Monday, 13 October 2008

Vertical Layout in IE8

I installed the beta of Internet Explorer 8 a couple of days ago, as I had heard that it now supports top-to-bottom text orientation with left-to-right line progression, which is the traditional text layout for Mongolian, Manchu and Phags-pa. IE6 and IE7 have supported top-to-bottom orientation with right-to-left line progression using the CSS writing-mode : tb-rl style, but IE8 adds support for the writing-mode : tb-lr style.

But does it work ? To answer this question I did a number of tests with IE8 on Vista SP1 in which I attempted to display a simple Manchu sentence in vertical orientation using the distinctive Daicing Round font (this may not be the best Unicode Manchu font in the world, but I deliberately did not want to use the Mongolian Baiti font that ships with Vista). For anyone interested, the Manchu text is the opening sentence of the Manchu translation of The Romance of the Three Kingdoms (amaga han gurun-i hūwanti urihe manggi, jui lingdi soorin-de tehe ᠠᠮᠠᡤᠠ ᡥᠠᠨ ᡤᡠᡵᡠᠨ ᡳ ᡥᡡᠸᠠᠨᡨᡳ ᡠᡵᡳᡥᡝ ᠮᠠᠩᡤᡳ᠈ ᠵᡠᡳ ᠯᡳᠩᡩᡳ ᠰᠣᠣᡵᡳᠨ ᡩᡝ ᡨᡝᡥᡝ᠉ "When Emperor Huan of the Latter Han dynasty passed away, his son Emperor Ling ascended to the throne").

This is what vertical right-to-left layout looks like with IE7 on XP (no joining or shaping behaviour, but we do at least get vertical orientation of the text).



For my first test with IE8 I checked that vertical right-to-left layout still works.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Vertical Layout Test 1</title>
<style type="text/css">
.manchu
{
writing-mode : tb-rl;
font-family : "Daicing Round";
font-size : 24pt;
}
</style>
</head>
<body>
<p class="manchu">ᠠᠮᠠᡤᠠ ᡥᠠᠨ ᡤᡠᡵᡠᠨ ᡳ ᡥᡡᠸᠠᠨᡨᡳ ᡠᡵᡳᡥᡝ ᠮᠠᠩᡤᡳ᠈ ᠵᡠᡳ ᠯᡳᠩᡩᡳ ᠰᠣᠣᡵᡳᠨ ᡩᡝ ᡨᡝᡥᡝ᠉</p>
</body>
</html>


So far so good—in as much as the text is oriented vertically—although it is obviously far from ideal to make a line break after every word (you can work around this by using No-Break Space between words), and the wrong form of the genitive particle -i is used after a Narrow No-Break Space, but that may be a problem with the font I am using here.

Next I simply changed writing-mode : tb-rl; to writing-mode : tb-lr;.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Vertical Layout Test 2</title>
<style type="text/css">
.manchu
{
writing-mode : tb-lr;
font-family : "Daicing Round";
font-size : 24pt;
}
</style>
</head>
<body>
<p class="manchu">ᠠᠮᠠᡤᠠ ᡥᠠᠨ ᡤᡠᡵᡠᠨ ᡳ ᡥᡡᠸᠠᠨᡨᡳ ᡠᡵᡳᡥᡝ ᠮᠠᠩᡤᡳ᠈ ᠵᡠᡳ ᠯᡳᠩᡩᡳ ᠰᠣᠣᡵᡳᠨ ᡩᡝ ᡨᡝᡥᡝ᠉</p>
</body>
</html>


Hmm, the text is laid out horizontally, instead of vertically as expected. I know, it must be that I forgot to add a DOCTYPE declaration, and IE8 is probably less forgiving than IE7 on such things.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Vertical Layout Test 3</title>
<style type="text/css">
.manchu
{
writing-mode : tb-lr;
font-family : "Daicing Round";
font-size : 36pt;
}
</style>
</head>
<body>
<p class="manchu">ᠠᠮᠠᡤᠠ ᡥᠠᠨ ᡤᡠᡵᡠᠨ ᡳ ᡥᡡᠸᠠᠨᡨᡳ ᡠᡵᡳᡥᡝ ᠮᠠᠩᡤᡳ᠈ ᠵᡠᡳ ᠯᡳᠩᡩᡳ ᠰᠣᠣᡵᡳᠨ ᡩᡝ ᡨᡝᡥᡝ᠉</p>
</body>
</html>


Ah, that's better ... but wait a minute, although the layout is just as I want it, now the text is displayed using Microsoft's Mongolian Baiti font rather than the Daicing Round font that I want to use. Perhaps if I use XHTML it will work better.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Vertical Layout Test 4</title>
<style type="text/css">
.manchu
{
writing-mode : tb-lr;
font-family : "Daicing Round";
font-size : 36pt;
}
</style>
</head>
<body>
<p class="manchu">ᠠᠮᠠᡤᠠ ᡥᠠᠨ ᡤᡠᡵᡠᠨ ᡳ ᡥᡡᠸᠠᠨᡨᡳ ᡠᡵᡳᡥᡝ ᠮᠠᠩᡤᡳ᠈ ᠵᡠᡳ ᠯᡳᠩᡩᡳ ᠰᠣᠣᡵᡳᠨ ᡩᡝ ᡨᡝᡥᡝ᠉</p>
</body>
</html>


Nope, no difference. And the awful truth is that with IE8 you can either have correct vertical left-to-right layout for Mongolian/Manchu text but no choice of font, or you can choose what font to use to render Mongolian/Manchu text, but you can't get the correct vertical left-to-right layout. Which is a bit of a bummer if, like me, you are developing Mongolian or Manchu fonts. [see Update below]



Update [2009-01-31]

After installing IE8 Release Candidate 1 all my problems seem to have gone away, and I am able to use whatever font I want to display Mongolian or Manchu text in vertical left-to-right layout—so two thumbs up to Microsoft, and I hope other browsers will also start to support vertical layout soon. The screenshot below, using this test file shows my sample line of Manchu text rendered vertically left-to-right in four different fonts in IE8 RC1 :



3 comments:

jedi787plus said...

How about a Phags-pa test on IE8 using your BabelStone Phags-pa Book font? Will it finally join and shape? Will it display vertically?

Andrew West said...

On IE8 it is possible to get vertical left-to-right layout of Phags-pa text using my font, but it still does not join or shape. I understand that Windows 7 will have rendering support for Phags-pa, but if Microsoft release their own Phags-pa font then we may be in the same situation as for Mongolian ... that proper rendering is hard-linked to a specific Microsoft font.

Incidentally, I have heard that at least one person has been able to get vertical LTR layout of Manchu text using the Daicing Round font ... I have only managed to do this by de-installing Microsoft's Mongolian Baiti font.

CFynn said...

Andrew

Are you sure there is not something wrong with or missing from the "Daicing Round" font that might be causing IE8 to fall back to the MS Mongolian Baiti font?

Could be as simple as some esoteric (and possibly undocumented) bit flag not being set in the "Daicing Round" font making IE think that it cannot be used to render vertical L2R text.

Another thing to try is installing Daicing Round before Mongolian Baiti on a Windows system. I've found that some MS applications tend to default to the first font installed that appears to support a particular script.

You might also try to search for any entries in the Windows Registry referring to Mongolian Baiti and see what is in these that is not in the Registry entries for Daicing Round. This might provide a clue as to why one font works and not the other.