Emoji con allineamento inferiore, troppo in basso dopo essere stati ridimensionati

Background: dopo la recente modifica, la dimensione delle immagini delle emoji è cambiata da 20px a 1em (cioè 16px nel tema che uso e che meta.discourse usa per impostazione predefinita).

Da questa modifica nel 2023, la visualizzazione delle immagini delle emoji è stata allineata al fondo del testo. La combinazione di questi due fattori fa apparire le emoji più in basso rispetto al testo circostante dal punto di vista di un utente CJK. Credo che anche gli utenti di culture non CJK percepirebbero il posizionamento delle emoji in modo simile e lo troverebbero strano.

La figura seguente mostra un confronto dell’effetto di visualizzazione di testo ed emoji mescolati. La dimensione del carattere e la larghezza/altezza dell’emoji sono entrambe impostate su 16px. L’unica differenza CSS tra la parte superiore e quella inferiore è vertical-align delle emoji: la parte superiore è text-bottom (impostazione corrente di Discourse), e quella inferiore è baseline (la mia proposta di modifica).

bbcode del testo di test

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:

Penso che la parte inferiore sia molto migliore. Perché Discourse ha scelto vertical-align: text-bottom? Va bene cambiarlo in baseline per ora (dopo la pull request #34494)?

1 Mi Piace

@chapoi Mi dispiace disturbarti. Dato che sei l’autore delle due PR, sarei interessato a conoscere la tua prospettiva su questo :folded_hands:

Ciao @littleD

Sarò onesto, l’allineamento delle emoji è il mio incubo. Sembra impossibile farlo funzionare in ogni scenario.

Ad esempio, la tua introduzione sembra molto meglio sulla mia istanza

La macchina da corsa è un’emoji notoriamente “posizionata in basso”.

L’allineamento visivo differirà anche a seconda che la parola contenga discendenti o solo ascendenti. Osserva:

Quella in alto sembra più equilibrata a causa della presenza delle lettere j, g, y.

Se dovessi cambiarla in baseline, otterrei:

Il che è peggio.

Non mi è chiaro perché i tuoi esempi siano così più bassi di quelli che ottengo.

Quindi, sfortunatamente, spero tu capisca perché non cambierò questa proprietà a livello globale.

Ti consiglio di aggiungere ciò che funziona meglio per te vertical-align: text-bottom al CSS personalizzato del tuo forum.

2 Mi Piace