Conditional comment in IE10+ to deal with lack of text-rendering declaration

Question

I have the following css:

h1{
    font-family: "tablet-gothic-n9", "tablet-gothic", sans-serif;
    font-style: normal;
    font-weight: 900;
    text-rendering: geometricPrecision;
    letter-spacing: 0.05em;
}

This lays out the text beautifully in Chrome, Safari and Firefox.

IE doesn't support text-rendering and as such won't display proper letter pairs and ligatures. This results in letters having wider spacing. As such, I want to set letter-spacing: 0 for all versions of IE.

I did the following in the header of my page, below the stylesheet link:

<!--[if IE]>
    <style>
        h1{
            letter-spacing: 0;
        }
    </style>
<![endif]-->

This works fine in IE8 and 9, but fails in IE10 and 11 as these latter browsers don't read conditional comments.

I've tried adding the following to the head of the page:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">

as suggested here http://msdn.microsoft.com/en-us/library/ie/hh801214(v=vs.85).aspx

But this doesn't seem to work.

Any solutions to get IE10 and 11 to set letter-spacing: 0?

score 1 · Accepted Answer · edited May 23 '17 at 12:19

1

for IE9 and earlier, you can the following for 6,7,8 and 9 in most cases (I have tested your one):

  letter-spacing:.05em;
  letter-spacing:0px\9;

For IE 10 please check this IE 10 Hack article and StackOverFlow [question]: How do I target only Internet Explorer 10 for certain situations like Internet Explorer-specific CSS or Internet Explorer-specific JavaScript code?

edited May 23 '17 at 12:19

Community

1
1

answered Jan 07 '14 at 07:44

hsobhy

1,403
2
18
34

1

The CSS hack was great, but your JS suggestions only targeted 10, not 11. I used document.body.style.msTouchAction !== undefined; from http://browserhacks.com/ . I suspect this will return true for all subsequent versions of IE as well. – Graham Nicol Jan 08 '14 at 12:51

score 1 · Answer 2 · answered Jan 07 '14 at 07:57

For kerning (which is probably what “proper letter pairs” means in the question) and ligatures, you can use the font-feature-settings property. It is supported by IE 10 and newer, so you avoid the need for “conditional comments” (which don’t work on IE 10 and newer).

h1 { font-feature-settings: "kern", "liga" }

(possibly adding "clig" etc., but I doubt whether Tablet Gothic has ligatures beyond “standard ligatures”).

Conditional comment in IE10+ to deal with lack of text-rendering declaration

2 Answers2