Don't lowercase Margin tags

[maoxiong]

Outlook doesn't properly support the "margin" tag in css, however there is a workaround and that is to use "Margin" (note the capital M). This also affects "margin-top", "margin-left" etc.

The problem is that emogrifier seems to convert all inline tags to lowercase when it parses a stylesheet, so breaks Outlook. Workarounds by other parsers seems to be either leave case as-in, or just create two margin tags (one with the capital M, one without).

https://www.emailonacid.com/blog/article/email-development/outlook.com-does-support-margins

[oliverklee]

Hi @maoxiong, thanks for the bug report. Are you referring to the conversion of CSS into non-CSS style-related HTML attributes, or to the CSS that is left untouched in the HEAD?

[maoxiong]

CSS into non-CSS = inline right?

Then yes, I mean that. I haven't checked about the untouched (head) style - I'll try that later :)

[oliverklee]

Thanks for the clarification.

Could you please attach the input HTML and CSS, the current output HTML, and the HTML that you would expect to be generated? Thanks!

[aarongerig]

As I am experiencing the same faulty behavior, below's the requested data.

Input:

<!-- HTML -->
<table class="container"></table>

/* CSS */
.container {
    width: 600px;
    margin: 0 auto;
    Margin: 0 auto;
}

Output:

<!-- HTML -->
<table class="container" style="width: 600px; margin: 0 auto;">

As a result of removing the uppercase Margin property, the content doesn't get centered properly in Microsoft Outlook (see screenshot below).

Solution:

For me removing strtolower() in https://github.com/MyIntervals/emogrifier/blob/master/Classes/Emogrifier.php#L914 and https://github.com/MyIntervals/emogrifier/blob/master/Classes/Emogrifier.php#L1500 solved the problem.

[oliverklee]

@aarongerig Thanks for the additional information!

[oliverklee]

According to the spec, CSS property names are case-insensitive: https://developer.mozilla.org/de/docs/Web/CSS/Syntax

So we should treat them as that, and not support any workarounds that rely on not following the specifications.

Closing as invalid.

@maoxiong If you find any other bugs, please keep reporting them! Thanks!

[maoxiong]

In that case there's no need to change to lowercase in the processing.

If it just leaves input code as is, everyone is happy 😁

[oliverklee]

@maoxiong Would you be willing to create a PR with a test case for this and with this change? Then we can see whether it breaks anything.

[zoliszabo]

Hi all,

I actually have an 80% finished solution for this issue.

@maoxiong you can, of course, submit your solution if you want to.