mcdanlj
(Michael K Johnson)
1월 16, 2023, 4:34오후
1
9월에 발송된 이메일 요약본을 보면 Gmail에서 이렇게 스타일링되어 있는 것을 확인할 수 있습니다:
그런데 12월 초에 발송된 것들은 더 좁게, 하지만 가운데 정렬되어 보입니다:
12월 말에 발송된 것들은 더 좁고 오른쪽 정렬되어 보입니다:
기본 제공되는 이메일 스타일링에 대한 변경 사항은 전혀 하지 않았으며, tests-passed 릴리스를 모두 따라잡고 있습니다.
Protonmail에서는 이러한 차이를 전혀 볼 수 없으며, 그 기간 동안 일관된 모습으로 보입니다.
이메일 HTML 포맷팅이 매우 복잡한 문제라는 점과, 이메일 포맷팅 테스트를 위한 전문 서비스 산업(예: Litmus의 이메일 테스트 서비스)이 존재한다는 점은 알고 있습니다. 하지만 이것이 의도된 변경 사항인지, 다른 수정 사항의 부수적인 결과인지, 아니면 단순히 "Gmail이 랜덤하게 표시하는 것"인지 궁금합니다…
5개의 좋아요
Falco
(Falco)
1월 16, 2023, 5:05오후
2
저도 Gmail의 다이제스트에서 이 문제를 재현할 수 있습니다.
@awesomerobot 님이 이 코드를 마지막으로 수정한 이후로
이런 문제가 발생하는 이유가 정확히 무엇인지 잘 모르겠습니다. @awesomerobot 님, 혹시 아이디어가 있으신가요?
4개의 좋아요
Meta에서 테스트 요약 메일을 내게 보냈는데, Gmail에서는 여전히 가운데 정렬로 표시됩니다… 테스트에서는 보이지 않는 조건부 콘텐츠 블록이 이전 변경 사항에서 누락되어 레이아웃을 깨뜨리고 있는 것 같습니다. @Falco 문제가 보이는 이메일 중 하나를 전달해 주실 수 있나요?
1개의 좋아요
Falco
(Falco)
1월 17, 2023, 5:56오후
4
보냈습니다
아, 말씀해 주니 연례 검토(Yearly Review) 주제 때문이었나 봅니다!
2개의 좋아요
아하, 맞다 — 콘텐츠가 너무 길면 Gmail에서 메시지가 잘려 나갑니다:
잘리지 않은 이메일에서는 td width="650"의 왼쪽과 오른쪽에 빈 td가 있습니다. (td width="650"에는 콘텐츠가 들어있으며, 왼쪽/오른쪽 td는 남은 공간을 동일하게 채우도록 폭을 조정하여 콘텐츠를 가운데에 정렬합니다)
이메일이 잘릴 경우, 오른쪽 td가 존재하지 않습니다:
…그래서 왼쪽 td가 사용 가능한 폭을 채우도록 조정되고, 콘텐츠 td가 오른쪽 끝까지 밀려나갑니다…
각 이메일 콘텐츠 블록이 독립적으로 자체를 가운데 정렬하도록 수정하면, 이메일이 잘리는 경우에도 잘린 부분만 정렬이 어긋나는 문제가 생길 것 같습니다…
3개의 좋아요
mcdanlj
(Michael K Johnson)
1월 17, 2023, 6:28오후
7
아하! 우측 정렬된 12월 말 이메일(제 경우엔 ‘연간 리뷰’ 이전)을 "전체 메시지 보기"로 열면 실제로 가운데 정렬로 표시된다는 걸 확인했습니다.
정말 기이하고 아니 훌륭한 Gmail 렌더링 버그네요. 프로톤메일에서는 왜 나타나지 않았는지를 확실히 설명해 줍니다.
참고로, 이 문제에 대해 질문한 것이 Gmail 버그를 우회하기 위해 변경해 달라는 의무를 의미하는 것은 아니라는 점을 분명히 하고 싶습니다. 그저 무슨 일이 있었는지 이해하게 되어 감사할 따름입니다.
3개의 좋아요
Michael K Johnson:
나arrow하고 오른쪽 정렬되어 보입니다:
일정 시간 동안 중단된 후 이메일 문제를 해결하고 작동하게 되었습니다. 몇 가지 테스트를 해보니 제 Gmail에 이렇게 오른쪽으로 정렬되어 표시됩니다.
권장되는 수정 방법이 있을까요?
현재 이메일은 시작과 끝에 여백 열을 배치하여 가운데 정렬되어 있습니다. 끝이 잘리면, 시작 부분의 컨테이너가 콘텐츠를 한쪽으로 너무 많이 밀어냅니다. 해결 방법은 각 섹션을 분리하여 독립적으로 가운데 정렬하는 것입니다. 이렇게 하면 이메일이 잘리더라도 마지막 섹션만 정렬이 어긋나게 됩니다. 다소 번거롭지만 결국 처리할 것입니다.
또 다른 우회 방법은 다이제스트에서 콘텐츠를 대량으로 제거하여 Gmail이 잘릴 정도로 길어지지 않도록 하는 것입니다.
1개의 좋아요
Kris:
콘텐츠를 대량으로 삭제하기
요약된 다이제스트는 괜찮은데, 템플릿으로 보이지 않아서 어떻게 관리하는지 모르겠어요.
1개의 좋아요
방금 업데이트를 병합했는데, 예상보다 훨씬 쉬운 변경 사항이었습니다. Gmail에서 콘텐츠가 너무 길어질 때 레이아웃이 깨지는 문제를 대부분 방지할 수 있을 것입니다.
main ← digest-truncation
merged 01:33PM - 20 Apr 23 UTC
This addresses an issue raised here: https://meta.discourse.org/t/email-summary-… styling-changed-as-rendered-in-gmail/251940
A simplified version of the problem:
```xml
<table>
<tr>
<td></td>
<td width="650"> </td>
<td></td>
</tr>
</table>
```
If the width-restricted `td` is too long, gmail will clip the end, including the following `td`.
When the last `td` is removed, the first `td` expands to fill the space and pushes all the content to the right, so it's no longer centered.
To avoid this, I've updated the structure so that each section centers itself and doesn't rely on the wrapping container.
```xml
<table>
<tr>
<td>
<table>
<tr>
<td></td>
<td width="650"> </td>
<td></td>
</tr>
</table>
<table>
<tr>
<td></td>
<td width="650"> </td>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
```
So now if gmail clips a too-long email, only the last section that gets clipped will be misaligned.
This also results in a slightly different appearance with a wider background, but I think this is a completely fine trade-off.
Before:

After:

다른 템플릿처럼 편집 가능한 템플릿이 아니라, Discourse 소스 코드에 위치해 있습니다: discourse/app/views/user_notifications/digest.html.erb at main · discourse/discourse · GitHub
3개의 좋아요