Export Rich Text for Gmail web client

Actions - Help & Questions
#1

Hi everyone

I am trying to use Drafts to compose emails before sending them with Gmail.
I am not using any email client, I use the Gmail web version in Safari macOS.

I looked for a way to export rich text that I can copy paste into Gmail while preserving the default Gmail formatting, or at least something close.
I installed this action: Copy as Rich Text but the output was not satisfying: small serif font with small line height.

I tried to tweak the action’s code a little bit to add some css styling, I managed to get the font-family and the font-size, but no matter what I do I cannot get the line-height.

Here is the part of the script I have changed:

// Wrap raw MMD output with HTML template with styles to set base fonts.

var template = `<html>
<style>
body {font-family:'Arial';font-size: 13px;line-height:150%;}
</style>
<body>
  [[content]]
</body>
</html>
`;

I only have basic coding skills. I am not sure if the problem is with the script or if it is Gmail which is ignoring some css properties.

If someone has figured it out, I would highly appreciate some help here.

#2

I’ve run some quick tests around this. If I paste the resulting rich text from my test code into a word processor (Nisus Writer Pro in my case), I can see the line height is included in the rich text. If I try it in Gmail, it looks to me like the sizing always gets overridden at the paragraph level. i.e. Gmail’s conversion from rich text (back) into HTML is ignoring the line height attribute. As such I think Google would have to address this in their web interface for e-mail composing.

My Test Code 
let mmdMain = MultiMarkdown.create();
mmdMain.completeDocument = false;
let strOutput = `<html>
<head>
<style>
body {font-family:'Arial';font-size: 13px;}
</style>
</head>
<body>
<p>one</p>
<p>two</p>
<p>three</p>
<p style="line-height: 100px;">four</p>
<p style="line-height: 100px;">five</p>
<p style="line-height: 100px;">six</p>
<p>seven</p>
<p>eight</p>
<p>nine</p>
</body>
</html>
`;
if (!app.htmlToClipboard(strOutput)) context.fail("Error rendering rich text from HTML.");
Rich Text in Word Processor

2020-12-23-11.40.38
2020-12-23-11.40.38634×627 3.79 KB

Rich Text in Gmail

2020-12-23-11.43.25
2020-12-23-11.43.25980×419 60.2 KB

As you are on the Mac, perhaps take a look at Drafts’ Mail Assistant in supporting you with sending richly formatted e-mails, or consider using an e-mail client for Gmail rather than the web interface. Hopefully, one of these will give you the sort of options you need without impacting your end user Gmail experience negatively.

2 Likes
#3

Thank you so much for looking into this and providing such detailed feedback!
I will explore the options you mentioned and report back on what would be the best workflow for me.

Thanks a lot!

2 Likes
#4

Tho chime in with my opinion: HTML is a bit of a strange thing. Often the result of an app in HTML for writing HTML close to an random generator…

But to add content

https://www.emailonacid.com/blog/article/email-development/12_things_you_must_know_when_developing_for_gmail_and_gmail_mobile_apps-2/

4. Gmail only supports <style> in the <head>.

Gmail does support embedded styles (<style>). However, embedded styles are only supported in the head of your HTML document.
The Gmail Android and iOS apps does not support <style> at all when rendering emails retrieved through non-Google accounts (GANGA).

5. Gmail removes your entire <style> block if it encounters an

Gmail is very finicky when it comes to parsing embedded styles. If it encounters even one error, it throws away the entire block.

@sylumer did you check CSS ID or Class usages?

#5

Yes. I did a lot of experiments With setting the styles in case it affected it. But do remember, Gmail isn’t receiving HTML from the clipboard, but rather rich text, so it is translating that rich text into HTML and that is Gmail’s own transformation, not one we specify.