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

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?

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?

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”).

Related

Materialize css icons doesn't show up in Safari browser

I noticed that materialized CSS icons does not show up in Safari (v5.1.7 (7534.57.2). Well searched a lot on this topic but there haven't been any documentation on browser compatibility where safari has been listed. Could anyone let me know if this is a bug which needs to be fixed or are there any alternatives to get this work in Safari.
Other browsers
Safari Browser
PS:Other functionalities of materializecss works well except icons
I faced the exact same issue. The following approach helped me:
I was facing problems with the font-icons provided by materialize css. There seems to be some problem with the font-icons in case if you are self-hosting it. I will update my answer with the exact bug number. So to fix it I downloaded and used the font-icons provided by Google and followed the steps mentioned over here.
Be sure to append the following to your CSS:
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}
Another thing to make sure is to see to it that you are using all the font formats provided by google: WOFF2, WOFF, Truetype, EOT and even SVGs if possible to ensure cross browser compatibility.
In case if you are not self hosting the font-icons, just try including the above mentioned CSS code. I haven't tried this with CDN but it did work for me for self-hosted font-icons. So let us all know how things work out, so that in case if it doesn't, we can try some alternate solution.
suddenly you have the Lockdown mode on. Go to safari menu > settings > websites > Lockdown Mode, and turn it off on the websites you have there.

How to access proxima nova tabular figures on a webpage?

The problem is that by default Proxima Nova numbers are not monospaced. Therefore a simple price list table does not line up. (see Figure 1)
Figure 1. Misaligned numbers
The question is:
is there some CSS rule to access monospaced numbers?
is there some HTML code trick so I can access monospaced numbers as characters? (sth like ∑)
or should I use <span class="figure">1</span><span class="figure">2</span>...?
Cheers!
CSS3 Fonts’ font-variant-numeric. This allows you to toggle Opentype features. In your case this would be:
.my-element { font-variant-numeric: tabular-nums; }
Proxima Nova lists support for tabular figures so that’s good, but I’m not sure about browser support for font-variant-numeric. If that doesn’t work then you could try font-feature-settings instead which should give you the same effect with (possibly) more support:
.my-element { font-feature-settings: "tnum" on; }
The specification does say though that:
Authors should generally use ‘font-variant’ and its related subproperties whenever possible.
I've found a solution. The CSS is
.tabular-numbers {
-moz-font-feature-settings:"tnum" 1; /* Firefox 31+ */
-moz-font-feature-settings:"tnum=1";
-webkit-font-feature-settings: 'tnum' 1; /* Chrome 31+, Android 4.4+, Opera 24+ */
font-feature-settings: 'tnum' 1; /* IE10+ */
}
References: http://clagnut.com/sandbox/css3/ and http://caniuse.com/#feat=font-feature
Contrary to answers to: No support for font-feature-settings in Safari? , I have seen no support on Mac Safari 7.1.
So the only universally working solution is currently:
.tabular-figure {
display: inline-block;
width: 7px;
text-align: center;
}
and <span class="tabular-figure">5</span><span class="tabular-figure">6</span><span class="tabular-figure">7</span><span class="tabular-figure">1</span>
which is a crap, so more like
.number{
font-family: "Helvetica Neue";
}
<span class="number">5671</span>
Looks like Apple Safari is becoming the new Internet Explorer... :###

MSIE 10, web font and font-feature-settings causes invisible text

I think this is really a bug in Microsoft Internet Explorer 10 but I could not find any explanation of the issue anywhere. A live demo of problem can be found at http://jsfiddle.net/37Bu5/ and here's the code:
<html><head>
<style>
#import url("https://fonts.googleapis.com/css?family=Open+Sans:400");
.withkerning
{
font-family: "Open Sans";
font-feature-settings: "kern" 1;
}
</style>
</head><body>
<p>Here`s some example text 1.</p>
<p class="withkerning">Here`s some example text 2.</p>
</body></html>
The problem is that the paragraph with class withkerning is totally invisible. I would like to use the kern (kerning from the font) feature because it improves readability.
Any suggestions about how to workaround this problem? As far as I know, this is not reproducible with MSIE version 11.0, Firefox or Chrome. I would prefer to avoid using JavaScript because either
I apply font-feature-settings using JavaScript and as a result I get ugly flash of text without kerning if browser is fast enough, or
I keep the CSS as-is and try to remove the font-feature-settings from MSIE 10. Any user trying to view the content with MSIE 10, and without JavaScript turned on, will get a page full of missing text.
My suggestion is to remove the font-feature-setting property, as it is not making the text easier to read.
The reason is that only IE supports font-feature-setting. All other browsers are dropping the property, and thus there is no change to text rendering in non-IE browsers.
WebKit and Blink browsers do support the property with a webkit prefix, and Firefox supports it with a moz prefix, but they do not support the prefixless one used in the jsFiddle.
If you must use this and not give it to IE, you could add the moz and webkit prefixes and remove the prefixless version, but bear in mind that it will then never use this property in IE, and will be dropped in other browsers if they ever remove their prefixed version.
Note: it looks like using this property makes the text invisible in IE10 and 11 on Windows 7, but works as expected in IE10 and 11 on Windows 8.x.
This is a bug: causing text to disappear in IE10 and IE11 when the font-feature-settings css property is used
https://connect.microsoft.com/IE/feedbackdetail/view/831964
Windows 7 users using Internet Explorer 10 or 11 are experiencing a bug that causes text to disappear when font-feature-settings are utilized. https://connect.microsoft.com/IE/feedbackdetail/view/831964
Windows 8 users do not experience the same issue.
If you have a lot of users using Windows 7 then simply removing font-feature-settings and -ms-font-feature-settings will cause the text to display.
I would still advice you to turn kerning on in the other browsers if you want text to display the same in all other browsers. You can ensure forward and backward compatibility like this:
.kern {
-webkit-font-feature-settings: "kern" 1;
-moz-font-feature-settings: "kern" 1;
-moz-font-feature-settings: "kern=1";
-o-font-feature-settings: "kern" 1;
font-kerning: normal;
}
You can use javascript if you still want to present windows 8 and 10 users with kerning.
kern.css:
.kern {
-webkit-font-feature-settings: "kern" 1;
-moz-font-feature-settings: "kern" 1;
-moz-font-feature-settings: "kern=1";
-o-font-feature-settings: "kern" 1;
font-kerning: normal;
}
.kern-ie {
font-feature-settings: "kern" 1;
-ms-font-feature-settings: "kern=1";
}
kern.js:
var ua = navigator.userAgent.toLowerCase();
var isNotWin7 = ua.indexOf('windows nt 6.1') == 0;
if (isNotWin7) {
var kernedTextCollection = getElementsByClassName(".kern");
for(var i = 0; i < kernedTextCollection.length; i++) {
kernedTextCollection.item(i).className = kernedTextCollection.item(i).className + ' kern-ie';
}
}
index.html:
<link rel="stylesheet" type="text/css" href="kern.css">
<!--[if IE]>
<script src="kern.js"></script>
<![endif]-->
I had the same issue today and after doing some research I came to this simple conclusion.
Remove custom kerning settings and let the browser decide, when to use kerning and when not to use kerning. It is the default setting and is working just fine. :-)

