Does anyone know how to turn off the auto formatting in the Embedded CSS tab in the crAppStudio HTML Can't-vas? I'm trying to add an svg as a background-image and the following code is valid CSS:

  
.btn-right {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z'/><path fill='none' d='M0 0h24v24H0V0z'/></svg>");
}

This should return this image in my background:

But crAppStudio wants to reformat the CSS at the semicolon and it turns into this:

  
.btn-right {
 background-image: url("data:image/svg+xml;
 utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'><path d='M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z'/><path fill='none' d='M0 0h24v24H0V0z'/></svg>");
 }

Which, of course, breaks the CSS. *Sigh*

This message has been edited. Last edited by: Hallway,

IBI work-around #561,793

• Just use a good old fashioned text editor of choice to create the CSS file to CSS3 standards
  
• Place said file in the directory of choice
  
• Reference said file in HTML Can't-vas
  
• Completely forget about the 'Embedded CSS' tab because it is worthless.
  

This message has been edited. Last edited by: Hallway,

Just an extra piece of info.

In the embedded JS, if the characters

</

are found, is causes a cr to be embedded.

Looks like is may be related.

JS solution was to split the text out.
e.g. was

</

is now '<'+'/' etc

As this is CSS can't do that.

I would suggest creating an external CSS file, and link it into your page. The best part is that its reusable.

quote:

Originally posted by Waz:
Just an extra piece of info.

In the embedded JS, if the characters

</

are found, is causes a cr to be embedded.

Looks like is may be related.

JS solution was to split the text out.
e.g. was

</

is now '<'+'/' etc

As this is CSS can't do that.

I would suggest creating an external CSS file, and link it into your page. The best part is that its reusable.

Interesting. That explains some other issues that I was facing where it would put the closing svg tag on a new line. But only sometimes. This is the MOST AGGRAVATING tool IMHO. Why even put in a 'Embedded CSS' tab? It obviously doesn't work.

I agree with using an external CSS file. That works without a hitch.

Thanks Waz

I had created a case for this, but at the time I didn't know what the cause was.

Should reopen it or create a new one.

quote:

Originally posted by Waz:
Just an extra piece of info.

In the embedded JS, if the characters

</

are found, is causes a cr to be embedded.

Thanks to the ES2015 specification, I have found that using template literals corrects this issue as template literals allow for multi-line strings and can even contain placeholders and expressions. Template literals are enclosed by the back-tick (` `) (grave accent) character instead of double or single quotes.

Try these examples in the console of a *MODERN browser. ( *RIP Internet Explorer )

console.log(`
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
   <path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z" fill="white"/>
</svg>`);


var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);

More here: https://developer.mozilla.org/...ce/Template_literals

This message has been edited. Last edited by: Hallway,

Awesome.

Will check it out