Проблема с эмодзи при рендеринге в Webkit — проблема с отображением HTML

Это потому, что все стандартизированные эмодзи Unicode предназначены для размещения в квадрате, и мы предполагаем, что сайты хотят, чтобы их эмодзи были одинакового размера и гармонично сочетались с текстом и другими эмодзи :teapot: если этот чайник был бы размером 50x50, это создало бы огромные пробелы между строками, как здесь:

Хорошее объяснение было дано при первоначальном добавлении:

С дополнительными деталями из Multimedia: Images - Learn web development | MDN

Когда атрибуты width и height изображения включены в HTML-элемент <img>, браузер может вычислить соотношение сторон изображения до его загрузки. Это соотношение сторон используется для резервирования пространства, необходимого для отображения изображения, что уменьшает или даже предотвращает смещение макета при загрузке и отрисовке изображения на экране. Снижение смещения макета является важным компонентом хорошего пользовательского опыта и производительности веб-сайтов.

Хотя лучшие практики разработчиков за последнее десятилетие могли рекомендовать опускать атрибуты width и height изображения в HTML-элементе <img> из-за сопоставления соотношения сторон, включение этих двух атрибутов считается лучшей практикой разработчика.

Тем не менее, у вас есть разумный пример случая, когда размер по умолчанию не подходит для всех эмодзи… этот старый эмодзи «cheers» в три раза шире, поэтому он не помещается красиво в квадрат. Не редкость, когда другие приложения ограничивают все эмодзи квадратами, поэтому наше поведение здесь не слишком необычно (например, это делают и Slack, и Discord)… но альтернативно мы могли бы рассмотреть возможность разрешения для пользовательских эмодзи опционально задавать размеры.

2 лайка