wrong formatting on clients

[ktsaou]

Hi,

Thank you for heml ! Email html is problematic and your work will certainly help a lot of people !

I am trying to use heml for formatting https://my-netdata.io (https://github.com/firehol/netdata) HTML emails.

I found a few formatting discrepancies among email clients, so I thought I should let you know.

The key problem is MS Office Outlook (check below). All the others are just imperfections.

Keep in mind I just found heml today, so please be gentle if I did it the wrong way.

Click to see my heml file

```html badhost needs attention - inbound packets dropped ratio - net_packets.eth0

netdata alarm notification

badhost needs attention

inbound packets dropped ratio = 0.14%

the ratio of inbound dropped packets vs the total number of received packets of the network interface, during the last 10 minutes

  net_packets.eth0 eth0 WARNING chart family severity   Sun Oct 29 12:19:16 EET 2017 date view netdata dashboard  

---

The source of this alarm is line 37@/etc/netdata/health.d/net.conf
(alarms are configurable, edit this file to adapt the alarm to your needs)
 
Sent by netdata, the real-time performance and health monitoring,
running on box.

badhost has 4 critical and 2 warning alarms 💌 ```

---

heml editor

This is what the heml editor shows:

gmail

Perfect. Marquee does not roll, but it shows up nicely.

outlook (MS Office Professional Plus 2016)

The main problems are:

1. sizing of containers is inaccurate (note the white space on the sides of the orange container)
2. tables, buttons and marquee fonts have been reset to Times and black.
3. line-height seems to be ignored.

office 365 web access

Perfect! Even the marquee rolls!

evolution 3.24.6

Almost perfect. It seems to ignore font sizes in style.

thunderbird 52.4.0

Almost perfect. It seems to ignore font sizes and colors at the tables.

Apple iOS 11.0.3 mail

Seems perfect! Even marquee rolls.

Outlook for iOS

Almost perfect! If seems to ignore completely the empty lines at the table (i.e. <row>&nbsp;</row>).

[ktsaou]

btw, to send the emails, I used the HTML generated by the code tab of the editor (just in case the editor is not up to date with the repo).

[avigoldman]

This is amazing feedback, thank you! HEML is still in its early days so there are definitely kinks to be worked out.

I'll dig into this on Monday 👍

At the moment the editor is at the same point as the repo. Definitely gonna try to keep that up.

[cicely-f]

This is a wonderful project! However, I get similar formatting discrepancies, specifically with Windows 10 Mail. This is what I see in the online editor preview:

And this is what I get in Mail:

I pasted the code from the "Code" tab in the editor straight into Mandrill; I'll try again running that through Mandrill's own inliner and see what happens...

[cicely-f]

I can confirm that running it through Mandrill's inliner changes nothing at all, which is good, of course. Saves one more step. :)

[avigoldman]

Thanks for double checking with that. You shouldn't need to run any external inliner, so that's good it didn't help, I guess 😉 Can you share the HEML you used to generate that email?

[cicely-f]

Unfortunately not, I made so many changes since then, and now I've rebuilt the template in MailChimp's own editor, which allows export to Mandrill, and, while not perfect, it's a lot more like it should be...

[avigoldman]

No worries! I'll see if I can find where that rendering issue is stemming from. Thanks for pointing it out!

[brunah]

Issue

[brunah]

Issue