Есть ли какой-нибудь способ запретить браузерам на основе Chromium добавлять отступ за эмодзи для заданных c размеров шрифта? - PullRequest
Новая
       69

Есть ли какой-нибудь способ запретить браузерам на основе Chromium добавлять отступ за эмодзи для заданных c размеров шрифта?

0 голосов
/ 02 мая 2020

Я заметил странное поведение браузеров на основе Chromium при добавлении смайликов. Посмотрите на этот простой код: 

div {
  padding: 10px;
  margin: 10px;
  min-height: 50px;
  width: 100%;
  font-size: 16px;
  border: 1px solid black;
}
<div id="content">
  There is an emoji in this word: long?word
</div>

Codepen: https://codepen.io/dadom/pen/pojWXzy

Для Chrome, Opera, Edge и Brave: есть пробел / поле после смайликов: Маржа в хроме

для Safari и Firefox: после смайликов нет пробела / поля: В Safari нет поля или Firefox

Еще более странная вещь: при увеличении размера шрифта это поле исчезает также в браузерах на основе Chromium. Этот код такой же, как и выше, только размер шрифта увеличен до 24 пикселей: 

div {
  padding: 10px;
  margin: 10px;
  min-height: 50px;
  width: 100%;
  font-size: 24px;
  border: 1px solid black;
}
<div id="content">
  There is an emoji in this word: long?word
</div>

Codepen: https://codepen.io/dadom/pen/KKdXjpz

Внезапно в браузерах Chromium больше нет места ... Это происходит независимо от семейства шрифтов, т. е. даже в том случае, если я использую специфицированный для ОС c emoji-шрифт, такой как «Apple Color Emoji» или «Segoe UI Emoji»: Нет полей в любом браузере

Может кто-нибудь объяснить это поведение? Можно ли добиться одинакового визуального вывода во всех браузерах с любым размером шрифта?

Большое спасибо!

...