Extra spaces in HTML values ​​rendered with Jade

Question

Every time I write my HTML in Jade, I get extra spaces added after each element value.

For example, I will have a line like this in my Jade template:

label(for="keyword") Keyword 

And when it is displayed, the source will look like this:

 <label for="keyword_1">Keyword </label> 

In some problems, there was a problem with adding extra w / my CSS space. Also, it just doesn't look so neat :)

Does anyone know how I can prevent it from being inserted?

Answer 1

Check the update below

I assume you are using express - check your application settings.

 app.set('view options', { pretty: false }) 

If you have jade rendering in pretty ( pretty: true ) mode, it arranges your generated source (tags) with nested indentation. When interrupting printing, you should solve your problem (although make sure you don't have a trailing space, as @alessioalex points out).

If you have a reason requiring you to output pretty formatting (client specification, in my case), you can try other things. I had a similar problem with the textarea tag; disappointment because the space is actually entered into the contents of the form. The way I got around was to insert a literal html with a closing tag:

 <textarea name="someField"></textarea> 

docs can provide you with more details (in this case, html search). There is open-ended question # 341 on github that offers an approach like this one for scalate , but it does not currently work in jade (since version 0.19.0 ).

NTN

Update

Good - subtle and cool ... there is a better way to keep the pretty: true way out of pretty: true and avoid the spacing inside the tag ( textarea example) ... I just tried to add . to the end of the tag (see code) and Just Worked ™ :-)

 form(name='frmname', method='POST') textarea(name='someField'). 

Renders:

 <form name="frmname" method="POST"> <textarea name="someField"></textarea> </form> 

Beauty!

Why does it work? Because jade handles the suffix . in the tag as an indicator that the tag will contain a text block (only), and then the text block is not provided, therefore the default is '' , an empty string.