Email summary styling changed as rendered in gmail?

[mcdanlj]

In email summaries sent in September, I see them styled this way in gmail:

Then for those sent in early December, I see them narrower but centered:

For those sent in late December, I see them narrower and right-justified:

I haven’t done any changes to email styling from how it is shipped, and I’ve been keeping up with all releases on tests-passed.

I don’t see any of these differences in protonmail; they look the same through that whole time.

I know that email HTML formatting is a hot mess, and I’m aware that there’s a whole service industry around testing email formatting (e.g. litmus’s email testing service). But I’m curious whether this was an intentional change, or a side effect of some other fix, or “gmail is being random”…

[Falco]

I can repro this on digests in my gmail too.

Since @awesomerobot have not touched this code since

Summary email needs a width limit

I’ve restricted the width and centered the email content here: From a test send: [Screen Shot 2022-10-03 at 12.51.53 PM] I’ve used tables to restrict the width and center which should ensure it works with older email clients: <table> <tr> <td></td> <td width="650"> all email content within this td </td> <td></td> </tr> </table> Note that a width set on a td functions more like a max-width, and content will still shrink to fit smaller devices.

I don’t really know why this is happening. Any ideas @awesomerobot ?

[awesomerobot (Kris)]

I’ve sent myself a test summary from Meta and that’s still centered for me in gmail… I’m guessing maybe there’s some conditional content block that I’m not seeing in the test that was missed in the earlier change that is pushing the layout over… @Falco could you forward one of the emails where you can see the issue?

[Falco]

@awesomerobot

@Falco could you forward one of the emails where you can see the issue?

Sent it

@awesomerobot

I’m guessing maybe there’s some conditional content block that I’m not seeing in the test that was missed in the earlier change that is pushing the layout over

Ohhh now that you mention it I think it was caused by the yearly review topic!

[awesomerobot (Kris)]

ahhh yes — when the content is too long the message gets clipped by gmail:

In a non-clipped email there’s an empty td to the left and right of the td width="650" (the td width="650" contains the content, and the left/right tds adjust their widths to fill the remaining space equally, which centers the content)

When the email is clipped, that right td isn’t there:

…so the left td adjusts to fill the available width, and pushes the content td all the way to the right…

I guess I can fix this by making each content block in the email center itself independently, then in the case of the email being clipped maybe only the clipped section is aligned incorrectly…

[mcdanlj]

Aha! I confirm that when I open up the right-justified late December email (in my case before the year in review) with “View entire message” it does show centered.

What a weird and not wonderful gmail rendering bug. Certainly explains why it didn’t show up on protonmail.

Just to be clear, my asking about this isn’t meant to imply any obligation to change it to work around the gmail bug, and I’m just grateful to understand what happened.

[anon48433008]

@mcdanlj

I see them narrower and right-justified:

I just got an email issue sorted and working after sometime down, did a few tests and that’s whats coming through in my gmail, everything is to the right just like that

Any suggested fix?

[awesomerobot (Kris)]

At the moment the email is centered by spacing columns at the start and end, when the end is clipped, the container at the start pushes the content too far to one side. The fix will be separating each section so they center independently, this way when the email is clipped only the last section will be misaligned. It’s a bit tedious but we’ll get to it eventually.

Another possible way around it would be to remove a bunch of content from the digest so it’s never long enough that gmail clips it.

[anon48433008]

@awesomerobot

remove a bunch of content

I’m fine with an abbreviated digest, how do I manage that, don’t see it as a template?

[awesomerobot (Kris)]

I just merged an update, this was an easier change than I expected. This should avoid most of the layout breaking when it’s too long for gmail.

UX: better digest email centering in event of truncation

@anon48433008

I’m fine with an abbreviated digest, how do I manage that, don’t see it as a template?

It’s not an editable template like the others, it’s in the Discourse source here: discourse/app/views/user_notifications/digest.html.erb at main · discourse/discourse · GitHub