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.
Related
I am having a weird issue in Chrome where a Google Font is showing inconsistent letter heights. It only happens when I use text-transform: uppercase and it is fixed if I use font-weight:bold. I have some example code, where you can see the S is too tall in the word TESTING:
body {
font-family: 'Exo 2' !important;
line-height:1.42857143;
}
div {
width:40px;
}
span.upper {
display:block;
margin-top:20px;
font-size:18px;
text-transform:uppercase;
}
span {text-transform:uppercase; }
<link href="//fonts.googleapis.com/css?family=Exo+2:200,300,400,700,300italic,400italic,700italic|Raleway:200,300,400,600" rel="stylesheet" type="text/css">
<div>
Broken:<br>
<a href="#">
<span class="upper">Testing 123</span> </a>
<br>Normal:<br><br>
<span>Testing 123</span>
</div>
If I change the font to arial, it's fixed. Is there some CSS property I need to reset so that the font will render correctly?
This is a well known bug in Chrome on Windows. Chrome has made the political/ecosystem move to reduce dependencies on other companies and other established tech, like the move to fork Blink from Web-Kit. Chrome has also decided to ditch Microsoft font rendering. The result is poor sub-pixel rendering. You've noticed that once you bump your font up in size or weight the issue is resolved because the character strokes are wider than one pixel.
One solution for you: you can go into Chrome's flags:// to enable Direct Write.
But that doesn't help your users, of course. There are a few hacks.
One hack is to change up your font stack, so that SVG is called specifically for web-kit.
You can do this with a media query hack:
#media screen and (-webkit-min-device-pixel-ratio:0) {
#font-face {
font-family: 'chunk-webfont';
src: url('webfont.svg') format('svg');
}
}
So there are issues with this. It's not future-proof. It's a hack. But it works for now, and Chrome will be fixing this in the near future. Other, hacks include calling SVG first in your stack, but it has less reliable results.
I was having the same issues with Windows browsers and I tried using SVG first in the stack but it didn't work - I later found out that Chrome has since ditched support for SVG fonts. So I tried using a TTF version of my font placed first in the stack and for some reason it resolved the issue. Tested it in Chrome, Firefox and Edge. Oddly if I reference the TTF in a data URI it goes back to inconsistent letter heights again.
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. :-)
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”).
Here is the link to my website thats still under development. It runs well in Internet Explorer 8 and 9 as well as in Firefox. The webkit browsers (Safari and Chrome) are not able to display the facebook "like box" properly. The box goes above the dividing line. While in IE7 for some strange reason the search form doesnt float:right.
This is my first website so sorry for any pathetic questions:) Can u also please tell me to write a script for IE6 that would show a message to upgrade to a modern browser because IE6 absolutely messes everything up. Any other suggestions would be highly appreciated. I have used the toolbox theme for Wordpress to develop this blog.
I have used :
time.entry-date {color:#000; font-style:italic; text-decoration:none;}
To change the post date's color to black and remove the underline but the text-decoration:none does not work.
Facebook follow box :
#fb-root {
position:relative;
float: left;
margin-left: 10px;
/* remove: margin-top, z-index */
}
HTML5 elements are not recognised by ie < 9. Add to page <head>:
<!--[if lte IE 8]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
JQuery for ie6 message:
if ($.browser.msie && parseInt($.browser.version) =< 6) {
var here = ' here';
$('body').prepend('<div id="message">Please upgrade your browser'+here+'!</div>')
}
Hope it helps.
I'm having some problem aligning Japanese characters in IE8 on a website I am making.
I have something like <span>Label</span><span>Some value</span>. When both "Label" and "Some value" are either in Japanese or English, they align fine, but when they are mixed ("Label" is always Japanese, but "Some value" might not be) then the alignment is off. Example in the image below:
Surprise, surprise, it all works fine in othe browsers, same image from Chrome for example:
I can't figure out how to fix this. Has anybody come across this before or know a workaround for it? My company is still mostly using IE7, so some trick that would work on that would be most useful.
EDIT 1: I forgot to add the css I am using at the moment. For the label I have:
display: inline-block;
color: Gray;
vertical-align: text-top;
/*For IE7*/
zoom: 1;
*display: inline;
For the values I am using something similar:
display: inline-block;
margin: 0x 0px 0px 0px;
padding: 0px 0px 0px 0px;
vertical-align: text-top;
/*For IE7*/
zoom: 1;
*display: inline;
EDIT 2: I'm sure this is related to this problem. I have input boxes in my form, which are perfectly aligned until I type in some Japanese characters. No problem at all for roman characters again. See below:
Again, no problem whatsoever in other browsers...
EDIT 3:
Had a look at this again today (Over a year after I asked this question...). In IE9, the characters display just like in Chrome and other browsers, basically roman and Japanese words all line up properly. I checked it out using IETester and for the same page, the Japanese fonts are aligned "higher" in IE8 than IE9.
In IE8:
In IE9:
I didn't get to check this out at the time because I didn't have IE9. The fonts look identical, so it must be an IE issue and there is nothing that can be done about it I guess?
Make sure you are also assigning a vertical-align for the text boxes.
http://jsfiddle.net/HkrJH/
As far as the trouble with spans, I can't repro that. What font are you using? Can you post a jsfiddle that demonstrates the issue?
internet explorer is horrible.
target your browser and add a stylesheet.
Example in the head:
<!--[if IE 6]><link rel="stylesheet" href="http://mysite.com/path/to/ie6.css" type="text/css" media="screen, projection"><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="http://mysite.com/path/to/ie7.css" type="text/css" media="screen, projection"><![endif]-->
You can place the following HTML tag in the HEAD element of your web page:
<meta http-equiv=“X-UA-Compatible” content=“IE=7” />
I believe this might be a problem with the default fonts used for Japanese vs. English. English characters contain more whitespace than Japanese, because English has to accomodate characters like "c" (square), "t" (taller) and "g" (deeper), while all characters are square boxes in Japanese. So if you use the same pixel size of characters, English ones can still look off from Japanese ones, depending on the font used for either language (likely not the same, or not aligning even if it's the same). If you use vertical-align: middle; you should get a better result.