0

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>
dmitrizzle
  • 774
  • 6
  • 15
  • How are you including the emoji and what does your browser devtools inspect facility show is the resultant code and CSS? – A Haworth Jun 30 '23 at 15:53
  • I've added an example of code implementation in the question. I use React to render the above. – dmitrizzle Jun 30 '23 at 19:04

3 Answers3

1

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.

herrstrietzel
  • 11,541
  • 2
  • 12
  • 34
  • I've added `em, i { font-style: italic; font-synthesis: none; }` to my global styles declaration and the fix worked exactly as expected. Thanks so much! – dmitrizzle Jun 30 '23 at 20:15
  • Glad it helped! However, I'm afraid the only 100% reliable cross-browser solution would be to wrap your emojis – which is admittedly pretty hard since the unicode range of current emojis probably needs to be constantly updated for any regex solutions. Actually emojis will always be pretty unpredictable as they are heavily dependent on locally available system fonts (e.g. Open type svg fonts) or other implementation concepts. – herrstrietzel Jul 01 '23 at 00:51
  • No worries, the browser support for this feature overlaps with my audience well. It's not super-important how well the emojis are rendered on this app, but for my own sake, having everything rendered consistently on my browsers is extremely satisfying. And I appreciate learning that many browsers support such a nuanced setting. – dmitrizzle Jul 01 '23 at 16:15
0

try with,

 .emoji-container {
  font-style: normal;
}
Madhura
  • 136
  • 8
  • I would like to avoid wrapping emojis in any containers. – dmitrizzle Jun 30 '23 at 19:05
  • @dmitrizzle How do you want to access the element anyway? Is `em strong { font-style: normal; }` an option for you? – Sally loves Lightning Jun 30 '23 at 19:24
  • 1
    @LightningMcQueen see https://stackoverflow.com/a/76591733/4927003 answer for `font-synthesis: none;` rule. As I was hoping, it does not try to alter emojis as CSS elements but alters how the browser renders them everywhere within the CSS context. – dmitrizzle Jun 30 '23 at 20:17
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.

A Haworth
  • 30,908
  • 4
  • 11
  • 14