<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/xhtml; charset=utf-8">
</head>
<body><div style="font-family: sans-serif;"><div class="markdown" style="white-space: normal;">
<p dir="auto">On 7 Apr 2022, at 0:21, Erik Mueller-Harder wrote:</p>
</div><div class="plaintext" style="white-space: normal;"><blockquote style="margin: 0 0 5px; padding-left: 5px; border-left: 2px solid #777777; color: #777777;"><p dir="auto">I have no idea what Juice is, or Premailer (tho I can guess they’re probably Markdown → HTML conversion libraries), or why either one would have been selected instead of the other — but I can confirm that with Juice selected *finally* I can again use Markdown with MailMate!</p>
</blockquote></div>
<div class="markdown" style="white-space: normal;">
<p dir="auto">The following is mostly to have something on record on this subject.</p>
<p dir="auto">Both Juice and Premailer are third party utilities which can be used to inline the use of stylesheets (CSS) in HTML email. I'll give an example. First, here's the HTML needed to quote some text:</p>
<pre class="highlighted" style="margin-left: 15px; margin-right: 15px; padding: 5px; background-color: #F7F7F7; border-radius: 5px 5px 5px 5px; overflow-x: auto; max-width: 90vw; color: black;"><code style="margin: 0 0; border-radius: 3px; background-color: #F7F7F7; padding: 0px;"><<span style="color: #007700">blockquote</span>>
Replied text is quoted.
</<span style="color: #007700">blocquote</span>>
</code></pre>
<p dir="auto">The HTML above could be the result of, e.g., a Markdown converter (where MailMate uses the GitHub flavour of <code style="margin: 0 0; padding: 0 0.25em; border-radius: 3px; background-color: #F7F7F7;">cmark</code> now). For non-Markdown users, MailMate has its own built-in conversion to HTML.</p>
<p dir="auto">Styling the above can be done by inserting a stylesheet within the HTML. That could look something like this:</p>
<pre class="highlighted" style="margin-left: 15px; margin-right: 15px; padding: 5px; background-color: #F7F7F7; border-radius: 5px 5px 5px 5px; overflow-x: auto; max-width: 90vw; color: black;"><code style="margin: 0 0; border-radius: 3px; background-color: #F7F7F7; padding: 0px;"><span style="color: #333333"><</span><span style="color: #007700">style</span><span style="color: #333333">></span>
<span style="color: #007700">blockquote</span> {
<span style="color: #008800; font-weight: bold">color</span>: <span style="color: #008800; font-weight: bold">blue</span>;
}
<span style="color: #333333"></</span><span style="color: #007700">style</span><span style="color: #333333">></span>
</code></pre>
<p dir="auto">Email clients capable of displaying HTML (with CSS) will then make sure that blockquotes are blue. This works just like a webpage. That's all very nice, but there is a major problem: HTML has no way to handle the concept of replied/forwarded HTML, because HTML was designed for webpages and not for emails. In particular, the <code style="margin: 0 0; padding: 0 0.25em; border-radius: 3px; background-color: #F7F7F7;"><blockquote></code> tag was not designed to be used in emails. If it was, then there would likely be some way to have multiple stylesheets to be used at different quote levels. (In theory, that could possibly work, but it wouldn't make HTML emails less bloated than they already are.)</p>
<p dir="auto">In practice, the only solution is to get rid of the separate stylesheet and make sure all styling is done directly on the HTML tags. For the example above, this would mean generating HTML which looks like this:</p>
<pre class="highlighted" style="margin-left: 15px; margin-right: 15px; padding: 5px; background-color: #F7F7F7; border-radius: 5px 5px 5px 5px; overflow-x: auto; max-width: 90vw; color: black;"><code style="margin: 0 0; border-radius: 3px; background-color: #F7F7F7; padding: 0px;"><<span style="color: #007700">blockquote</span> <span style="color: #0000CC">style</span><span style="color: #333333">=</span><span style="background-color: #fff0f0">"color: blue"</span>>
Replied text is quoted.
</<span style="color: #007700">blocquote</span>>
</code></pre>
<p dir="auto">That would survive nicely if embedded in another reply.</p>
<p dir="auto">The above is a very simple example. Now, imagine one of those marketing emails you receive which looks like a webpage by email. This might contain a huge stylesheet doing all sorts of HTML/CSS tricks. Essentially, anything possible in a web browser. The user might choose to forward it and everthing then goes into a blockquote, but the stylesheet affects everything including whatever is written above the forwarded HTML. It needs to be inlined like the simple example above, but this is extremely complicated (and in some cases impossible). This is why MailMate uses a third party utility. In the past, MailMate has used Premailer but I've not been very good at keeping it up-to-date and some times it has broken down when Apple has changed what is included with a default install of macOS. On macOS 12.3, it broke completely when only <code style="margin: 0 0; padding: 0 0.25em; border-radius: 3px; background-color: #F7F7F7;">python3</code> was included. In the beta/test releases I've added the option of using Juice which is based on javascript. This is both more robust (and faster).</p>
<p dir="auto">Note: The CSS inliner is also used when printing because this often involves merging multiple HTML documents (there might be a way to avoid this with the new message view, but I'm not 100% sure).</p>
<p dir="auto">The latest test release has removed Premailer as an option on macOS 12. Hopefully this means fewer issues for users. I understand most of the above is likely nonsense for most users :)</p>
<p dir="auto">I'm a bit unsure if Juice works properly all the way back to macOS 10.12 (which MailMate still supports) which is why I haven't removed Premailer completely.</p>
</div><div class="plaintext" style="white-space: normal;"><blockquote style="margin: 0 0 5px; padding-left: 5px; border-left: 2px solid #777777; color: #777777;"><p dir="auto">I’ll confess that for the last two or three months I’ve been using FastMail’s web interface just so I could do the small bit of email formatting that I need to do. I’ve been missing MailMate! It’s good to be back.</p>
</blockquote></div>
<div class="markdown" style="white-space: normal;">
<p dir="auto">I'm glad you are back. I'm aware that the lack of a public release working properly on macOS 12 (and to some extent macOS 11) is a major problem. (It's important for the future of MailMate that this changes as soon as possible.)</p>
</div><div class="plaintext" style="white-space: normal;"><blockquote style="margin: 0 0 5px; padding-left: 5px; border-left: 2px solid #777777; color: #777777;"><p dir="auto">Benny, I should have done it long ago, but am now an official Patron. Thank you so much for the care and dedication you’ve poured into this indispensable app.</p>
</blockquote></div>
<div class="markdown" style="white-space: normal;">
<p dir="auto">Thanks for the support! The patrons are currently what keeps MailMate running.</p>
<p dir="auto">--<br>
Benny</p>
</div></div></body>
</html>