You are here

IE's CSS does letter-spacing stupidly

I know most of my readers (all 2 of you) will probably stare blankly at me over this topic, (I guess this is mostly for the search engines) but IE continues to piss me off, and I need to tell SOMEONE.

Today's problem is IE7's math, and their implementation of kerning. (having wiki'd that, I see I may be talking about tracking, but who cares.)

In css, you use a parameter called letter-spacing to change kerning on things. As with all other css, you can specify the units you want to use as pixels, points, percentages, or em. (there are others.)

An em is essentially the width of a standard 'M' character in your font of choice. For IE's mathematical purposes, it's a percentage of the font size you specified elsewhere.

So if I have a font-size: 12px; for my entire document. I can make my headers: font-size: 1.5em; and they will be displayed 150% of 12px. (18px)

So.. an example.

i'm letter-spacing of 1 em

if you're using any recent browser, that should look all spready...

Now.. I rarely need massive letter spacing like that... (though it does come up.) More often than not, I get handed a nice layout from a pro graphic designer that has text in it that is crammed together, ever so slightly, but it really does change the look of certain things.

in IE.. the best you can do for 'ever so slightly' is this:

i'm letter-spacing of -0.05 em... the quick brown fox.. yadda yadda
i'm letter-spacing of -0.00 em... the quick brown fox.. yadda yadda

that's not so bad in trebuchet or whatever the hell i'm using here, but in an italic serif font, it looks pretty tight. Now, IE can take any unit ABOVE .05.. (or 5%).. which.. in negative kerning terms.. isn't too useful.. but I sleep well at night knowing that I can always choose to do something like:

i'm letter-spacing of -1 em

yeah... that's fabulous.. I'm sure that'll come in handy somewhere.

So, to summarize.. IE7 doesn't seem to know what to do with a negative kerning value below 5%. That may not seem like a big deal to you, but really, within that 5% is all of the most useful kerning you'd normally ever use.. the kerning between 'none' and 'just a bit'.

To break it down to my problem today.. I've got a 24px headline.. 5% of 24px is 1.2 pixels per character.. over 30 characters, that's 36pixels shorter than normal

I'm a medium sized headline of sorts at -0.05em
I'm a medium sized headline of sorts at -0.02em
I'm a medium sized headline of sorts at -0.00em

there ya go.. (if you're using IE7.. the second one will be the same size as the last. those are 5%, 2%, and normal.)

I know most of you think it's a small thing, but this kinda crap is what design folk constantly hit standards nazis like myself with when I'm trying to use html and actual text instead of images to create their web designs.

Comments

Hi Aaron, just to let you know this issue really pisses me off too.

I too find this frustrating. Not nearly as frustrating as other IE quirks, but still. I am glad I found your page though... I thought IE was just ignoring all negative letter-spacing until I stumbled here via a search on "msie letter-spacing css". Now at least I know I can use -0.05em in an IE-specific style sheet to achieve almost the look I'm going for.

Those mother f... bastards browsers. To the hell with them. They made me crazy!!!! Specially when you design toward to be 'pixel perfect'

PD:I am really pissed off! See a workaround on
http://cdharrison.com/2005/12/07/css-letter-spacing-glitch-in-ie/

I just subscribe your anger and the rest of comments... I don't know how the MS staff are earning far more than me ;) and keep rolling those big craps x-( version after version, each on worse

Did any of you report this issue to Microsoft? I bet not. If you'd expend your energy reporting issues/bugs instead of ranting about them, there would like to be fewer issues to deal with!

, Lee

Heh. You think we'd get an IE update out of it? You think MS would put someone on a patch right away in order to fix a 'works as intended but the intention was dumb' bug?

They've got stacks and stacks of 'it doesn't work as intended' bugs that I'm sure would be on the top of that stack.

Wanna enlighten me and tell me where such a thing would go? I'll happily report it to MS.. for all the good it'd do.

Actually IE 7 only works at -0.06em or more for me here. 'ep it sux.

InternetExploiter gives me headaches every day. It's so damm ilogically made that have lots and lots of nonsense special non compliant behaviours.

I'm with you too aaron.

did you try using px instead of em? like if .02em is .48px, maybe you could try .5px? does it work?

also, your first example of "i'm letter-spacing of -0.05 em... the quick brown fox.. yadda yadda" has a code error, a missing semi-colon in the "style" of the div, so the letter-spacing's just "normal" for that one, the style got ignored.

I'm sure you can use px... but that won't flexibly scale the way a percentage or em would..

(which is why we use em's. ; )

also.. yeah.. there were no semicolons at the end of any of those style attributes, because in css they aren't required on the last element.. I put them on just for you. That shouldn't change anything.

Do we still need to obsess about user font scaling? Fixed px or not most modern browsers can scale the whole page including images. I could be totally wrong but I don’t see a point in wasting so much time with CSS browser bugs anymore. It’s a major pain to get png transparency + bullet proof elastic design on IE6 and all other major browsers at the same time. I have done it and I regret wasting time with technology that is going to be obsolete as soon as users abandon the problem browsers. IE6 users must upgrade or put up with not being able to scale the font size easily.

I prefer to use my time with python, php, linux, javascript, graphic design, databases and skills that are going to be needed for a while.

If you're doing any professional layouts for money.. the client will invariably come up with a browser bug you'll have to fix. I can't think of a single job I've done that didn't end up with one. It IS getting better all the time though. (IE7's even still a pain in my ass..)

Yeah, font scaling you can take or leave. I do like EM because it's a relative measurement, so you can have simpler more flexible css.

Specific browser bugs may not be skills that are going to be needed for a while, but finding and troubleshooting them is a skill you'll always need. : )

I think the fact that you'd rather do 'python, php, linux, javascript, graphic design, databases' is evident in the fact you don't seem to care all that much about the bit people interact with.

I just wanted to throw out there that while Firefox renders this correctly. Google Chrome does not. Google apparently does the exact same thing as IE7. I would have thought Google would be more on top of things like that.

It seems IE7 rounds letter-spacing to whole pixels. So 0.5px become 1px and 0.4 becomes 0px. For other units the same thing happens after it have been converted to pixels. I believe Firefox also used to do this.

hmm, that's a workable theory. I guess the test would be to bump the font size huge.. so that .2 em = 20 px.. and see if it works.

I think the example headers above almost run that test though. there's definitely more than 1px of space between letters when FF renders them.

You can't blame Internet Explorer for this one. Firefox is the ONLY one who does this one right. Chrome, Safari, Opera and IE8 do it all wrong.

Hey, first of all, thanks for the useful info you shared.
Regarding the way browsers render sub-pixel units, I found the following examples quite concludent:
http://agilewebmasters.com/robert/percentage-rounding-and-sub-pixel-perf...
And as far as reporting to MS and getting things fixed, see:
https://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=3...
(I don't have IE8 beta 2 to check, so ... no further comment)
;)

IE 9 Beta, does the letter-spacing correct... the medium sized headlines come all in different lenghts.

cheers

Nice! Only took em 4 years.

Who says MS isn't agile?