하단 정렬된 이모지가 축소된 후 너무 아래로 내려갑니다

[littleD]

배경: 최근 변경 사항으로 인해 이모지 이미지 크기가 20px에서 1em(제가 사용하는 테마와 meta.discourse의 기본 설정에서 16px)으로 변경되었습니다.

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을 선택했을까요? (#34494 풀 리퀘스트 이후에) 현재 baseline으로 변경하는 것이 괜찮을까요?

[littleD]

@chapoi 죄송하지만 귀찮게 드는 것 같습니다. 두 개의 PR을 작성하신 분이시니, 이 문제에 대해 의견을 듣고 싶습니다

[chapoi]

안녕하세요 @littleD

솔직히 말씀드리면, 이모지 정렬은 제 발목을 잡는 문제입니다. 모든 상황에서 완벽하게 맞출 수 있는 것 같지 않아요.

예를 들어, 여러분이 작성한 소개글은 제 인스턴스에서는 훨씬 더 잘 보입니다.

다만 레이싱카 이모지는 악명 높게 ‘낮게 배치되는’ 이모지입니다.

단어에 내림선(descender)이 있는지, 아니면 오름선(ascender)만 있는지에 따라 시각적 정렬도 달라집니다. 아래를 보세요:

j, g, y 같은 글자가 존재하기 때문에 위쪽이 더 균형 잡힌 느낌을 줍니다.

이것을 베이스라인(baseline)으로 변경하면 다음과 같은 결과가 나옵니다:

이것은 오히려 더 나빠집니다.

왜 제 예시보다 여러분의 예시가 훨씬 아래에 위치하는지 제게는 명확하지 않습니다.

따라서 안타깝게도 이 속성을 전역적으로 변경하지 않을 것이라는 점을 이해해 주시리라 믿습니다.

여러분에게 가장 잘 맞는 vertical-align: text-bottom을 포럼의 사용자 지정 CSS에 추가하는 것을 권장합니다.