Code Monkey home page Code Monkey logo

Comments (15)

iRyusa avatar iRyusa commented on August 20, 2024

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>

from mjml.

jsit avatar jsit commented on August 20, 2024

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>

from mjml.

iRyusa avatar iRyusa commented on August 20, 2024

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 ?

from mjml.

jsit avatar jsit commented on August 20, 2024

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.

from mjml.

iRyusa avatar iRyusa commented on August 20, 2024

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

from mjml.

WeshGuillaume avatar WeshGuillaume commented on August 20, 2024

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

from mjml.

arnaudbreton avatar arnaudbreton commented on August 20, 2024

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

from mjml.

jsit avatar jsit commented on August 20, 2024

Looks good to me. Thanks!

On Fri, Feb 12, 2016 at 6:56 AM, Arnaud BRETON [email protected]
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
#37 (comment).

from mjml.

roibeart avatar roibeart commented on August 20, 2024

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?

from mjml.

dalefish avatar dalefish commented on August 20, 2024

from mjml.

roibeart avatar roibeart commented on August 20, 2024

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?

from mjml.

Loac-fr avatar Loac-fr commented on August 20, 2024

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 !

from mjml.

iRyusa avatar iRyusa commented on August 20, 2024

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.

from mjml.

avatar commented on August 20, 2024

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.

from mjml.

ngarnier avatar ngarnier commented on August 20, 2024

@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.

from mjml.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.