Question 197798 in Html Question posted in
Some basic documentation can be found here.

Html – Is there a way to stop FireFox and Chrome from italicising emojis via CSS?

It seems that most browsers on macOS (I suspect other systems too) choose to italicize emojis, which is not what I want. Is there a way to prevent that via CSS, a flag, or an attribute tag?

I figure this can be done with JavaScript, but I’d like to avoid parsing strings and wrapping emojis in HTML tags.

macOS FireFox and Chrome:

Emoji italicized in FireFox

macOS Safari:

Emoji not italicized in macOS Safari

Edit: This is an example of how the above text is implemented 👇

<em>6 min read by <a href="..."><strong>Dmitri ☕️</strong></a></em>
Tags:

3

Answers


  1. 0

    try with,

     .emoji-container {
  font-style: normal;
}
    Login or Signup to reply.
  2. 0

    CSS font-synthesis property

    In some browsers you might fix this issue via

    font-synthesis: none;

    In my tests it solved the problem at least in Firefox for windows.

    JS workaround: wrap all emojis in <span>elements with custom classes.

    /**
 * wrap all emojiis
 * based on Andreas Zwettler's answer
 * "replace emoji unicode symbol using regexp in javascript"
 * https://stackoverflow.com/questions/22006218/replace-emoji-unicode-symbol-using-regexp-in-javascript#40763403
 */

function wrapEmojis(el = document.body) {
  el.innerHTML = el.innerHTML.replace(/(ud83d[u1F601-ude4f])/g, `<span class="span-emoji">$1</span>`);
}
    body {
  font-size: 3em;
  font-weight: 400;
  /* font-synthesis might do the trick */
  font-synthesis: none!important;
}

.span-emoji {
  font-style: normal;
  display: inline-block;
  outline: 1px solid red;
}
    <p><button onclick="wrapEmojis()">Wrap emojis</button></p>
<p><em>Italic text &#x1F600;😡</em></p>
<p><em>I hate emojis 💩</em></p>

    Remove italic inline style from emojis

    Manually removing the italic style by selecting the emoji might not be feasible but a good advice for content editors.

    <i> is not an icon tag/element

    A lot of icon libraries repurposed the deprecated idiomatic element <i> for icons.
    The problem: Even modern browsers are still rendering text <i> as italic.

    So you should either use <span> tags or ensure you’ve included a style rule like:

    i{
  fonst-style:normal;
}

    to prevent these contents from being Italicized.

    Login or Signup to reply.
  3. 0

    I am on Edge/Chrome on Windows 10 and find that the tag puts the lot into italics (em is for emphasis and it’s up to browsers how they interpret it I think).

    <em>6 min read by <a href="..."><strong>Dmitri ☕️</strong></a></em>

    while the makes both Dmitri (and the cup, if that is possible) bold.

    If you style the em element to have font-type: normal then the cup (and Dmitri and the rest) remain upright:

    <em style="font-style: normal;">6 min read by <a href="..."><strong>Dmitri ☕️</strong></a></em>

    As the cup is in the same element as Dmitri they either have to be both upright or both bold.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search