spatie / mailcoach-support

Questions and support for Mailcoach
https://mailcoach.app
31 stars 2 forks source link

8-Bit Encoding breaks inlined CSS #160

Closed Gaia-Nutrition closed 4 years ago

Gaia-Nutrition commented 4 years ago

Mailcoach encodes outgoing email content using 8-bit. From what I could gather from past issues like #62, this keeps spacial characters (such as emojis) readable in text-versions of emails.

However, this also results in a forced line wrapping which breaks the inlined CSS. This is what the HTML content of an 8-bit encoded email looks like:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html 
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" 
content="width=device-width, initial-scale=1.0">
<meta 
http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body 
style="box-sizing: border-box; font-family: -apple-system, 
BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple 
Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; 
-webkit-text-size-adjust: none; background-color: #ffffff; color: #718096; 
height: 100%; line-height: 1.4; margin: 0; padding: 0; width: 100% 
!important;">

As you can see on line 2 of the body styles, 'Apple Color Emoji' is word wrapped which breaks the whole CSS clause.

When disabling the custom encoding, the emails are not wrapped and render fine.

riasvdv commented 4 years ago

EDIT: Nevermind, I see there's still an issue

Are you sure the wrapping breaks the whole CSS clause? Every test I've done results in the CSS still being parsed correctly, even though it's wrapped.

As you can see the background of the html is red:

image

The source is wrapped:

image
riasvdv commented 4 years ago

I've reverted the encoding change in 2.7.3

As for https://github.com/spatie/mailcoach-support/issues/62, this is not actually an issue in plain text clients, only when viewing the raw source of a message (which is not an intended use case)

For example Mutt, will render emoji's correctly with the default encoding that Laravel (Swift mailer) uses. (the second emoji is missing in the font I'm using)

Screen Shot 2020-04-23 at 10 49 27