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. :-)
Related
For example, if I want to set the corner radius in Webkit, Firefox and other than I can use the following CSS:
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
But are those styles hardcoded or is merely adding a prefix address that browser?
For example, if I want to change the margin only in Firefox could I simply add the prefix like so:
-moz-margin:-4px;
margin: 1px;
NICE TO KNOW:
And if that's possible is it possible to address a specific version or platform? For example, -moz-4.3-margin:-4px; not that I'd want to, just wondering.
And does the prefix approach work cross browser? I'm wondering because Internet Explorer.
Finally, will margin:10px ever knock out -moz-margin:10px? As in, "We, Mozilla, finally support margin so we are going to ignore all old -moz-margin tags and will just use the value in the margin tag".
It's very bad habit to apply css for specific browser. But there are solutions also:
Only Moz:
#-moz-document url-prefix(){
body {
color: #000;
}
div{
margin:-4px;
}
}
chome and safari:
#media screen and (-webkit-min-device-pixel-ratio:0) {
body {
color: #90f;
}
}
Below IE9:
<!--[if IE 9]>
body {
background:red;
}
<![endif]-->
I recommend don't use this moz, and safari prefix untill and unless necessary.
For example, if I want to set the corner radius in Webkit, Firefox and other than I can use the following CSS
No, that isn't how it works.
Vendor prefixed properties are used for experimental features. Either because the specification for the property hasn't been locked down or because the browser implementor knows their are problems with the implementation.
In general, you shouldn't use them in production code because they are experimental.
Support for the vendor prefixed versions is removed as support stabilises.
Is there a way to set any style for a specific browser in CSS?
There are several methods that have been used for that effect.
Parser bugs
By exploiting bugs or unsupported features in specific CSS engines (e.g. some versions of IE will ignore a * character on the front of a property name while other browsers will (correctly) discard the entire rule).
Conditional comments
Older versions of Internet Explorer supported an extended HTML comment syntax that could be used to add <link> or <style> elements specifically for certain versions of IE.
Support for this has been dropped.
JavaScript
Classes can be added to elements (typically the body element) using JavaScript after doing browser detection in JS.
As far as I know, prefixes were added to properties when CSS3 was being implemented by different browsers, and just property wouldn't work so we'd use -prefix-property for certain properties like gradient or border-radius. Most of them work without the prefix now for most browsers, and the prefix system has been kept only for backward compatibility.
For example, if I want to change the margin only in Firefox could I simply add the prefix like so:
-moz-margin:-4px;
margin: 1px;
This won't work. You can, however use different stylesheets for different browsers (say IE) in this manner:
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
The browser-specific prefix version thing doesn't exist.
Hope this answers your question.
As a workaround you can detect browser version in JS, and add it to class of your root element. You can detect browser through user agent , and there are multiple libraries in npm.
Using this class as a base, you can target browsers
function detectBrowser() {
if (navigator.userAgent.includes("Chrome")) {
return "chrome"
}
if (navigator.userAgent.includes("Firefox")) {
return "firefox"
}
if (navigator.userAgent.includes("Safari")) {
return "safari"
}
}
document.body.className = detectBrowser()
p {
display: none;
}
.safari .safariSpecific, .firefox .firefoxSpecific, .chrome .chromeSpecific {
display: block
}
My Browser is
<p class="chromeSpecific">Chrome</p>
<p class="firefoxSpecific">Firefox</p>
<p class="safariSpecific">Safari</p>
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... :###
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”).
No idea why :before won't work. My IE8 browser will display it correctly on this page:
http://quirksmode.org/css/selectors/beforeafter.html
but not when I do it on this page:
http://africa.ie
IE8 does support :before.
Two possibilities:
IE is rendering the page in compatibility mode or quirks mode.
Either of these modes will disable this functionality. Add a valid doctype and set X-UA-Compatible to IE=edge to deal with this.
You're using ::before rather than :before.
This is quite a subtle one. The correct syntax is with a double-colon, but at the time IE8 was released, it was a single colon; the official syntax has been changed subsequently. All modern browsers will accept either single or double colon for ::before and ::after to accommodate this historical change, but IE8 is stuck only supporting the single colon.
it works as long as you aren't in compatability mode. If you want it to support more I might recommend the following:
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
Removing the ::before and ::after selectors seems to get it work in IE8:
p.test:before {
padding-right: 5px;
content: url(http://quirksmode.org/pix/logo_ppk.gif);
}
p.test:after {
font-style: italic;
content: " and some text after.";
}
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.