search

mjmlio / mjml

MJML: the only framework that makes responsive-email easy
https://mjml.io
MIT License
17.08k stars 960 forks source link

  is replaced with space #37

Closed jsit closed 8 years ago

jsit commented 8 years ago

  entities seem to get stripped and replaced with a space when rendering html.

If I wrap it in <mj-raw>, the space disappears entirely.

iRyusa commented 8 years ago

Hello there,

I can't reproduce here, can you provide your mjml please ?

mjml:

<mj-body>
    <mj-section>
      <mj-column>
        <mj-text>Hello &nbsp; !</mj-text>
        <mj-raw>Hello &nbsp; !</mj-raw>
      </mj-column>
    </mj-section>
  </mj-body>

output:

➜  mjml git:(master) ✗ ./node_modules/.bin/babel-node ./test.js
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title></title>
  <style type="text/css">

  #outlook a { padding: 0; }
  .ReadMsgBody { width: 100%; }
  .ExternalClass { width: 100%; }
  .ExternalClass * { line-height:100%; }
    body { margin: 0; padding: 0; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
    table, td { border-collapse:collapse; 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; }
  p {
    display: block;
    margin: 13px 0;
  }

  </style>
  <!--[if !mso]><!-->
  <style type="text/css">
    @import url(https://fonts.googleapis.com/css?family=Ubuntu:400,500,700,300);
  </style>
  <style type="text/css">
    @media only screen and (max-width:480px) {
      @-ms-viewport { width:320px; }
      @viewport { width:320px; }
    }
  </style>
  <link href="https://fonts.googleapis.com/css?family=Ubuntu:400,500,700,300" rel="stylesheet" type="text/css">
  <!--<![endif]-->
<style type="text/css">
    @media only screen and (min-width:480px) {
    .mj-column-per-100, * [aria-labelledby="mj-column-per-100"] { width:100%!important; }
}</style></head>
<body id="YIELD_MJML" style=""><div class="mj-body"><!--[if mso]>
        <table border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="width:600px;"><tr><td>
        <![endif]--><div style="margin:0 auto;max-width:600px;"><table class="" cellpadding="0" cellspacing="0" style="width:100%;font-size:0px;" align="center"><tbody><tr><td style="text-align:center;vertical-align:top;font-size:0;padding-top:20px;padding-bottom:20px;"><!--[if mso]>
      <table border="0" cellpadding="0" cellspacing="0"><tr><td style="width:600px;">
      <![endif]--><div style="vertical-align:top;display:inline-block;font-size:13px;text-align:left;" class="mj-column-per-100" aria-labelledby="mj-column-per-100"><table width="100%"><tbody><tr><td style="font-size:0;padding-top:10px;padding-bottom:10px;padding-right:25px;padding-left:25px;" align="left"><div class="mj-content" style="cursor:auto;color:#000000;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:22px;">Hello &nbsp; !</div></td></tr>Hello &nbsp; !</tbody></table></div><!--[if mso]>
      </td></tr></table>
      <![endif]--></td></tr></tbody></table></div><!--[if mso]>
        </td></tr></table>
        <![endif]--></div></body>
</html>
jsit commented 8 years ago

That very example gives me Hello !. I'm on mjml 1.0.3, installed via npm on a Mac.

If I add this line, the &nbsp; is removed:

<mj-text>Hello<mj-raw>&nbsp;</mj-raw>world!</mj-text>

iRyusa commented 8 years ago

In your example you're nesting a mj-raw inside a mj-text that's forbidden you can nest any standard html tag in mj-text but no mjml component.

Can you provide me your full mjml document, and if you use with the cli or in a js file ?

jsit commented 8 years ago

Full mjml document is identical to your example above:

<mj-body>
  <mj-section>
    <mj-column>
      <mj-text>Hello &nbsp; !</mj-text>
      <mj-raw>Hello &nbsp; !</mj-raw>
    </mj-column>
  </mj-section>
</mj-body>

Output:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>
      undefined
    </title>
    <style type="text/css">
/*<![CDATA[*/

    #outlook a { padding: 0; }
    .ReadMsgBody { width: 100%; }
    .ExternalClass { width: 100%; }
    .ExternalClass * { line-height:100%; }
        body { margin: 0; padding: 0; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
        table, td { border-collapse:collapse; 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; }
    p {
    display: block;
    margin: 13px 0;
    }

    /*]]>*/
    </style><!--[if !mso]><!-->

    <style type="text/css">
/*<![CDATA[*/
    @import url(https://fonts.googleapis.com/css?family=Ubuntu:400,500,700,300);
    /*]]>*/
    </style>
    <style type="text/css">
/*<![CDATA[*/
    @media only screen and (max-width:480px) {
      @-ms-viewport { width:320px; }
      @viewport { width:320px; }
    }
    /*]]>*/
    </style>
    <link href="https://fonts.googleapis.com/css?family=Ubuntu:400,500,700,300" rel="stylesheet" type="text/css" /><!--<![endif]-->

    <style type="text/css">
/*<![CDATA[*/
    @media only screen and (min-width:480px) {
    .mj-column-per-100, * [aria-labelledby="mj-column-per-100"] { width:100%!important; }
    }
    /*]]>*/
    </style>
  </head>
  <body id="YIELD_MJML" style="">
    <div class="mj-body">
      <!--[if mso]>
                <table border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="width:600px;"><tr><td>
                <![endif]-->
      <div style="margin:0 auto;max-width:600px;">
        <table class="" cellpadding="0" cellspacing="0" style="width:100%;font-size:0px;" align="center">
          <tbody>
            <tr>
              <td style="text-align:center;vertical-align:top;font-size:0;padding-top:20px;padding-bottom:20px;">
                <!--[if mso]>
      <table border="0" cellpadding="0" cellspacing="0"><tr><td style="width:600px;">
      <![endif]-->
                <div style="vertical-align:top;display:inline-block;font-size:13px;text-align:left;" class="mj-column-per-100" aria-labelledby="mj-column-per-100">
                  Hello   !
                  <table width="100%">
                    <tbody>
                      <tr>
                        <td style="font-size:0;padding-top:10px;padding-bottom:10px;padding-right:25px;padding-left:25px;" align="left">
                          <div class="mj-content" style="cursor:auto;color:#000000;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:22px;">
                            Hello   !
                          </div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div><!--[if mso]>
      </td></tr></table>
      <![endif]-->
              </td>
            </tr>
          </tbody>
        </table>
      </div><!--[if mso]>
                </td></tr></table>
                <![endif]-->
    </div>
  </body>
</html>

I'm using the cli, both -w and -r produce this output.

iRyusa commented 8 years ago

Ok the issue is related to the client i'm able to reproduce thanks for details !

WeshGuillaume commented 8 years ago

Hey @jsit !

This should be solved by the last release! :)

Can you make sure it works on your side, and if so, close the issue ?

Regards, Guillaume

arnaudbreton commented 8 years ago

@jsit closing the issue for now, please confirm it works for you, or re-open if still experiencing the issue. Thanks!

jsit commented 8 years ago

Looks good to me. Thanks!

On Fri, Feb 12, 2016 at 6:56 AM, Arnaud BRETON notifications@github.com wrote:

@jsit https://github.com/jsit closing the issue for now, please confirm it works for you, or re-open if still experiencing the issue. Thanks!

— Reply to this email directly or view it on GitHub https://github.com/mjmlio/mjml/issues/37#issuecomment-183294597.

roibeart commented 7 years ago

Hello, I noticed that in the compiled html the &nbsp; characters are replaced with a character that in text editors are indistinguishable from normal spaces. It happened that a newsletter service substituted somehow the unbreakable space with a normal space and this issue was hard to notice. Is it possible to preserve the &nbsp; character in the compiled version?

dalefish commented 7 years ago

&nbsp; should do it.

On 14 June 2017 at 12:19, roibeart notifications@github.com wrote:

Hello, I noticed that in the compiled html the characters are replaced with a character that in text editors are indistinguishable from normal spaces. It happened that a newsletter service substituted somehow the unbreakable space with a normal space and this issue was hard to notice. Is it possible to preserve the character in the compiled version?

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/mjmlio/mjml/issues/37#issuecomment-308389191, or mute the thread https://github.com/notifications/unsubscribe-auth/AKxLODhLC24LxZqaMHz4j3YTeA-62xHPks5sD7PCgaJpZM4HWy-3 .

roibeart commented 7 years ago

Nice trick, thank you!

Now I wonder: implementing this also inside the components that make use of the unbreakable spaces (e.g. mj-divider) could be a good idea?

Loac-fr commented 6 years ago

Hey there, Stumbled upon this issue after noticing the same bug while using the API (mjml 3.3.3). I checked locally and experienced the same issue. While the character inserted is technically a non-breakable space, I think it still should output the &nbsp; entity. The &amp;nbsp; trick did not work for me... Note that this usually works fine but I'm working on a project where this was a real issue for us. Thanks for the possible advice/fix !

iRyusa commented 6 years ago

Well, this is an issue with the way we encode/decode attributes. It should be fixed in MJML4. In MJML3 the &nbsp; was the only way to prevent this, really weird it doesn't do the trick for you.

ghost commented 6 years ago

Hi, issue reproducible with

--config.minify

For example we have template like {{ }} and in case

Dear {{username}},

in final result it visible like Dear{{}}.   not help.

ngarnier commented 6 years ago

@xiddevelop Hm nope. You can see on this link that the space is preserved (even without &nbsp;): https://mjml.io/try-it-live/ByBQAM7TQ.

Your issue is probably coming from elsewhere.