使用底部对齐的emoji,在变小后变得过于靠下

背景:最近更改后,表情符号图像的大小从 20px 更改为 1em(即在我使用的以及 meta.discourse 默认使用的这个主题中为 16px)。

自 2023 年此更改以来,表情符号图像的显示已与文本底部对齐。这两个因素的结合使得表情符号在 CJK 用户看来比周围的文本低。我认为非 CJK 文化背景的用户也会有类似的看法,并觉得奇怪。

下图显示了文本和表情符号混合显示效果的比较。字体大小以及表情符号的宽度/高度均设置为 16px。上下部分唯一的 CSS 区别是表情符号的 vertical-align:上部是 text-bottom(Discourse 当前设置),下部是 baseline(我提出的更改)。

测试文本的 bbcode

Nulla malesuada porttitor diam. :star:
Nam ipsum ligula :partying_face:
Integer non enim. :racing_car:
你好 :waving_hand: 世界 :globe_with_meridians:
Hello :waving_hand: world :globe_with_meridians:

我认为下半部分看起来好多了。为什么 Discourse 选择 vertical-align: text-bottom?在 #34494 pull request 之后,现在更改为 baseline 是否可以?

1 个赞

@chapoi 抱歉打扰您。既然您是这两个 PR 的作者,我很想听听您的看法 :folded_hands:

你好 @littleD

说实话,表情符号的对齐是我存在的痛。在所有情况下似乎都无法正确处理。

例如,在我的实例上,你的简介看起来好多了

赛车是一个出了名的“位置较低”的表情符号。

视觉对齐也会因单词是否包含下降符或仅包含上升符而异。请看:

由于存在字母 j、g、y,上面的感觉更平衡。

如果我将其更改为基线,我会得到:

这更糟。

我不清楚为什么你的示例比我得到的结果低这么多。

所以很遗憾,我希望你能理解为什么我不会全局更改此属性。

我建议将最适合你的 vertical-align: text-bottom 添加到论坛的自定义 CSS 中。

2 个赞