10

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:

enter image description here

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

Example in Chrome

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:

enter image description here

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 IE8

In IE9:

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?

yu_ominae
  • 2,975
  • 6
  • 39
  • 76
  • If it's right-to-left try `direction:rtl;` for that text box or label. – Maysam Aug 04 '11 at 04:26
  • @Maysam Japanese isn't rtl. If anything, it's top-to-bottom. – deceze Aug 04 '11 at 04:47
  • @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. – yu_ominae Aug 04 '11 at 05:43
  • can you highlight wrong appearance in the image? – Maysam Aug 04 '11 at 07:51
  • @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... – yu_ominae Aug 04 '11 at 09:14
  • Is it about vertical align? if yes, can you put Japanese characters into the another `
    ` or `` then manipulate `margin-top` or `padding-top` properties of it.
     – Maysam Aug 04 '11 at 09:19
  • 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... – yu_ominae Aug 05 '11 at 06:10
  • exactly you want that input box align perfectly .. or else ? – Kamal Apr 06 '12 at 17:12
  • i have tried this i think u should use background images of every input in i have used the same u can look here ..http://demo.cleversoftwares.com/vaastu/?page_id=227 plz share your thoughts – Kamal Apr 06 '12 at 17:48

4 Answers4

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?

gilly3
  • 87,962
  • 25
  • 144
  • 176
0

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.

Sprachprofi
  • 1,229
  • 12
  • 24
0

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]-->
  • 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. – yu_ominae Aug 29 '11 at 00:33
  • 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. – yu_ominae Sep 01 '11 at 03:11
0

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

<meta http-equiv=“X-UA-Compatible” content=“IE=7” />
Karmacoma
  • 658
  • 1
  • 13
  • 37