Utilisation d'emojis alignés en bas qui deviennent trop bas une fois réduits

[littleD]

Contexte : après un changement récent, la taille des images d’emoji est passée de 20px à 1em (soit 16px dans le thème que j’utilise et celui par défaut de meta.discourse).

UX: update emoji size

Depuis ce changement en 2023, l’affichage des images d’emoji a été aligné sur le bas du texte. La combinaison de ces deux facteurs fait que les emojis apparaissent plus bas que le texte environnant du point de vue d’un utilisateur CJK. Je pense que les utilisateurs de cultures non-CJK percevraient probablement le positionnement des emojis de manière similaire et le trouveraient également étrange.

La figure suivante montre une comparaison de l’effet d’affichage d’un texte et d’un emoji mélangés. La taille de la police et la largeur/hauteur de l’emoji sont toutes définies sur 16px. La seule différence CSS entre la partie supérieure et inférieure est le vertical-align des emojis : la partie supérieure est text-bottom (paramètre actuel de Discourse), et la partie inférieure est baseline (ma proposition de changement).

bbcode du texte de test

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

Je pense que la partie inférieure est bien meilleure. Pourquoi Discourse a-t-il choisi vertical-align: text-bottom ? Est-il possible de passer à baseline pour l’instant (après la pull request #34494) ?

[littleD]

@chapoi Désolé de vous déranger. Puisque vous êtes l’auteur des deux PR, j’aimerais avoir votre point de vue

[chapoi]

Bonjour @littleD

Je vais être honnête, l’alignement des émojis est le fléau de mon existence. Il semble impossible de bien le faire dans tous les scénarios.

Par exemple, votre texte est beaucoup plus beau sur mon instance

La voiture de course est cependant un émoji notoirement « mal placé ».

L’alignement visuel différera également selon que le mot contient des jambages ou seulement des hampes. Observez :

Celui du haut semble plus équilibré en raison de la présence des lettres j, g, y.

Si je devais changer cela en ligne de base, j’obtiendrais :

Ce qui est pire.

Il ne m’est pas clair pourquoi vos exemples sont si bas par rapport à ce que j’obtiens.

Donc, malheureusement, j’espère que vous comprendrez pourquoi je ne changerai pas cette propriété globalement.

Je vous recommande d’ajouter ce qui fonctionne le mieux pour vous : vertical-align: text-bottom au CSS personnalisé de votre forum.