제목의 첫 번째 이모지가 다른 코드로 표시되고 크기가 더 큼

안녕하세요, :wave: 제가 직접 테마를 개발하고 있는데, 제목에 이모지를 여러 개 입력하면 첫 번째 이모지만 나머지 텍스트와 함께 표시되는 대신 < img > 태그 안에 들어가는 것을 확인했습니다. 스타일링을 적용해서 크기가 동일해 보이도록 했지만, 적용하지 않으면 첫 번째 이모지가 더 크게 표시됩니다. 몇 가지 스크린샷을 첨부합니다. (새로운 계정이라 사진 1장만 허용되어 마지막에 첨부합니다, 죄송합니다) : (스크린샷은 마지막에 첨부, 죄송합니다. 새 계정은 사진 1장만 허용됨)

제 테마 코드는 여기서 확인하실 수 있습니다: GitHub - Decryptu/discourse-decrypt: A modern theme with a dark mode option. · GitHub

처음에는 제목의 첫 번째 글자가 책에서처럼 크게 표시되는 것이라 생각했지만, 실제로는 그렇지 않다는 것을 확인했습니다. 3개의 이모지 앞에 점을 찍어두었는데도 첫 번째 이모지는 여전히 달랐습니다. 나머지 두 이모지와 크기가 동일하도록 여러 가지 스타일링(rem, px, align)을 시도해 보았지만, 모바일 앱에서는 여전히 차이가 보입니다. : (마지막에 스크린샷 첨부)

제목의 첫 번째 이모지가 모바일과 데스크톱 모두에서 다른 이모지와 동일하게 보이도록 해결하는 방법에 대해 혹시 아이디어가 있으신가요? :thinking:

감사합니다.

안녕하세요, Decrypt :wave:

안전 모드에서도 그런가요?

저의 인스턴스에서는 제 제목의 HTML 코드가 다음과 같습니다:

image

<a href="/t/test-notif/161" class="fancy-title">
  <img width="20" height="20" src="/images/emoji/twitter/star.png?v=12" title="star" alt="star" class="emoji">
  <img width="20" height="20" src="/images/emoji/twitter/star.png?v=12" title="star" alt="star" class="emoji">
  <img width="20" height="20" src="/images/emoji/twitter/star.png?v=12" title="star" alt="star" class="emoji"> Test notif
</a>

안녕하세요! 방금 시도해 보았고, 네, 확인해 보세요:

(안전 모드 활성화 시 모든 항목을 체크했습니다)

첫 번째 이모지가 사이트에 추가한 커스텀 이모지(이모지-커스텀 클래스가 있음)이고, 나머지는 유니코드 이모지라는 것을 알 수 있습니다.

테스트 인스턴스에서는 유니코드 이모지가 태그로 변환되는데, 왜 그렇지 않은지 확실하지 않습니다. Apple/International을 포함한 여러 세트를 시도해 보았습니다.

이모지와 관련된 모든 설정을 공유해 주실 수 있을까요?

여기서 저도 한마디 덧붙이고 싶습니다. 제 사이트에서도 이모지 관련해서 이상한 현상이 발생하고 있는데, 이게 관련이 있을 수도 있습니다.

발견한 바로는, 벨호프(bellhop) 종 이모지가 이미지로 변환되지 않고 그대로 표시되고 있습니다. 이 문제는 제목과 메뉴 목록에만 영향을 미칩니다. 또한, 이모지 제한이 1개로 설정되어 있으므로, 제목에 두 번째 이모지가 표시되어서는 안 됩니다.

그 외에도 카테고리 제목에 표준 이모지 세트를 사용할 수 있으면 좋겠습니다. 카테고리 제목의 파티 팝퍼 이모지가 다른 부분에서와 다르게 보이기 때문입니다.

아, 관리자 사이트에서는 모든 이모지 설정이 기본값으로 되어 있습니다.

모든 이모지가 같은 것인데 (공식 iOS/Android 목록 기준) 제목 안에 동일한 문자를 복사해서 붙여넣었고, 세 번째 이모지를 복사해서 나머지를 삭제한 뒤 두 번 붙여넣어 보기도 했는데, 제목을 저장하면 여전히 이런 이상한 현상이 발생합니다.

설정 관련해서는 뭘 보여드릴 수 있을지 모르겠네요. 별 모양의 커스텀 이모지는 없고, 제가 가진 이모지는 암호화폐 로고뿐입니다.

여기 원본 제목을 복사해서 붙여넣어 보겠습니다: ⭐️⭐️⭐️ Une entité scrute la blockchain de Bitcoin?

어떤 이모지 세트를 사용하시나요?

이런 동작이 발생하는 이유를 알 수 없으므로 어둠 속에서 헤매고 있는 셈이지만, /admin/site_settings/category/all_results?filter=emoji를 시도해 보시는 건 어떨까요?

네, 없어야 하죠… 이 주제의 제목을 직접 수동으로 생성하셨나요, 아니면 다른 방식으로 생성하셨나요?

  • 관리자 패널의 기본값은 이모지 1개입니다.
  • 제목/게시물은 수동으로 생성되었습니다.

재현을 시도해 보면:

:thinking:

try.discourse.org에서 이모지가 1개보다 많은 주제를 만들어 볼 수 있을까요?

메타에서도 동일합니다 - 벨호프가 변환되지 않습니다

벨과 붐은 다릅니다 - 이미지와 비이미지

미리보기 패널에 표시되는 이모지는 제목이 아닌 콘텐츠에서 가져온 것이며, 게시물이 처리되고 게시된 후에는 Discourse 이모지로 변환됩니다. 그 전까지는 OS의 이모지 선택기를 통해 입력하셨을 가능성이 높으므로 Unicode로 표시되는 것이 정상입니다.

네, 하지만 사이드바의 이모지는 이미 존재하고 “잘못된” 상태입니다.
그리고 try.discourse의 예시를 위쪽에서 확인해 보세요.

단계에 대해 설명해 주시거나, 아니면 제목에 이모지 2개 이상을 넣는 방법을 영상으로 찍어주실 수 있으신가요?

@Decrypt, 제목의 이모지 개수당 이미지를 사용하려면 제목의 최대 이모지 수 설정 값을 높인 후 CSS로 원하는 대로 커스터마이즈할 수 있을 것 같아요.

1개의 좋아요

네, 감사합니다. 설정 화면의 스크린샷입니다:

주제를 만들기 전에 이미 제목에 이모지 최대 10개를 설정해 두셨나요, 아니면 방금 올려주신 건가요?

네, 제가 주제를 만들었을 때 “기본” 설정이었습니다.
첫 번째 게시글 이후로 코드나 설정을 건드리지 않았습니다.

이 문제를 일부 재현했지만 반대 상황이었어요 (Safari, iOS, 데스크톱):

Discourse 이모지 세트를 사용하면 문제가 없어요.

이 이모지들은 어떻게 작성하나요?

저는 유니코드나 :star:로 작성하면 image처럼 출력되는데, 전부 <img> 태그로 표시됩니다.