#1561 reproduced
Deleted User

Severe CSS borkage with HTML for styling only

Reported by Deleted User | October 18th, 2016 @ 10:09 AM

To my chagrin and horror, a friend recently alerted me to the fact that sending an email containing no styled text while using the "Generate HTML even if only for styling" setting results in severe display issues across many major email clients.

All versions of Outlook on Windows and Windows Mail appear to be affected, and display all the paragraphs mashed together, in one big wall of text. Conversely, the GMail app for Android displays ludicrously large spaces between the paragraphs.

The chosen "theme" does not appear to matter, and I can reproduce the problem consistently with MailMate 1.9.5 (5263). Interestingly, using the exact same settings but adding some actual formatting to the email, such as bolding a word, appears to be enough to work around the problem.

Here are some screenshots of the styling issue, and here are shots of a very similar message, which displays properly. Unfortunately simply adding an HTML signature does not work. Pure text emails always work but the variations and discrepancies in display settings are simply mind-boggling, to the point of being something of a bug in themselves.

This looks like a somewhat major bug to me, especially as the clients affected are so prevalent.

Comments and changes to this ticket

  • Deleted User

    Deleted User October 18th, 2016 @ 10:47 AM

    Further investigation of this bug makes the cause obvious: whenever a message is sent using HTML without formatting, the paragraphs are wrapped in <div> elements, which clients render with varying degrees of success. A "reset" stylesheet would be needed to ensure things work properly across the board.

    However, whenever HTML styling is forced, by bolding a word for example, MailMate wraps every paragraph into <p> tags, which, of course, display properly nearly everywhere — except, of course, Yahoo! mail. The differences in source code are obvious, and this let me hope that the fix will be straightforward.

  • benny

    benny October 19th, 2016 @ 03:45 PM

    • State changed from “new” to “reproduced”

    Your observations are correct. The problem is that the non-Markdown converter in MailMate uses <div> and not all email clients like that. It's not a 2-second fix, but I'm aware that this needs to change (it wasn't a problem when MailMate couldn't style outgoing non-Markdown messages and only used the conversion for its own internal display of plain text messages). The only workaround is to put a bit of Markdown in your signature to always trigger the Markdown converter.

    You had a temporary comment about making custom themes. Let me know if you want to know more about that (it's experimental, but I would welcome users trying out custom themes).

  • Deleted User

    Deleted User October 19th, 2016 @ 04:04 PM

    Hello, Benny!

    After extensive investigation, it appears that there is no way to create a single HTML version that would please all the variants of Outlook: some want <p>, others want <div>, and others still will accept neither when it comes to margins and padding. The only really bulletproof solution would be to use a large <table> instead with paragraphs as cells, which seems really, really dirty — but could work really, really well.

    I know Apple Mail is full of faults, but its not-quite-HTML setup works actually pretty well across all versions of Outlook. They miss the sans-serif bit, but that is pretty much all. Is there any particular reason why MailMate does not want to emulate Apple's default HTML or flowed text format? (The Android client would also benefit from it, I believe, although I understand why your text format is actually cleaner and closer to the standards.)

    I was actually desperate enough to edit MailMate's bundle and add a file of my own to the mix, which allowed me to test a custom theme. (I'm sure there is a more elegant way, and I do welcome your insights on the matter.)

    Attached is my suggestion for a CSS file, which works pretty OK. It is much heavier than your own but it "behaves" reasonably well across the board. Unfortunately, due to Outlook's changing moods when it comes to padding and margins, we still bump into the occasional layout issue. Let me know if you would like me to investigate further and, if so, in what direction.

    And please don't worry, I understand that nothing is a two-second fix! 😊

  • Mike Petonic

    Mike Petonic October 27th, 2016 @ 07:26 PM

    Hi FJ -- Quick question. Are you using the hidden "defaults" setting to hardcode the CSS in there, or which file(s) are you modifying in ~/Library/MailMate ?

    I experience the same funky weirdness, especially when folks on Outlook on Windows reply to my messages.

    Thanks,
    -Mike

  • Deleted User

    Deleted User October 27th, 2016 @ 07:49 PM

    Hello Mike,

    I used a method which probably made Benny cry and which I could in all conscience not recommend to anyone, if only because the next update to MailMate will wipe it clean, unless one takes great care to keep backups at hand. Roughly, here is the process:

    1. Quit MailMate

    2. Locate the default themes. There are tucked away in a sub-bundle within the MailMate bundle in /Applications. I am not on the right machine to give you the path just now but digging around will get you there.

    3. Duplicate one of these default files and rename it.

    4. Open the file with BBEdit or some other text editor that doesn't suck™ and edit the file name, author, and UUID. Pay attention to the commas! You can generate a new UUID by entering the command uuidgen in Terminal.

    5. Replace the CSS with your own. Remember what we said about the commas? Do it!

    6. Save the file and restart MailMate.

    7. In MailMate Preferences, your new theme should be selectable along with the defaults.

    If you know which version of Outlook your recipients are using, my suggestion would be to use a service like Litmus to send a few test emails to specific test instances and to tweak the CSS until it looks good. I don't think anybody can make an email look good in all versions of Outlook, without coding it like a newsletter, which MailMate will not permit. (A great thing on principle, a regrettable issue in practice.) If this is any consolation, emails sent from Mail.app fare a little better in Outlook but are far from looking good. I think Benny and time are our best bets!

    I hope this helps! 😊

  • benny

    benny October 28th, 2016 @ 01:24 PM

    Hold down ⌥ when clicking “Check Now” in the Software Update preferences pane to get r5293. This is my first attempt to improve the output for Outlook. The output is essentially equivalent to the current Markdown to HTML generator (in other words, however that fails my output is also likely to fail).

    @FJ: Thanks for all the observations. My goal is to make the output as simple as possible while still having it readable in Outlook (and other email clients). The current output uses <p> and <br> and, in theory, shouldn't be displayed in any weird ways. Most importantly, I've changed the whitespace method to normal. I kind of already knew that pre-wrap would most likely not work well in many email clients. If we can learn anything from Apple Mail then that's fine by me, but <table> is not on the table ;)

    (I've considered using Litmus, but I found it to be a bit expensive for the hopefully very few times I would need it.)

  • Deleted User

    Deleted User October 28th, 2016 @ 01:46 PM

    Hello Benny — Thank you for the update, it is most appreciated. 😊

    I quite understand why table is out of the question, no worries there. I agree that keeping MailMate's output as clean as possible is essential. The infuriating thing is not so much that Outlook's rendering is so "opinionated" but rather that it seemingly changed its opinions with every release over the past fifteen years.

    I imagine that targeting Outlook 2016 is the way to go, since users of older versions will update eventually and Microsoft appears to have somewhat stabilised that side of things…

    Have you tried getting in touch with Litmus about a possible special price? I agree they are insanely expensive, and the current prices are all the more jarring that they used to be rather moderate in their demands. There's a good chance they would be open to a special deal for a special cause, though, especially if a little publicity can be offered them in return… Companies love to come out as the good, developer-friendly guys.

    Thanks again, and long live MailMate! 👍

  • benny

    benny December 1st, 2021 @ 01:41 PM

    • State changed from “reproduced” to “fixcommitted”

Please Sign in or create a free account to add a new ticket.

With your very own profile, you can contribute to projects, track your activity, watch tickets, receive and update tickets through your email and much more.

New-ticket Create new ticket

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile »

Mac OS X email client.

Shared Ticket Bins

People watching this ticket

Attachments

Pages