Emoji rendered in Chrome have different widths than in other browsers

Question

I have a page with an emoji followed by a space and some text. For example, " Friends" (character is "busts in silhouette", U+1F465). In Safari and Firefox on macOS, it renders with a space between the emoji and the following text as expected.

In Chrome, however, the space appears as if it's absent:

If I remove the space, Chrome renders the text overlapping with the emoji. It seems like the width of emojis as rendered in Chrome is less than the actual character width.

Is there any way I can get the desired appearance (a normal-width space) cross browser without resorting to an image or icon font? I've tried messing with some CSS properties like text-rendering without success.

<style>
  .friends { 
    font-family: Helvetica, Arial, sans-serif; 
  }
</style>
<span class="friends"> Friends</span>

JSFiddle

score 14 · Answer 1 · answered May 23 '17 at 22:03

14

I had the same issue, and found out that it happened on non-retina screens only.

To fix it, we applied a margin through a media-query like this:

<span class="friends"><span class="emoji"></span> Friends</span>

<style>
  @media
  not screen and (min-device-pixel-ratio: 2),
  not screen and (min-resolution: 192dpi) {
    span.emoji {
      margin-right: 5px;
    }
  }
</style>

This is a pretty minimal media-query. You should probably use a more complete one like https://stackoverflow.com/a/31578187/1907212.

answered May 23 '17 at 22:03

Julien Ma

141
1
6

1

I'm having this issue on a retina screen, macbook pro 16 inch 2019 – Tom Jan 01 '20 at 03:45
@Tom what version Chrome, as this no longer seems to exist on Chrome 79 – LTPCGO Jan 07 '20 at 05:21
1

Chrome 79 here too – Tom Jan 07 '20 at 18:21
For me, it happens only _on_ retina screens – kano Apr 01 '20 at 13:17

emmas · Answer 2 · 2021-02-14T08:23:51.293

5

This is a Chrome bug (See detail here)

This is related to displaying emojis in Mac Chrome on a non-retina screen. My monitor had a non-retina screen (where the spacing / cursor position were info), but were absolutely fine on my Mac.

edited Feb 14 '21 at 08:23

answered Jan 12 '21 at 15:58

emmas

81
1
4

1

That bug has been closed as a duplicate of [this bug](https://bugs.chromium.org/p/chromium/issues/detail?id=596223&q=596223&can=2) which, as of 2021-02-12, is still open. – Dave Land Feb 13 '21 at 01:55

score 3 · Answer 3 · answered Jun 18 '21 at 21:19

As an alternative to Julien's answer, instead of selectively specifying a margin-right to correct an imbalance, we can "force" the width of the actual emoji character(s) to be equal in a cross-browser way using letter-spacing.

In essence, our issue is that most characters with the Roman alphabet don't have a height-to-width ratio of 1:1, but most emojis (roughly) do have a height-to-width ratio of 1:1. This is one way of describing what we're seeing with the spacing between emojis and ANSI characters.

See example screenshot here

letter-spacing sets the horizontal spacing behavior between text characters. When paired with CSS em units, we can use this property to "force" each character/emoji to render in a roughly 1:1 box. This might need to be adjusted depending on the font or character set you use.

According to the sources below, a Roman character is often roughly 0.5 as wide as it is tall, so we can simply do:

span.emoji {
  letter-spacing: 0.5em;
}

<span class="friends"><span class="emoji"></span> Friends</span>

<style>
  span.emoji {
    letter-spacing: 0.5em;
  }
</style>

This method means that in browsers that render emojis correctly, we aren't adding an extra margin-right.

score 2 · Answer 4 · answered Feb 13 '21 at 01:52

It's February, 2020, and this issue still very much exists (link to open Chrome bug). Chrome 88.0.4324.150 on MacOS X 10.15.7 on a 2019 16" MacBook Pro: dragging a browser window between the internal Retina monitor and an external ultrawide monitor changes the rendering of the emoji.

score 1 · Answer 5 · answered Feb 03 '17 at 03:32

What I would do is add another span within the .friends span that contains the emoji, have it use a right margin, and not have a space after it:

.friends { 
  font-family: Helvetica, Arial, sans-serif; 
}

.friends span {
  margin-right: 10px;
}

<span class="friends"><span></span>Friends</span>

That way you don't have to worry about space rendering ;)

Hope this helps! :)

score 1 · Answer 6 · answered May 17 '21 at 20:50

1

Removing BlinkMacSystemFont from font-family fixed issue for me, you need to close and reopen tab to see effect.

answered May 17 '21 at 20:50

Sebastian Podgajny

11
2

score -1 · Answer 7 · answered Jan 07 '20 at 05:21

-1

As of (at latest) Chrome 79, this issue no longer exists.

answered Jan 07 '20 at 05:21

LTPCGO

448
1
4
15

5

It still happens for me on Chrome 79 on MacOS – Tom Jan 07 '20 at 18:20
See my comment of 2021-02-13: there is still an open bug on this issue. – Dave Land Feb 26 '21 at 23:31

score -1 · Answer 8 · edited Jul 12 '20 at 19:19

-1

This problem still exists on Chrome 83 on MacOS

I think I found the solution

[data-emoji] {
  font-style: normal;
  font-weight: normal;
}
[data-emoji]:before {
  content: attr(data-emoji);
  margin-right: .125em;
}

edited Jul 12 '20 at 19:19

Jean-François Fabre

137,073
23
153
219

answered Jul 12 '20 at 17:54

Julian Stark

34
4

Emoji rendered in Chrome have different widths than in other browsers

8 Answers8

Linked

Related