이모지 line-height 조정 - 피드백

[tynaut (Ty Correll)]

실험 일시 중지

@tynaut

이 실험은 Safari에서 transform: scale(x) 속성과 관련된 렌더링 문제를 진단하기 위해 가시적인 미래까지 일시 중지/비활성화되었습니다. 이 경우 이모지는 무작위로 흐릿하게 표시될 수 있으며, 한 게시물에서는 선명하게 렌더링되지만 다음 게시물에서는 재현 가능한 패턴 없이 흐릿하게 표시될 수 있습니다.

이 토픽은 이모지가 더 이상 'line-height’에 영향을 주지 않고, 토픽 게시물, 메시지 및 채팅에서 사용자 텍스트 크기 설정을 준수하는 진행 중인 실험에 대한 피드백을 수집하는 데 전념하고 있습니다. 주로 UX 관련 문제에 초점을 맞추고 있습니다.
예를 들어, 여기에서 예시를 찾을 수 있습니다…

실험 없이 가장 작은 사용자 텍스트 크기에서(가장 극적인 차이):

^ “For instance,” 앞에 줄바꿈이 있는 것처럼 보이지만 실제로는 없습니다.

왜 이것이 버그 수정이 아닌 실험인가요?

버그 수정일 수도 있지만, 다양한 기기, 브라우저 및 운영 체제에 걸쳐 잠재적으로 존재하는 숨겨진 문제들이 있습니다. 예를 들어 Safari는 특정 숫자와 font-size 조합의 경우 transform: scale(x) 스타일링 속성을 흐릿하게 렌더링하며, webkit의 대안인 grow 속성은 더 널리 채택된 속성과 달리 줄 높이에 미세한 여백을 추가합니다. 이 토픽은 지원 채택 전에 버그를 포착하기 위한 그물 역할을 하기 위해 존재합니다.

[Arkshine]

좋아요! 디테일이 차이를 만듭니다.

여러 플랫폼과 브라우저에서 몇 가지 테스트를 해봤는데, 지금까지는 잘 보입니다!

제목의 이모지에도 비슷한 로직을 적용하는 건 어떨까요?
관리자가 테마를 커스터마이즈하고 글자 크기를 늘리는 모습을 볼 수 있습니다.

예시

[sam (Sam Saffron)]

이건 @tynaut 님이 말씀하신 내용과 관련이 있는 것 같습니다.

사용자 상태 스타일링에 이 영향이 미친 건가요?

[tynaut (Ty Correll)]

확인했습니다. 이는 채팅에 대해 특별히 수정되었습니다.

하지만 게시물/메시지의 경우, 해당 셀렉터에 대한 수정 사항을 찾겠습니다. 동적 <li></li>(예)나 기타 마크업 내의 이모지까지 포착할 수 있을 만큼 충분히 넓어야 하지만, 특정 항목은 명시적으로 제외해야 합니다.

[tynaut (Ty Correll)]

이 실험은 현재 Safari에서 transform: scale(x) 속성과 관련된 렌더링 문제를 진단하기 위해 [date=2024-01-02 timezone=“America/Chicago”]까지 일시 중지/비활성화되었습니다. 이 문제로 인해 이모지가 무작위로 흐릿하게 표시될 수 있으며, 어떤 게시물에서는 선명하게 렌더링되고 바로 다음 게시물에서는 재현 가능한 패턴 없이 흐릿하게 나타나는 경우가 있습니다.

일반적으로 Safari의 렌더링은 고려되어 왔으나, 이러한 불일치는 우회하기가 더 어려워 이 실험을 계속 진행하려면 보다 일관된 수정이 필요합니다. 또한 Safari의 웹킷(webkit) 버전을 계속 지원해야 합니다. 저는 Safari를 위해 웹킷의 대안인 grow 속성을 재구현하는 쪽으로 기울고 있습니다. 이 방법은 줄 높이(line-height)의 일부를 차지하지만, 이를 완화할 수 있습니다.