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.
Related
Currently, I have created a HTML file displaying some rounded number from Unicode table
Unicode table from 2000 to 2FFF
You can see than on Opera Browser (it is same thing on all browsers), some number are rounded in large circle and some other in small circle.
I have then created following HTML file to display some of this Unicode
<html>
<head>
<style type="text/css">
.unicode
{
font-size: 32px;
cursor: pointer;
min-width: 56px;
display: inline-block;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr><td>0x2780</td><td><span class="unicode">➀</span></td><td> white small</td></tr>
<tr><td>0x278A</td><td><span class="unicode">➊</span></td><td> black small</td></tr>
<tr><td>0x24EA</td><td><span class="unicode">⓪</span></td><td> white large</td></tr>
<tr><td>0x2460</td><td><span class="unicode">①</span></td><td> white large</td></tr>
<tr><td>0x2776</td><td><span class="unicode">❶</span></td><td> black large</td></tr>
<tr><td>0x24EB</td><td><span class="unicode">⓫</span></td><td> black large</td></tr>
<tr><td>0x24FF</td><td><span class="unicode">⓿</span></td><td> black large</td></tr>
</table>
</body>
</html>
When I display this file using distinct user I don't obtain same result as on Wikipedia (see previous image). Some circle small when they must be large and some are too large.
On Opera
All circles are ... small.
Only 0x2780 and 0x278A unicode characters are correctly displayed !
Score: 2/7
On Chrome browser
0x2776 is small and must be large !
0X24FF is too large !
Score: 5/7
On Edge Chromium browser
As on Opera browser
All circles are ... small.
Only 0x2780 and 0x278A unicode characters are correctly displayed !
Score: 2/7
On Edge Chromium brower (Cannary = test release)
As on Chrome browser
0x2776 is small and must be large !
0X24FF is too large !
Score: 5/7
On Firefox browser
Characters 0X24EA, 0x2A60 and 0x24EB are small instead of large as 0x2776 and 0x24FF !
Score: 4/7
On Safari browser
I don't have any Apple computer and it is not more possible to download a Windows version !
Score: 0/7
Question: How can I display rounded number with correct circle size on all browsers ?
In previous image (that is loadable in another Tab for zooming), you can quickly compare fonts (Arial, Cambria Math and Calibri) and browsers (Opera, Chrome, Firefox and Edge Chromium).
The rendering of the characters specified in your HTML file is determined by the font being used rather than the browser, and it is easy to confirm this. For example, I get a similar result to you in Opera if I use Arial font to render the characters in your HTML file:
However, if I change the font to Calibri (Easy Setup > Go to browser settings > Advanced > Appearance > Customize Fonts > Standard Font > Calibri), the size of some of those characters immediately changes:
This is because the size of the characters being rendered is a matter of style, and is determined by the font designers. There is nothing in the Unicode standard that states (say) ❶ should be rendered larger than ➊, and the descriptive terms being used in the OP ("black large" and "black small" respectively) are nothing to do with the Unicode specification.
It's also worth noting is that characters in the range U+2700 to U+27BF form the Dingbats Block, whereas characters in the range U+2460 to U+24FF form the Enclosed Alphanumerics Block. Characters from different blocks which happen to be visually similar, such as ➀ (➀ DINGBAT CIRCLED SANS-SERIF DIGIT ONE') and ① (① 'CIRCLED DIGIT ONE') have no real relationship at all.
The font designers for Calibri chose to render characters in the Enclosed Alphanumerics Block larger than some of those in the Dingbats Block, and the font designers for Arial did not.
Hence there is no definitively correct or incorrect way to render those characters. Just pick a font that renders them in a manner that is appropriate for your needs.
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?
This problem is occuring in iphones only. I checked it in an iphone 5(landscape mode) and iphone 4s(landscape mode).
Here's a link to the video
I tried specifying the font size but it didn't work.
Looks like iphones auto resize the text and to avoid that I used this:
body { -webkit-text-size-adjust: 100%; }
or
body {-webkit-text-size-adjust: none; } /* works perfectly in landscape mode */
For future users: If you're having issues similar to this in firefox, you can try to fix it with this.
body { moz-text-size-adjust:100%; }
So after a couple of hours of searching SO I found out that mobile Safari does try to adapt content so that it's readable on screen by default - it has different default styles to other browsers.
I don't know the exact rules - but when it comes to font sizes, it seems to work like this:
Text inside a paragraph, list item, or other 'text' element: Apply the author's style without adapting.
Text inside a DIV or other non-specific element: Treat as 'plain text' and 'adapt' the size according to Mobile Safari's rules.
So - the short answer is, wrap your text in a paragraph, and apply the font-size rule to that.
SOURCE
I think you can simply fix with this meta tag , try to add this to your html
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
I am developing a website that must print a page that contains Font Awesome icons. The issue is that when you go to print, the Font Awesome icons will not print in color.
In the browser they show up in color, but when the page is printed the icons are solid black. Is there anyway to make the Font Awesome icons print in color? Perhaps through CSS with #media print { }?
EDIT: Also, I am developing in firefox.
It turns out that the item that you actually need colored isn't the i itself but its :before element. Thus:
<style type="text/css">
.fa:before { color:red; }
</style>
If you are using bootstrap you need to edit its CSS since it's specifies black color for "#media print"
I just put together a simple HTML example using font-awesome and it seems to work fine in Chrome and Firefox for me. I see the icon in red onscreen and it also prints in red without any further action. Having said that, creating a separate media CSS is a good idea if your HTML page warrants it, since it can provide a better user experience (onscreen view isn't always ideal for printing).
Are you sure you don't have a printer setting modified to not print in color? Is the printer out of that color and thus defaults back to just plain black? Have you tried it in another browser (Chrome, Safari, Opera, IE)?
Here is the simple code I used for testing:
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<title>Fontawesome Test</title>
<style type="text/css">
.fa { color:red; }
</style>
</head>
<body>
<i class="fa fa-camera-retro"> Testing color</i> fa-camera-retro
</body>
</html>
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