Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Bug: Compiler creates duplicate <head> element #22

Closed
arcadegio opened this issue Oct 31, 2017 · 6 comments
Closed

Bug: Compiler creates duplicate <head> element #22

arcadegio opened this issue Oct 31, 2017 · 6 comments

Comments

@arcadegio
Copy link

https://heml.io/editor/

On the editor page, demo HEML content:

<heml>
  <head>
    <subject>Welcome to HEML!</subject>
    <style>
      body { background: SkyBlue; }
      h1 { color: DarkViolet; }
    </style>
  </head>
  <body>
    <container>
      <marquee><h1>Explore the world of email! 💌</h1></marquee>
    </container>
  </body>
</heml>

Produces an additional opening <head> and closing </head> elements:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" />
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
  <head> </head>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="x-apple-disable-message-reformatting" />
    <!--[if !mso]><!-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!--<![endif]-->
    <style type="text/css">
      * {
        text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
        -moz-text-size-adjust: 100%;
        -webkit-text-size-adjust: 100%;
      }

      html {
        height: 100%;
        width: 100%;
      }

      body {
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        mso-line-height-rule: exactly;
      }

      div[style*="margin: 16px 0"] {
        margin: 0 !important;
      }

      table,
      td {
        mso-table-lspace: 0pt;
        mso-table-rspace: 0pt;
      }

      img {
        border: 0;
        height: auto;
        line-height: 100%;
        outline: none;
        text-decoration: none;
        -ms-interpolation-mode: bicubic;
      }

      .ReadMsgBody,
      .ExternalClass {
        width: 100%;
      }

      .ExternalClass,
      .ExternalClass p,
      .ExternalClass span,
      .ExternalClass td,
      .ExternalClass div {
        line-height: 100%;
      }
    </style>
    <!--[if gte mso 9]>
      <style type="text/css">
      li { text-indent: -1em; }
      table td { border-collapse: collapse; }
      </style>
      <![endif]-->
    <title>Welcome to HEML!</title>
    <!-- content -->
    <!--[if gte mso 9]><xml>
       <o:OfficeDocumentSettings>
        <o:AllowPNG/>
        <o:PixelsPerInch>96</o:PixelsPerInch>
       </o:OfficeDocumentSettings>
      </xml><![endif]-->
  </head>
  <body class="body" style="background-color: #87CEEB; margin: 0; width: 100%;">
    <table class="bodyTable" role="presentation" width="100%" align="left" border="0" cellpadding="0" cellspacing="0" style="width: 100%; background-color: #87CEEB; margin: 0;" bgcolor="#87CEEB">
      <tr>
        <td class="body__content" align="left" width="100%" valign="top" style="color: #000000; font-family: Helvetica,Arial,sans-serif; font-size: 16px; line-height: 20px;">
          <div class="container" style="margin: 0 auto; max-width: 600px; width: 100%;"> <!--[if mso | IE]>
            <table class="container__table__ie" role="presentation" border="0" cellpadding="0" cellspacing="0" style="margin-right: auto; margin-left: auto;width: 600px" width="600" align="center">
              <tr>
                <td> <![endif]-->
                  <table class="container__table" role="presentation" border="0" align="center" cellpadding="0" cellspacing="0" width="100%">
                    <tr class="container__row">
                      <td class="container__cell" width="100%" align="left" valign="top">
                        <marquee>
                          <h1 class="header h1" style="margin: 20px 0; line-height: 40px; font-family: Helvetica,Arial,sans-serif; color: #9400D3;">Explore the world of email! 💌</h1>
                        </marquee>
                      </td>
                    </tr>
                  </table> <!--[if mso | IE]> </td>
              </tr>
            </table> <![endif]--> </div>
        </td>
      </tr>
    </table>
    <div style="display:none; white-space:nowrap; font-size:15px; line-height:0;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>
  </body>
</html>

This causes improper syntax which email clients will not render the second element with content in it.
@cossssmin
Copy link

cossssmin commented Oct 31, 2017 •
edited

This is in fact a feature, not a bug :)

It's meant to trick the Yahoo! app, as this client will strip out the first <head> tag it finds, thus removing the CSS and completely breaking the layout. Feeding it an empty one first will trick it into removing that, while keeping the actual <head> that the framework uses.

I've tested this myself and it doesn't cause any problems in any of the major email clients. Have you tested and found one that is affected by this hack?

@avigoldman
Copy link
Contributor

avigoldman commented Oct 31, 2017 •
edited

I was about to respond with that! Thanks, @hellocosmin!
This is documented really well by mosaico

@arcadegio
Copy link
Author

arcadegio commented Oct 31, 2017 •
edited

Awesome. Thanks for the clarification.

Ran this through Litmus and everything came up blank until I stripped out the blank <head></head>

https://litmus.com/builder/c540f0b

Probably a bug on their end :)

@cossssmin
Copy link

cossssmin commented Oct 31, 2017 •
edited

Yup, Litmus Builder bug, works fine in Email on Acid's editor, as well as in the browser and major email clients that I've tested :)

@arcadegio
Copy link
Author

Perfect. Thanks!

@avigoldman avigoldman mentioned this issue Nov 28, 2017
Closed
@gutosanches gutosanches mentioned this issue Mar 8, 2018
Open
@herrschuessler
Copy link

The double <head> breaks Cleverreachs drag'n'drop email editor.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@cossssmin @herrschuessler @avigoldman @arcadegio