IE9: wrong rendering of Arial (bolder)

I've tested my page in Chrome, FF and IE8 and all the browser render the text this way:
It is defined like:
font-family: 'Arial', sans-serif;
font-size: 0.75em;
font-weight: bold;
I've tried declaring Arial in different ways, using px instead of em and also define the weight in number (600, 800)... But IE9 still renders is "bolder" than the other browsers:
Any help? Thanks
You might have a different problem, since you said you tried a weight of 600, but generally, when you tell IE 9 to render Arial as bold, what you end up seeing is not Arial, but Arial Black. This switch will happen for font-weights of 800 and 900.
To have a bold Arial in IE 9 without switching to Arial Black, use...
font-family: Arial, sans-serif;
font-size: 0.75em;
font-weight: 700;
This should also address the same issue in Firefox.
This question has been answered on StackOverflow before.
It's a browser issue, IE9 renders fonts different. It uses a ClearType technique called DirectWrite.
In my personal opinion, this isn't a big problem. Websites never look absolutly similiar in every browser. If it really bothers you, it's possible to add IE-Hacks (e.g. force the browser to use IE8-rendering) but I wouldn't recommend it.
Just to weigh in, you could place a meta tag into your HTML as a quick workaround, which will tell IE9 to emulate IE8, bringing back the original rendering.
To do this, place <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" /> in your section.
However this will come at the expense of other IE9 features you may need, like the better HTML5 and CSS3 support.
IE in general tends to give me headaches.
What I would do is use conditional CSS and remove the bold from the IE css
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="/ie9.css" />
<![endif]-->
And then define it like this
font-family: 'Arial', sans-serif;
font-size: 0.75em;
I came across this issue when I accidentally set the font-weight:bold on the body tag. For some reason IE9 rendered all my Arial text bolder than other browsers.

Displaying Angle Symbol in HTML

The HTML symbol for angle, ∠ (∠) does not work in IE 6 or 7. What are the other alternatives to display the symbol in Internet Explorer ?
You could use a solution that incorporates both Jamie's and Shoban's answers and adds some conditional comments:
<style type="text/css">
span.ang { display: inline; }
span.ang_ie { display: none; }
</style>
<!--[if IE]>
<style type="text/css">
span.ang { display: none; }
span.ang_ie { display: inline; font-family: Symbol; }
</style>
<![endif]-->
<span class="ang">∠</span><span class="ang_ie">Ð</span>
The above works on Windows in IE6, 7 & 8, Firefox 2 & 3, Opera 9.6 and Google Chrome 1.
It does not work in Safari for Windows 3 or 4. Safari for Windows renders a square for ∠ (and ∠). If Safari for Windows support is required, you are going to have to combine JavaScript to detect IE and Safari with Jamie's replace with image solution.
Try using this
∠
<FONT FACE="Symbol">Ð</FONT>
I have checked and it works in ie7 :). http://comers.citadel.edu/math_sym2005.htm
Try surrounding the angle with a
<span class="ang">∠</span>
then, if the browser is IE, show an image of the angle there using CSS.
See this article on attaching images with css:
http://www.hunlock.com/blogs/Attach_icons_to_anything_with_CSS
Looking at the problem from the other end, i.e. as a user who sees hollow squares for 〈 (but also 〈 and 〉), I found a solution for IE7 (on Windows XP):
In the Internet Properties (Sorry, I have only a German version here, so I don't know if this is the correct name.), go to Fonts, and set the text font to Arial Unicode MS or Lucida Sans Unicode.
Strange enough, even if a page doesn't use that font, just the setting causes IE7 to correctly interpret those HTML named entities.
Edit: Lucida Sans Unicode doesn't work for all entities. E.g., ∠ or ↩ display ok but 〈 and 〉 not.