Extra whitespace in HTML values rendered with Jade

Question

Every time I write my HTML in Jade, I am getting extra whitespace added after each element's value.

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

label(for="keyword") Keyword

And when it's rendered, the source will look like this:

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

Ran into some problems with that extra whitespace messing w/ my CSS. Plus, it just doesn't look as tidy :)

Anyone know how I can prevent it from being inserted?

Answer 1

Check the update at the bottom

I assume you're using express - check your app settings.

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

If you have jade rendering in pretty mode (pretty: true) then it will arrange your generated source (tags) with nested indention. Turning pretty printing off should resolve your problem (though make sure you don't have trailing space, as pointed out by @alessioalex).

If you have a reason requiring you to output pretty formatting (client spec, in my case) then you can try some other things. I had a similar issue with occurring with the textarea tag; frustrating because the whitespace is actually injected into the content of the form. The way I got around this was to embed a the literal html with the closing tag:

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

The docs can give you some more details (search for html in this case). There is open issue #341 on github which suggests an approach like this one for scalate, but it doesn't currently work in jade (as of version 0.19.0) .

HTH

Update

Ok - subtle and cool... there is a better way to keep the sexy output from pretty: true and avoid spacing inside of a tag (my textarea example)... I just tried appending a . to the end of the tag (see code) and it Just Worked™ :-)

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

Renders:

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

Beauty!

Why does this work? Because jade treats the . suffix on the tag as an indicator that the tag will contain a text block (only), and then no text block is provided, so it defaults to '', an empty string.