Emoji с выравниванием по низу оказываются слишком низко после уменьшения

[littleD]

Контекст: после недавнего изменения размер изображения эмодзи изменился с 20px на 1em (т. е. 16px в теме, которую я использую, и в meta.discourse, используемой по умолчанию).

UX: update emoji size (#34494)

Поскольку это изменение в 2023 году привело к выравниванию отображения изображений эмодзи по нижнему краю текста, сочетание этих двух факторов заставляет эмодзи казаться расположенными ниже окружающего текста с точки зрения пользователя CJK. Я считаю, что пользователи из не-CJK культур, скорее всего, также воспримут расположение эмодзи аналогичным образом и сочтут это странным.

На следующем рисунке показано сравнение эффекта отображения текста и эмодзи вперемешку. Размер шрифта и ширина/высота эмодзи установлены на 16px. Единственное различие в CSS между верхней и нижней частями — свойство vertical-align для эмодзи: в верхней части оно установлено в text-bottom (текущая настройка Discourse), а в нижней — в baseline (мое предлагаемое изменение).

bbcode тестового текста

Nulla malesuada porttitor diam.
Nam ipsum ligula
Integer non enim.
你好 世界
Hello world

Мне кажется, что нижняя часть выглядит намного лучше. Почему Discourse выбрал vertical-align: text-bottom? Можно ли сейчас изменить это на baseline (после pull-запроса #34494)?

[littleD]

@chapoi Извините за беспокойство. Так как вы автор двух PR, мне было бы интересно узнать ваше мнение по этому поводу

[chapoi]

Привет, @littleD

Честно говоря, выравнивание эмодзи — это моя вечная головная боль. Кажется, невозможно добиться идеального результата во всех сценариях.

Например, ваш текст выглядит гораздо лучше на моей инстансе

Хотя гоночная машинка — это печально известный эмодзи, который всегда «слишком низко».

Визуальное выравнивание также будет отличаться в зависимости от того, содержит ли слово спускающиеся или только восходящие элементы букв. Обратите внимание:

Верхний вариант кажется более сбалансированным из-за наличия букв j, g, y.

Если бы я изменил это на базовую линию, я бы получил:

Что выглядит ещё хуже.

Мне непонятно, почему ваши примеры так сильно смещены вниз по сравнению с тем, что получаю я.

К сожалению, надеюсь, вы поймёте, почему я не буду изменять это свойство глобально.

Я рекомендую добавить vertical-align: text-bottom в пользовательские CSS вашего форума, чтобы добиться наилучшего результата для вас.