I am trying to display some large emojis with unicode in HTML or CSS.
However, in Chrome, the lower part of some emojis are cut off, while others are displayed just fine.
It also couldn't render in mobile Firefox on Android.
Example of working emoji: ☀
Example of non-working emoji: 🌝
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
body {
margin: 0;
background-color: #fff;
}
p {
font-size: 20em;
margin: 0;
}
</style>
</head>
<body>
<p>🌝</p>
<p>☀</p>
</body>
</html>
minimal codepen example:
Thanks.
There is a bug reported in Chromium bug tracker - Color glyphs have a 256pt limit
We cache the "correct" version of color glyphs (as we do for alpha
masks), but in both cases we have a size limit for the cache (i.e.
256pt).
In the case of non-color glyphs, we fall back on draw-as-path for
larger sizes. We don't have such a fallback for color glyphs :(
In my Windows 10 system Chrome Version 69.0.3497.92 (Official Build) (64-bit), above font-size of 216px, the icon with color breaks.
Related issue: https://bugs.chromium.org/p/chromium/issues/detail?id=625191
Similar SO issue: Why do emoji not render above a certain size in Chrome?
Related
I am having this huge issue with IE 11, I can't get any variation of the color royal blue to display correctly as a background color. The background color works great in firefox and chrome.
I have tried all of this in the CSS file:
background-color:navy;
background-color:navy !important;
filter: none !important
I have tried other colors, like blue, and have tried to use just the color codes.
I have tried to force compatibility, If you run IE in compatibility, it will display the color correctly. I can never seem to get IE 11 to run compatibility from HTML. I have tried the the following:
<meta http-equiv="X-UA-Compatible" content="IE=8">
I am using the Doc Type tag as well:
<!DOCTYPE html>
How it looks in Firefox:
How it looks in IE 11:
No matter what I do, I can't get internet explorer to display the background color that I want. Can someone please tell how I can accomplish this?
This seems like a really strange behavior, as color constants have been supported by IE for quite a while. Your post contains a number of details, but not enough to help identify what might be going wrong in your case.
This JSFiddle works correctly on my machine; that is, it changes the background color of the body element as requested. Both navy and royalblue appear to work as intended on my copy of IE11.
Also, this MSDN sample, written originally for IE8, continues to work in IE11 (though you need to use the F12 tools to switch the document mode. BTW, that page also shows how to correctly declare the x-ua-compatible header to IE8 mode, if you're looking for such a live sample.)
To specify this (and the x-ua-compatible) directive in a bare bones HTML page, I might be tempted to use something like this:
<!doctype HTML>
<head>
<title>My page title</title:>
<meta http-equiv="x-ua-compatible" content="ie=8">
<style type="text/css">
body { background-color: navy }
</style>
</head>
<body>
<p>Hello, world</p>
</body>
</html>
If your machine is not showing this, then I would consider other environmental factors, such as basic syntax errors, out of date video drivers, loose cable connections, or related things
Hope this helps...
-- Lance
If you are getting the wrong blue, it's most likely how IE is reading the color "Navy". Have you tried using specific HEX codes? A browser will read a hex code the same, but color names can appear differently, try using the HEX Code like below.
background:#000080; /*Navy BG Color*/
or
background-color:#000080; /*Navy BG Color*/
My IE displays these as the same colors.
Heres a site you can get the browser HEX codes for each color name:
http://www.color-hex.com/color/000080
I am using the following HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div>This arrow here: <span>↩</span></div>
</body>
</html>
And this is my style.css:
span > a {
color: #F5413C;
}
On Firefox 31 (Windows 8), it displays just fine:
However, on my tablet (Samsung Galaxy Note 10.1 2014) the arrow appears as a thick blue:
How do I fix this? Can this be fixed? Is there, somewhere, a list of ASCII characters that display fine across all platforms?
Unfortunately, I can't find developer tools on Chrome on the tablet, so I can't diagnose this problem.
The arrow is rendered in an emoji font, which likely exists on the tablet but does not exist on your desktop. Or the emoji font is the only font on the tablet that contains this character at all, while your desktop has a wider variety of fonts which contain this glyph in a "more traditional" form and are chosen before any emoji font.
The solution is to set the font explicitly to a font which shows the character in the way you desire, and which also exists on the tablet. If the tablet doesn't have any font that contains this character other than the one you're seeing, there's not much you can do besides using an image instead.
This is driving me crazy. Firefox text is 1px lower than in chrome and ie. It's not a margin or padding issue on html or body, tried that. Doesn't seem to be a rounding issue either. Here is an image:
First "Hello" is Firefox 13, Second "Hello" is IE9 and "Hello World" is Chrome.
Here is the code (pretty simple):
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<!-- Always force latest IE rendering engine and chrome frame -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Pixel Bug?</title>
<style type="text/css">
html{
font-size: 100%;
}
body{
font-size: 1em;
line-height: 1.5;
background: white url('images/grid16.png') -4px -6px;
}
p{
margin: 1.5em 0;
}
</style>
</head>
<body>
<p>Hello World!</p>
<p>Hello World 2!</p>
</body>
</html>
Is it just a bug? What is going on here? I don't want a FireFox only work around, I just want to understand why this is happening.
EDIT:
Upon further research it seems to be a rendering bug, but it still confuses me. For example, the height of the text should be 24px. Which shouldn't really cause rounding errors that would cause this. Yet, if I change the line-height to 23px explicitly it lines up. I have no idea why.
EDIT2: Possible reason? https://bugzilla.mozilla.org/show_bug.cgi?id=442139
EDIT3: Lines up using a 20px font and 40px line height. Makes me think this is just so rendering bug. It's sucks cause 16/24 is pretty standard :/
See my earlier answer here::
CSS white-space and list-style-image do not stack in Firefox 11+
You are not using reset.css thus creating problems
Here you can find many links for the reset.css
Reason for using reset.css is because it will make all user-agent(browser) css to a base settings, so that they don't look different in different browsers.
Edit::
As the OP used the reset.css . I can't reproduce the issue. So the other reasons might be
Font rendering issue of different broser engine. No particuar fix Read more
Issue with hardware. Joel talks about it in his blog.
Also, I agree with what #steveax said.
Edit 2::
If you want to go in depth about it .
Raise a bug
Try tuning your browser yourself
I just finished designing a webpage for my photography. I used Chrome as my test browser.
But opening my page on IE, nothing was visible. After some trouble, I isolated the problem to the fact that I'm using percentages. I searched online for solutions but everything is about minor variations (related to padding and percentages).
Here is a simple HTML file that works perfectly in Chrome, but not all in IE (the div is a pixel-less box, slightly expanded by the presence of text). Your help is greatly appreciated. If I can't solve this issue, I'll have to completely redesign my site.
<html>
<head>
<title>A test HTML</title>
<style type="text/css">
#currpage
{
position: absolute;
bottom: 18%;
right: 10%;
left: 35%;
top: 15%;
border:2px solid green;
z-index: 240;
}
</style>
</head>
<body>
<div id="currpage" style="visibility: visible; opacity: 1;">
This is just a test.
</div>
</body>
</html>
Have you tried... actually making a well-formed HTML file?
Without a DOCTYPE, the browser renders the page in Quirks Mode. In the case of IE, it renders as it would in IE5.5, which didn't support a lot of now-basic stuff.
Add <!DOCTYPE HTML> to the start of the file.
EDIT: While you're at it, always include a Content-Type <meta> tag (such as <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> so that the browser knows what the encoding is. Also consider adding <meta http-equiv="X-UA-Compatible" content="IE=edge" /> to force IE to use the strictest standards mode it has. These appear on every single one of my pages, even the blank template. The DOCTYPE and Content-Type are required (if you want it to actually work), and the Compatible header is optional (I mainly use it to get rid of the Compatibility Mode button that is annoyingly close to the Refresh button...)
Well, I'm on mac, so I can't check it, but it seems that you don't have a doctype in your HTML, so the IE might be in trouble because he doesn't know how to parse your code.
At the very first line (even before the <html>-Tag write the following:
<!DOCTYPE html>
This is for a HTML5 document.
Edit: ....edit.... forget that point.
Set height and width of the containing element explicitly. I had a similar issue with one of my old pages (worked fine in Firefox and Chrome, went to hell in IE) and what I found that that in that Firefox and Chrome will automatically set the dimensions of the containing element if none are explicitly assigned and then base those percentages off those assumptions. IE makes no such assumptions so when it looks at the percentages it basically says "um 35% of what?"
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.