SOLVED

Rich Text Tokens add a 'ZERO WIDTH SPACE' char between P tags

Go to solution
Highlighted
Level 8

Rich Text Tokens add a 'ZERO WIDTH SPACE' char between P tags

So figured this out by digging around quite a bit.

I'm using JS to select the appropriate token to display on a page. The potential tokens are all Rich Text, because I want HTML output.  The problem I'm getting is that Marketo forces a Zero Width Space character between </p> and <p> tags.  Look for yourself, it forces a line break. There's no way to disable this.  So when my Javascript tries to set a var as the token, it bombs out because of the zero width character.

If I take the HTML and plop it into a text token it keeps everything on one line and works fine, but my goal is to use Rich Text so that my marketers can easily create formatted content without needing HTML.

I don't know if this is a design flaw, a bug, or an unrequested feature. Whatever the case, it really makes no sense to force bad coding.  Anyone know of a workaround that would allow me to use the rich text token?

1 ACCEPTED SOLUTION

Accepted Solutions
Highlighted
Level 10 - Community Moderator

Re: Rich Text Tokens add a 'ZERO WIDTH SPACE' char between P tags

Don't use <script type=text/javascript> for a "data island" like this, because that's not what it is.  If it's actually HTML, use <script type=text/html>.  This is in line with W3C recommendations.  Then you won't get a script error.

View solution in original post

5 REPLIES 5
Highlighted
Level 10 - Community Moderator

Re: Rich Text Tokens add a 'ZERO WIDTH SPACE' char between P tags

I wouldn't expect to be able to consistently assign a Rich Text token directly to a JS variable, because when building HTML (especially by hand) you want whitespace to be insignificant, while newlines are significant in string literals.

I would output the tokens as hidden elements, then show the one you want.

Highlighted
Level 8

Re: Rich Text Tokens add a 'ZERO WIDTH SPACE' char between P tags

The problem is you can't script in-betweens.  So, it has to all be done like

IF (foo=bar) {

text = "{{my.stuff}}"

} else if {

(foo = notbar) {

text = {{my.otherstuff}}

}

You can't transform the token. It passes both {{my.stuff}} and {{my.otherstuff}} so that when the page renders the script renders with the information already populated in there.  Marketo doesn't escape the white space and there's no way to do it because when the page is called the data is already passed.  We can't call a token from a token so I can't even have another token that escapes the whitespace and other characters.

Highlighted
Level 10 - Community Moderator

Re: Rich Text Tokens add a 'ZERO WIDTH SPACE' char between P tags

As I said, output the token into an HTML element, not into JS.

Highlighted
Level 8

Re: Rich Text Tokens add a 'ZERO WIDTH SPACE' char between P tags

Sanford, thanks. That's what I ended up doing. 

Previously I was trying to write them to a JS var which was causing an error.  For example, if I tried this:

if (name == "autodemo") {

copy = "{{my.Autodemo-Body-Copy}}";

} else...

It'd error out.  Instead, I formed scripts in my header like this:

<script id="autodemo" type="text/javascript">{{my.AutoDemo-Body-Copy}}</script>

Then, in the same function where I was previously trying to store the token as a copy, I changed the code to this:

if (name == "autodemo") {
copy =  document.getElementById("autodemo").innerHTML;
} else

Now when the page runs it functions as expected.  I still get ann error, but this error is "Uncaught SyntaxError: Unexpected token <" and still displays the page properly.

Highlighted
Level 10 - Community Moderator

Re: Rich Text Tokens add a 'ZERO WIDTH SPACE' char between P tags

Don't use <script type=text/javascript> for a "data island" like this, because that's not what it is.  If it's actually HTML, use <script type=text/html>.  This is in line with W3C recommendations.  Then you won't get a script error.

View solution in original post