小さくなると下揃えの絵文字が下寄りすぎる

背景:最近の変更後、絵文字の画像サイズが 20px から 1em(つまり、私が使用しているテーマとデフォルトで meta.discourse が使用しているテーマでは 16px)に変更されました。

2023年のこの変更以降、絵文字画像の表示はテキストの下部に揃えられるようになりました。これら2つの要因の組み合わせにより、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 のプルリクエストの後、現時点では baseline に変更しても問題ないでしょうか?

「いいね!」 1

@chapoi お手数おかけして申し訳ありません。この2つのPRを作成されたので、この件についてご意見を伺えればと思います :folded_hands:

こんにちは、@littleDさん

正直に言うと、絵文字の配置は私の悩みの種です。あらゆる状況で正しく配置するのは不可能に思えます。

例えば、あなたの説明文は私のインスタンスではもっときれいに表示されます。

しかし、レーシングカーは悪名高い「低配置」の絵文字です。

また、単語に下行葉があるか、上行葉しかないかによって、視覚的な配置も異なります。ご覧ください。

上の例は、文字 j、g、y が存在するため、よりバランスが取れているように感じます。

これをベースラインに変更すると、次のようになります。

これは悪い例です。

なぜあなたの例が私のものよりもずっと低いのか、私には不明です。

残念ながら、このプロパティをグローバルに変更しない理由をご理解いただければ幸いです。

フォーラムのカスタムCSSに、あなたにとって最適な vertical-align: text-bottom を追加することをお勧めします。

「いいね!」 2