Comments (15)
Hello there,
I can't reproduce here, can you provide your mjml please ?
mjml:
<mj-body>
<mj-section>
<mj-column>
<mj-text>Hello !</mj-text>
<mj-raw>Hello !</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 !</div></td></tr>Hello !</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.
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
is removed:
<mj-text>Hello<mj-raw> </mj-raw>world!</mj-text>
from mjml.
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.
Full mjml document is identical to your example above:
<mj-body>
<mj-section>
<mj-column>
<mj-text>Hello !</mj-text>
<mj-raw>Hello !</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.
Ok the issue is related to the client i'm able to reproduce thanks for details !
from mjml.
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.
@jsit closing the issue for now, please confirm it works for you, or re-open if still experiencing the issue. Thanks!
from mjml.
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.
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?
from mjml.
from mjml.
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.
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
entity.
The &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.
Well, this is an issue with the way we encode/decode attributes. It should be fixed in MJML4. In MJML3 the was the only way to prevent this, really weird it doesn't do the trick for you.
from mjml.
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.
@xiddevelop Hm nope. You can see on this link that the space is preserved (even without
): https://mjml.io/try-it-live/ByBQAM7TQ.
Your issue is probably coming from elsewhere.
from mjml.
Related Issues (20)
- Extra quotes in CSS url() from <mj-section /> background-url HOT 9
- <!--[if !mso]><!--> mso conditional statement not being exported correctly HOT 2
- mj-columns in gmail looking as mobile view not flexed HOT 1
- mj-include tag throwing errors on style import and imports in the head tag HOT 5
- Can't get keepComments flag to work HOT 4
- Image width in outlook is overflowing HOT 2
- Issues with rendering in outlook HOT 1
- DeprecationWarning: The `punycode` module is deprecated on node 21 HOT 4
- "try it live"-Function now not working any more HOT 1
- New Twitter X logo not being rendered with <mj-social-element name="x" href="#"> HOT 1
- Just the basics HOT 3
- Navbar without hamburger unnecessary css HOT 1
- `mj-font` only emits the last style sheet for the font family HOT 1
- Font sizes increase in Gmail on iPhone XS HOT 6
- Append invisible characters to <mj-preview> HOT 1
- CORS request did not succeed, missing CORS header (mjml/api) HOT 2
- `mjml2html` render in web worker throws `Uncaught ReferenceError: window is not defined` HOT 2
- Support DATA variable in href or button HOT 1
- Icon with text/Column within Column HOT 1
- Dependency: html-minifier REDoS vulnerability HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mjml.