Emails not rendered properly in Outlook (classic)

smainz commented

2025-02-20 14:32:02 +01:00

Contributor

Since the migration from go to php emails do not render properly in outlook classic

With version 1.0.1-wp:

With version 3.1.0:

(hidden white on white before 'Pipeline #258' is the Text 'Success', which is the level for this mail)

The templates are almost equal, but the go version used an inliner to inline all styles which the PHP version does not do:

https://gitnet.fr/deblan/woodpecker-email/src/tag/1.0.1-wp/plugin.go#L226-L230

Source code of the Mail from 1.0.0-wp:

</style></head>
  <body style="-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; background-color: #f6f6f6; box-sizing: border-box; font-family: &quot;Helvetica Neue&quot;, &quot;Helvetica&quot;, Helvetica, Arial, sans-serif; font-size: 14px; height: 100%; line-height: 1.6; margin: 0; padding: 0; width: 100%;" bgcolor="#f6f6f6">
    <table class="body-wrap" style="background-color: #f6f6f6; box-sizing: border-box; font-family: &quot;Helvetica Neue&quot;, &quot;Helvetica&quot;, Helvetica, Arial, sans-serif; font-size: 14px; margin: 0; padding: 0; width: 100%;" bgcolor="#f6f6f6">
      <tbody style="box-sizing: border-box; font-family: &quot;Helvetica Neue&quot;, &quot;Helvetica&quot;, Helvetica, Arial, sans-serif; font-size: 14px; margin: 0; padding: 0;"><tr style="box-sizing: border-box; font-family: &quot;Helvetica Neue&quot;, &quot;Helvetica&quot;, Helvetica, Arial, sans-serif; font-size: 14px; margin: 0; padding: 0;">
        <td style="box-sizing: border-box; font-family: &quot;Helvetica Neue&quot;, &quot;Helvetica&quot;, Helvetica, Arial, sans-serif; font-size: 14px; margin: 0; padding: 0; vertical-align: top;" valign="top"></td>
        <td class="container" width="600" style="box-sizing: border-box; clear: both; display: block; font-family: &quot;Helvetica Neue&quot;, &quot;Helvetica&quot;, Helvetica, Arial, sans-serif; font-size: 14px; margin: 0 auto; max-width: 600px; padding: 0; vertical-align: top;" valign="top">
          <div class="content" style="box-sizing: border-box; display: block; font-family: &quot;Helvetica Neue&quot;, &quot;Helvetica&quot;, Helvetica, Arial, sans-serif; font-size: 14px; margin: 0 auto; max-width: 600px; padding: 20px;">

Since the migration from go to php emails do not render properly in outlook classic With version 1.0.1-wp: ![image](/attachments/ab43d4ab-103b-4cf7-9170-b523159ed5f3) With version 3.1.0: ![image](/attachments/033c6eb7-09e5-4b3b-b6e4-10a21e14fdc7) (hidden white on white before 'Pipeline #258' is the Text 'Success', which is the `level` for this mail) The templates are almost equal, but the go version used an inliner to inline all styles which the PHP version does not do: https://gitnet.fr/deblan/woodpecker-email/src/tag/1.0.1-wp/plugin.go#L226-L230 Source code of the Mail from 1.0.0-wp: ```html </style></head> <body style="-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; background-color: #f6f6f6; box-sizing: border-box; font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; font-size: 14px; height: 100%; line-height: 1.6; margin: 0; padding: 0; width: 100%;" bgcolor="#f6f6f6"> <table class="body-wrap" style="background-color: #f6f6f6; box-sizing: border-box; font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; font-size: 14px; margin: 0; padding: 0; width: 100%;" bgcolor="#f6f6f6"> <tbody style="box-sizing: border-box; font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; font-size: 14px; margin: 0; padding: 0;"><tr style="box-sizing: border-box; font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; font-size: 14px; margin: 0; padding: 0;"> <td style="box-sizing: border-box; font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; font-size: 14px; margin: 0; padding: 0; vertical-align: top;" valign="top"></td> <td class="container" width="600" style="box-sizing: border-box; clear: both; display: block; font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; font-size: 14px; margin: 0 auto; max-width: 600px; padding: 0; vertical-align: top;" valign="top"> <div class="content" style="box-sizing: border-box; display: block; font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; font-size: 14px; margin: 0 auto; max-width: 600px; padding: 20px;"> ```

image.png

9.9 KiB

image.png

12 KiB

smainz commented

2025-02-28 10:13:13 +01:00

Author

Contributor

@deblan can you please give a comment, if you consider this an issue and it should be fixed?

deblan commented

2025-03-01 10:54:37 +01:00

Owner

Hello!

I will try to inline the mail. But I don't use Outlook so testing will be complicated.

Hello! I will try to inline the mail. But I don't use Outlook so testing will be complicated.

smainz commented

2025-03-01 11:54:28 +01:00

Author

Contributor

If you want me to help, I can at least do some testing.
Give me a ping, once you have some code ready.I can build it myself.

If you want me to help, I can at least do some testing. Give me a ping, once you have some code ready.I can build it myself.

deblan commented

2025-03-01 12:15:02 +01:00

Owner

Could you try this image: gitnet.fr/deblan/woodpecker-email:issue13 and add this setting: inline: true please?

Could you try this image: `gitnet.fr/deblan/woodpecker-email:issue13` and add this setting: `inline: true` please?

smainz commented

2025-03-01 14:01:55 +01:00

Author

Contributor

The inliner works, but I had to change the path to the inliner executable

As you changed from go to php, why not use the CSS inliner built into the symfony mailer: https://symfony.com/doc/current/mailer.html#inlining-css-styles

Would you accept a PR?

The inliner works, but I had to change the path to the `inliner` executable As you changed from go to php, why not use the CSS inliner built into the symfony mailer: <https://symfony.com/doc/current/mailer.html#inlining-css-styles> Would you accept a PR?