IE : 'ch' unit inconsistencies. - CSS-Tricks

This topic is empty.

Viewing 5 posts - 1 through 5 (of 5 total)

Author

Posts
August 26, 2015 at 11:08 am #207205

sarguin
Participant

I’m struggling with the ‘ch’ unit in Internet Explorer. The issue is explained clearly on Stackoverflow (http://stackoverflow.com/questions/17825638/css3-ch-unit-inconsistent-between-ie9-and-other-browsers), but no solution has been posted.

Basically, IE doesn’t calculate the ‘ch’ unit value like other browsers. IE doesn’t include the spacing around the character in the calculation. IMHO, this is a bit stupid because if I said the width of a

<

div> is 10ch, I expect to be able to put 10 characters in it without any wrapping (I’m using monospace font). Chrome and Firefox works correctly.

Anyone can help me with this one please (I’m not a CSS expert)?

Thank you in advance.

August 27, 2015 at 1:59 pm #207280

StephBertha
Participant

Any reason why you’re using ch instead of em or px?

Since Internet Explorer doesn’t do well with ch, you could try using a stylesheet specifically for Internet Explorer and use em’s or pixels.

https://css-tricks.com/how-to-create-an-ie-only-stylesheet/

:)

August 27, 2015 at 5:46 pm #207292

sarguin
Participant

Yes. I build a site exclusively using fixed size font (classic/techno/old school… looking site). It has be be 80 characters wide centered in the browser. I can’t use pixels units because it doesn’t play well with fixed sized font (how many pixel is 80 characters exactly?). Correct me if I’m wrong. ‘Em’ doesn’t represent the width of a character but its height. 80 em <> 80 ch.

August 28, 2015 at 12:15 am #207296
Atelierbram
Participant
From this article by Eric Meyer:

ch unit: Equal to the advance measure of the “0” (ZERO, U+0030) glyph found in the font used to render it.

There in the comments by Tab Atkins:

There is a difference – monospace fonts (of which braille fonts are a subset) all have the quality that their character widths are equal, but the ratio of character width to em box is not consistent between all such fonts. The ch unit lets you ignore the ratio and just use the width directly, so you know that exactly 40 characters will fit in a “width: 40ch;” box.

Which makes me think that when you use a specific mono-space webfont with @font-face you can get around this problem with setting a class on the html- or body-tag only for IE:
```


   <body>

```
```
@font-face {
/* font-face declaration stuff */
}

.test { 
  font: 14px/1.5 'webfont-monospace', monospace;
  width: 10ch; 
}

.ie .test {
  box-sizing: content-box; /* maybe */
  width: 10em; /* or whatever number fits */
  padding-left: 1em; /* maybe */
  padding-right: 1em;
}
```
August 28, 2015 at 6:29 am #207308

sarguin
Participant

I tried your fix but the result was that font was smaller on IE than other browsers. So what I did is just use a larger ‘ch’ number for IE (92ch instead of 80ch). Other browsers use 80ch.

Thank you all for your help :)
-SA-
Author

Posts

Viewing 5 posts - 1 through 5 (of 5 total)

The forum ‘CSS’ is closed to new topics and replies.