Best IT Recipes

How to prevent Unicode characters from being used as HTML in HTML from JavaScript?

I find Unicode for special characters from FileFormat.Info search .

Some characters appear as classic black and white glyphs, such as ⚠ (warning sign, \u26A0 or ⚠ ). This is preferable since I can apply CSS styles (e.g. color) to them.

image of warning glyph

Others appear as newer cartoon emojis, such as ⌛ (hourglass, \u231B or ⌛ ). They are not preferred since I cannot completely style them.

image of hourglass emoji

It looks like the browser is making this change, as I can see the hourglass glyph on Mac Firefox, but not Mac Chrome or Mac Safari.

Is there a way to get browsers to display older (monotonous) versions for display?

Update : it seems (from the comments below) there is a text presentation selector , FE0E , available for applying text-vs-emoji. The selector is combined as a suffix without a space in the character code, for example ⌛︎ for HTML hexadecimal or \u231B\uFE0E for JS. However, this is simply not respected by all browsers (e.g. Chrome and Edge).

+92
javascript html css unicode emoji
Oct 02 '15 at 20:37
source share
7 answers

Add a Unicode option character to force text input, VS15, ︎ ,
This makes the previous character appear as text, rather than as an emoji character.

 <p>🔒&#xFE0E;</p>

Result: 🔒︎

Find out more at: Unicode character as text or emoji

+104
Jul 19 '16 at 7:45
source share

I had a Unicode character like span::before . Chrome used "Segoe UI Emoji" as a font for rendering it. Even when I installed the font family in "Symgo UI Symbol", it didn't work.

But , when I set the font family to the "Segoe UI Symbol" explicitly for span::before , and not just for span , then it worked.

+9
Feb 21 '17 at 12:06 on
source share

Android fonts are not rich as you might expect. Font files do not have these exotic characters, and Android has a hack for multiple characters without characters. They are replaced by icons.

Therefore, the solution is to integrate the site with a web font (woff). Create a new font file using FontForge and select the required glyph, for example, from TTF with free serif. Each glyph takes 1k. Create a woff file.

Prepare simple CSS for importing a family of custom fonts.

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"> 😭 ☠ &#x2660; ag </td> </tr> </table> </body> </html>
+1
Feb 04 '18 at 16:43
source share

None of the above solutions worked for the "Emoji for Google Chrome" extension.

So, I took a screenshot of the Unicode symbol "BALLOT BOX WITH CHECK" (U + 2611) and added it as an image with php:

  $ballotBoxWithCheck='<img src="pics/U2611.png" style="height:11px;margin-bottom:-1px">'; # &#9745; or /U2611

enter image description here

See: https://spacetrace.org/man_card.php?tec_id=21&techname=multi-emp-vessel

0
Jul 23 '17 at 8:04 on
source share

It seems that Google Chrome for desktop version 75 eliminates the ambiguity of its approach to displaying Unicode characters, based on the first Unicode escaping that it encounters when loading a page. For example, when parsing as the first Unicode HTML escaping in the source code of a page that does not have an emoji equivalent, & # 9207; Chrome seems to explain that the page contains escaped characters that should not be displayed as emoticons.

0
Jul 20 '19 at 4:39
source share

For me on OSX, the solution was to install a font family on EmojiSymbols

-one
Jul 07 '17 at 3:47 on
source share

I don't know how to disable rendering like emoji. I usually use an icon font such as font awesome or glyphicons (comes with Bootstrap 3).

The advantage of using these characters in unicode characters is that

  • You can choose from many different styles to match the design of your site;
  • they are compatible between browsers (if you ever tried to use the Unicode asterisk character, you will notice that it is different from IE and another browser);
  • they are fully stylizable, like the unicode characters you are trying to use.

The only drawback is that its another thing to load the browser when viewing your page.

-3
02 Oct '15 at 9:51 on
source share


More articles:


All Articles