I'm finding Unicode for special characters from FileFormat.Info's search.
Some characters are rendering as the classic black-and-white glyphs, such as ⚠ (warning sign, \u26A0 or ⚠). These are preferable, since I can apply CSS styles (such as color) to them.
Others are rendering as newer cartoony emoji, such as ⌛ (hourglass, \u231B or ⌛). These are not preferable, since I cannot fully style them.
It appears that the browser is making this change, since I'm able to see the hourglass glyph on Mac Firefox, just not Mac Chrome nor Mac Safari.
Is there a way to force browsers to display the older (flat monotone) versions to display?
Update: It seems (from comments below) there is a text presentation selector, FE0E, available to enforce text-vs-emoji. The selector is concatenated as a suffix without space onto the character's code, such as ⌛︎ for HTML hex or \u231B\uFE0E for JS. However, it is simply not honored by all browsers (eg Chrome and Edge).
Append the Unicode variation selector character for forcing text, VS15, ︎.
This forces the previous character to be rendered as text rather than as an Emoji Symbol.
<p>🔒︎</p>
Result: 🔒︎
Learn more at: Unicode symbol as text or emoji
I had a Unicode character in the content of a span::before, and I had the font-family of the span set to "Segoe UI Symbol". But Chrome used "Segoe UI Emoji" as the font to render it.
However, when I set the font-family to "Segoe UI Symbol" explicitly for the span::before, rather than just for the span, then it worked.
For a CSS-only solution to prevent iOS displaying emojis, you can use font-family: monospace which defaults to the text variant of the glyph rather than the emoji variant:
<p>Normal character: ↩</p>
<p>Monospace character: <span style="font-family: monospace">↩</span></p>
If your primary concern is forcing monochromatic display so the emoji don't stand out from the text too much, CSS filters, either alone or in combination with the Unicode variation selector, may be something you want.
p.gscale {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
a {
color: #999;
-webkit-filter: grayscale(100%) sepia(100%) saturate(400%) hue-rotate(170deg);
filter: grayscale(100%) sepia(100%) saturate(400%) hue-rotate(170deg);
}
<p class="gscale">You've now got emoji display on 🔒lockdown🔒.</p>
<p>External Link: celebrate 🎉</p>
Unlike the variation selector, it shouldn't matter how the emoji are rendered, because CSS filters apply to everything. (I use them to grayscale PNG-format "link type" icons on hyperlinks that have been modified to point to the Wayback Machine.)
Just mind the caveat. You can't override a parent element's filter in a child, so this technique can't be used to grayscale a paragraph, then re-colorize the links within it. 😢
...still, it's useful for situations where you're either going to be making the whole thing a hyperlink or disallowing rich markup within it. (eg. titles and descriptions)
However, this won't work unless CSS actually gets applied, so I'll give a second option which is more reliable in <title> elements than the Unicode variation selector (I'm looking at you GitHub. I don't like fake icons in my browser tabs):
If you're putting a user-provided string into a <title> element, filter out the emoji along with any bold/italic/underline/etc. markup. (Yes, for those who missed it, the standard does call for the contents of <title> to be plain text aside from the ampersand escapes and the browsers I tested all interpret tags within as literal text.)
The two ways I can think of are:
Directly use a manually-maintained regex which matches the blocks where the newest version of Unicode puts its emoji and their modifiers.
Iterate through the grapheme clusters and discard any which contain recognized emoji codepoints. (A grapheme cluster is a base glyph plus all the diacritics and other modifiers which make up the visible character. The example I link to uses Python's regex engine to tokenize and then the emoji package for the database, but Rust is a good example of a language where iterating grapheme clusters is quick and easy via a crate like unicode-segmentation.)
None of the other solutions worked for me but I eventually found something that did courtesy of css-tricks. In my use case, I was adding a link symbol at the end of each markdown header for direct linking to sections within articles but the emoji symbol looked a bit distracting. The following code allowed me to make the emoji look like a plain symbol and then switch back to looking like an emoji when hovered over which was perfect for my use case. If you just want to make the icon look more like a symbol just change the text-shadow hexadecimal color to #000 as shown in the second example.
.direct-link {
color: transparent;
text-shadow: 0 0 #dbe2ec;
}
.direct-link:hover {
color: inherit;
}
<h3>Blog Subheading🔗</h3>
.direct-link {
color: transparent;
text-shadow: 0 0 #000;
}
<h3>Blog Subheading🔗</h3>
Android fonts are not rich as you may expect.
Font files don't have these exotic glyph and Android has a hack for few characters without glyph. They are replaced with icons.
So solution is to integrate the site with a web font (woff).
Create new font file with FontForge and pick required glyph from free serif TTF for example. Every glyph takes 1k. Generate woff file.
Prepare simple CSS to import the custom font family.
style.css:
#font-face {
font-family: 'Exotic Icons';
src: url('exotic-icons.woff') format('woff');
}
.exotic-symbol-font {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Exotic Icons';
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
index.html file:
<html>
<head>
<meta charset="utf-8">
<link href="style.css" rel="stylesheet"></head>
<title>Test custom glyphs</title>
</head>
<body>
<table>
<tr>
<td class="exotic-symbol-font">
😭 ☠ ♠ a g
</td>
</tr>
</table>
</body>
</html>
Google Chrome, desktop version 75, seems to disambiguate its approach to rendering Unicode characters based on the first Unicode escape it encounters while loading a page. For instance, when parsed as the first HTML Unicode escape in a page source, and having no emoji equivalent, ⏷ seems to clarify to Chrome that the page contains escapes not to be rendered as emoji.
Expanding upon ssokolow's answer, using a filter is nice and at least makes the contours visible instead of using a simple font, but converting an RGB color into a sequence of CSS filters is very hard when you want to use a specific color.
A better (although quite wordy) option is to use the <feColorMatrix> SVG filter. Combined with the grayscale filter and the data URI scheme, you can represent the color via RGB and in-line CSS:
.violet {
color: white;
filter: grayscale(100%) url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><filter id='f'><feColorMatrix type='matrix' values='0.78 0 0 0 0 0 0.082 0 0 0 0 0 0.522 0 0 0 0 0 1 0'/></filter></svg>#f");
}
Unfortunately, you cannot interpolate the URL with data (taken from attributes or variables), but at least you don't have to calculate CSS filters from RGB.
My specific version of the problem
My site is using the ◀︎ (BLACK RIGHT-POINTING TRIANGLE) and similar characters in CSS pseudo-elements (::after and ::before) to indicate the current item in a list.
In my tests, I always used the triangle character and the variation selector 15 together. First I was using both a webfont from Google Fonts and a font installed on the device that should both have contained the glyphs for those characters, but for some reason, this assumption must have been wrong. I also tried different subsets on Google Fonts, to no avail: Two of my android devices with Google Chrome and Samsung Internet (Chromium) always rendered the emoji instead of the text glyph.
My solution
My solution was to download the latest WOFF of the Gnu Free Font (which I knew to contain glyphs for those characters), include it in my project, and define it using #font-face:
#font-face {
font-family: "Free Sans";
src: url("/site/static/fonts/FreeFont/FreeSans.woff") format("woff");
}
Then, to set the styles for my pseudo elements:
span.current::after {
font-family: "Free Sans", $universal-font-family ! important;
}
Discussion
I'm not yet sure about the performance impact of using that 786K extra font just for those few characters. If that becomes a problem, it should be possible to use a stripped-down custom font with just those characters instead.
If none of the other answers work for you, it's possible you have one or more of these fonts in your font stack (as was the case for us):
Segoe UI Emoji
Apple Color Emoji
These are included in a number of commonly used font stacks, like the Github font stack if I'm not mistaken.
I dont know of a way to turn off the emoji type rendering. Usually I use an icon font such as font awesome or glyphicons (comes with Bootstrap 3).
The benefit of using these over the unicode characters is that
you can choose from many different styles so it fits the design of your site;
they are consistent across browsers (if you ever tried doing a unicode star character, you'll notice it's different in IE vs other browser);
also, they are fully stylable, like the unicode characters you're trying to use.
The only downside is that its one more thing for the browser to download when they view your page.
For me on OSX the solution was to set font-family to EmojiSymbols
None of the solutions above worked for the "Emoji for Google Chrome" Extension.
So as a workaround I made a screenshot of the Unicode Character 'BALLOT BOX WITH CHECK' (U+2611) and added it as image with php:
$ballotBoxWithCheck='<img src="pics/U2611.png" style="height:11px;margin-bottom:-1px">'; # ☑ or /U2611
See: https://spacetrace.org/man_card.php?tec_id=21&techname=multi-emp-vessel
I've seen a few issues with the cursor being improperly spaced in the ace editor. The problem has to do with the font-spacing and apparently the solution is to only use monospaced fonts.
Here's another SO question about the issue.
ace editor cursor behaves incorrectly
My problem may have something to do with using a Bootstrap theme, but I'm not entirely sure.
When I open chrome dev tools and look at the font used in the ace editor, it says that my Bootstrap template is using the fonts
input, textarea, input[type="submit"]:focus, div {
outline: 0 none;
font-family: 'Open Sans', sans-serif;
}
If I add to my css
.ace-editor {
font-family: monospace !important;
}
I still have a problem with the cursor spacing being wrong, and strangely, the font which is being used looks exactly the same as the 'Open Sans' defined in Bootstrap.
Opening in Chrome dev tools, says that the computed property is 'monospace', so something is supposed to be working, but it isn't. Here is where it get really weird.
If I remove the font entries for both .ace-editor and input, textarea..., I get a perfectly good looking font that works.
Going to the computed properties, is shows the font-family to once again be 'Open Sans'.
So the question I'm trying to answer, is how can I either figure out what font is ACTUALLY being used when I cancel out the textarea entry from Bootstrap? Or why is this not accepting the monospace font when it is specified.
I'm somewhat assuming that 'Open Sans' may be monospaced, but whatever, it's still causing massive headaches.
The issue is caused by div included in bootstrap rule.
It is too broad and breaks character width measurements for ace.
You can add
.ace_editor div {
font: inherit!important
}
as a workaround. Would be good to also report an issue to the creator of your bootstrap template.
I must have went through every page of google but haven't found the solution yet. I have a custom font that I'm using through css font-face. The font adds extra padding on the bottom depending on the browser and OS that I am using. The picture below shows an example with mac being on the left and windows on the right. It looks correct on the right (in windows) and i want it to be the same on mac.
#font-face
{
font-family: universLight;
src: url('http://www.viggi.com/fonts/UniversLTStd-Light.otf');
font-weight: normal;
font-style: normal;
}
#button{
font-family: universLight;
border: 1px solid black;
background: #ccc;
}
The code is located at http://jsfiddle.net/ZDh5h/
Here is what I already know won't work from my research.
line-height adds padding to the top and bottom so the extra padding on the bottom remains.
using different extensions such as .otf or .ttf also doesn't work. Just produces the same results
changing the font-size also doesn't really do anything
I use this font a lot through out the site and don't really want to add different CSS sheets for mac vs windows. If anyone knows anyway to fix this without having javascript add extra padding I will be very grateful.
Thank you.
See http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height
normal
Tells user agents to set the used value to a "reasonable" value
based on the font of the element. The value has the same meaning as
. We recommend a used value for 'normal' between 1.0 to 1.2.
The computed value is 'normal'.
I think the behaviour you observe comes from different "reasonable" values across browser as normal is the default line-height value.
So specify your value (say line-height: 1.5em;) to get rid of the differences.
I have the websafe font georgia that is beuatifull for what I want.
The only problem I am having is that the bottom of the font doesn't line up.
http://jsfiddle.net/JW7F8/
<style>
.georgia {
font-family:georgia;
font-size:1.9em;
}
</style>
<span class="georgia">
1234567890
</span>
As you can see in the fiddle is that the 1,2,6 and 8 all start a bit higher than the rest.
The question:
How can I render georgia that it all starts on one line whilst still being able to set the site with XXem.
I do not mind:
splitting up the string
setting different classes
I just need a workable solution that still allows for dynamic sizing.
This is just the style of the font, technically all the font characters line up (if you highlight the text it will show the height of the font character).
You won't be able to consistently line up Georgia font even by splitting the font because the offset will have to vary depending on font size. This could be possible using em's, but it would be hacky at least, and would be very difficult to get working consistently cross browser.
Also, changing the font position will cause Kerning issues.
However, there is another similar font which Georgia was influenced from, which does line up:
Georgia incorporates influences from Clarendon-style typefaces
http://en.wikipedia.org/wiki/Clarendon_(typeface)
For a websafe solution I ended up implementing this: http://jsfiddle.net/JW7F8/2/
<style>
.georgia {
font-family:georgia;
font-size:1.9em;
}
.subitx {
position:relative;
top:0.18em;
}
.subity {
position:relative;
top:0.13em;
font-size:1.2em
}
</style>
<span class="georgia">
<span class="subity">1</span><span class="subity">2</span>345<span class="subitx">6</span>7<span class="subitx">8</span>9<span class="subity">0</span>
</span>
Only shame is the fonts that are sized up are bolder than the rest.
I really wish there were more web safe fonts that work cross browser... sigh
The Georgia font has old-style digits, i.e. digits that vary in height and may extend below the baseline too.
Most fonts that people use on web page have modern-style “lining” digits, all digits being of equal height, roughly the same as uppercase letters.
Some fonts contain both. It has relatively recently become possible to choose between such alternatives in CSS, in several browsers, using font-feature-settings. But Georgia has only old-style digits.
It is best to choose a different font if you think that such a fundamental feature is not suitable for your text.
However, on WebKit browsers (Chrome, Safari), using #font-face (for local fonts, not embedded) and unicode-range, you could specify that digits be taken from another font. It’s technically simple but not really a good idea:
#font-face {
font-family: Georgiax;
src: local("Times New Roman");
unicode-range: U+30-39;
}
#font-face {
font-family: Georgiax;
src: local("Georgia");
unicode-range: U+0-29, U+40-10FFFF;
}
Then you would just use font-family: Georgiax as if it were a real font family. But as said, this technique is not supported by other than WebKit browsers, and taking digits from another font means a typographic blunder.
P.S. Georgia is not web-safe. No font is. You won’t find it on an Android, for example.
I have a css definition in the head of my page as follows:
#font-face {
font-family: "ownfont";src: url("../fonts/ownfont.ttf");
}
Then i give a css class to the body (on button click) which changes the font type from:
font-family: Verdana,Arial,Helvetica,sans-serif;
to
font-family: "ownfont",Verdana,Arial,Helvetica,sans-serif;
"ownfont" is a 4-character font where spaces and hypen will be shown in order to show some non-visual characters.
Firefox 3.6.3 shows everything as excepted (looks the same as before except for spaces and hypen), but Safari (on Mac and Win; Versions 4.0.5, 5.0) changes the heigth of my text lines (or at least it looks like that or as if a padding/margin has been increased - but nothing has been changed except for the font).
Why does this font setting yield to different results in firefox and safari?
Is there a way here to force both browsers to behave the same?
any help or suggestion is appreciated - thanks in advance
Try specifying line-height: 1ex; in your css.
If you know what font(s) you're going to be using it with, it might be simpler to remake your font to have metrics more like the others'.