Vertically Aligning Japanese characters in IE8

Question

I'm having some problem aligning Japanese characters in IE8 on a website I am making.

I have something like <span>Label</span><span>Some value</span>. When both "Label" and "Some value" are either in Japanese or English, they align fine, but when they are mixed ("Label" is always Japanese, but "Some value" might not be) then the alignment is off. Example in the image below:

Surprise, surprise, it all works fine in othe browsers, same image from Chrome for example:

I can't figure out how to fix this. Has anybody come across this before or know a workaround for it? My company is still mostly using IE7, so some trick that would work on that would be most useful.

EDIT 1: I forgot to add the css I am using at the moment. For the label I have:

display: inline-block;
color: Gray;
vertical-align: text-top;

/*For IE7*/
zoom: 1;
*display: inline;

For the values I am using something similar:

display: inline-block;
margin: 0x 0px 0px 0px;
padding: 0px 0px 0px 0px;
vertical-align: text-top;

/*For IE7*/
zoom: 1;
*display: inline;

EDIT 2: I'm sure this is related to this problem. I have input boxes in my form, which are perfectly aligned until I type in some Japanese characters. No problem at all for roman characters again. See below:

Again, no problem whatsoever in other browsers...

EDIT 3:

Had a look at this again today (Over a year after I asked this question...). In IE9, the characters display just like in Chrome and other browsers, basically roman and Japanese words all line up properly. I checked it out using IETester and for the same page, the Japanese fonts are aligned "higher" in IE8 than IE9.

In IE8:

In IE9:

I didn't get to check this out at the time because I didn't have IE9. The fonts look identical, so it must be an IE issue and there is nothing that can be done about it I guess?

Anchylose

If it's right-to-left try direction:rtl; for that text box or label. – Chile

@Chile Japanese isn't rtl. If anything, it's top-to-bottom. – Nikolas

@Maysam, thanks for the suggestion, but when Japanese is written horizontally it is a left to right language. I tried it all the same, but it didn't change anything. – Anchylose

can you highlight wrong appearance in the image? – Chile

@Maysam: Done. It's especially noticeable on the bit saying "数 1", but same for the title ("文書名") and author ("作家"). You'll also notice the text box in image 3, which I think is quite obvious. I'm not seeing this other websites, so am wondering if it might have something to do with font sizes... – Anchylose

Is it about vertical align? if yes, can you put Japanese characters into the another <div> or <span> then manipulate margin-top or padding-top properties of it. – Chile

True, but the problem is that I don't know whether the characters will be japanese or roman, it is down to user input. This is a database access interface, where company employees can catalogue books the company owns, so the input might be in any language really... – Anchylose

exactly you want that input box align perfectly .. or else ? – Ned

i have tried this i think u should use background images of every input in i have used the same u can look here ..demo.cleversoftwares.com/vaastu/?page_id=227 plz share your thoughts – Ned

Answer 1

Make sure you are also assigning a vertical-align for the text boxes.

http://jsfiddle.net/HkrJH/

As far as the trouble with spans, I can't repro that. What font are you using? Can you post a jsfiddle that demonstrates the issue?

Confessor

Answer 2

internet explorer is horrible.

target your browser and add a stylesheet.

Example in the head:

<!--[if IE 6]><link rel="stylesheet" href="http://mysite.com/path/to/ie6.css" type="text/css" media="screen, projection"><![endif]-->

<!--[if IE 7]><link rel="stylesheet" href="http://mysite.com/path/to/ie7.css" type="text/css" media="screen, projection"><![endif]-->

Kippie

That's a good suggestion and I would go for that normally, but I am only seeing this problem in IE, so apdding would screw up the layout in all the other browsers which are displaying correctly. – Anchylose

Thanks, I thought about using conditional styles, but it didn't help. I really don't know where this comes as I am not seeing this problem in any other sites I made. – Anchylose

Answer 3

You can place the following HTML tag in the HEAD element of your web page:

<meta http-equiv=“X-UA-Compatible” content=“IE=7” />

Wilber

but wouldn't this force also a IE9 to work as IE7? This wouldn't be fine – Psalter

Answer 4

I believe this might be a problem with the default fonts used for Japanese vs. English. English characters contain more whitespace than Japanese, because English has to accomodate characters like "c" (square), "t" (taller) and "g" (deeper), while all characters are square boxes in Japanese. So if you use the same pixel size of characters, English ones can still look off from Japanese ones, depending on the font used for either language (likely not the same, or not aligning even if it's the same). If you use vertical-align: middle; you should get a better result.

Dube