Is there a way to normalize emoji size and width?

user_5383767 0
Viewed 857

2 issues with this particular example:

  • different emojis have different horizontal "whitespace" which means that if I add margin-right to separate wide emojis from numbers, some emojis have natural "whitespace" and space gets weirdly big
  • emoji size is very different on MacBook 2880x1800 (15.4 inch) and external 2560x1440 (27 inch) monitor relative to the number besides it - emojis are much bigger on external monitor for some reason

Is there a way to normalize these issues (especially the 2nd one)?

PS! I know about using image emojis as a trick to get around these kinds of issues but this question is about native emojis.

Screenshots

  1. MacBook display

enter image description here

  1. External monitor

enter image description here

.item {
  font-family: Arial;
  background: #eee;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 15px;
  font-size: 1em;
  margin-right: 10px;
}
.emoji {
  margin-right: 5px;
  line-height: 100%;
}
<div id="emojis">
  <div class="item">
    <span class="emoji">❓</span>
    <span>123</span>
  </div>

  <div class="item">
    <span class="emoji">⁉️</span>
    <span>4</span>
  </div>
  
    <div class="item">
    <span class="emoji"></span>
    <span>732</span>
  </div>
</div>

css
1 Answers

Does writing emojis in HEX-codes help them stay the same size across both displays?

<span class="emoji">&#10067</span>
<span class="emoji">&#x203D</span>
<span class="emoji">&#129300</span>

I was thinking the Retina display on Macbook, displays pixels differently (double pixel per pixel) and sometimes causes issues, especially on emojis. Maybe changing emoji differently for retina-display can help using @media tag

 @media
    only screen and ( -webkit-min-device-pixel-ratio: 1.5 ),
    only screen and ( min--moz-device-pixel-ratio: 1.5 ),
    only screen and ( -o-min-device-pixel-ratio: 3/2 ),
    only screen and ( min-device-pixel-ratio: 1.5 ),
    only screen and ( min-resolution: 96dpi ),
    only screen and ( min-resolution: 1.5dppx ) {
//codehere
}
user_143417280
Related