Jade puzzle: Forcing whitespace to display to end user (ft. Angular)

Question

Jade is a phenomenally clean engine. Here's a puzzle I've been running into frequently.

My Problem is: Output with no whitespace!! All the elements just run right into each other.

I'm trying to achieve a few things at the same time:

• English content clean for later i8ln
• No inline etc. HTML
• Styles in classes
• Angular special modules inline

I'm going to paste multiple versions of the same block of Jade I have written- they all "work" for the end user, and I dislike all of these versions and am ashamed of them all equally.

Please tear them apart and tell me what I'm missing! Thanks very much.

Nick

Version 1

What I dislike the most about this is the gross misuse of the   tag. This tag might be appropriate between the number of votes and the word vote, however I would still prefer to use css white-space for that.

h2 {{voteTotalTrue}} 
  ng-pluralize(count="votesFor['Joe']", when="{'1':'Vote','other':'Votes'}")
  span  for 
  span.candidate Joe

Version 2

What I dislike the most about this is that it's brittle. It works because I've placed whitespace carefully where it will force Jade to preserve it, however it's a fairly standard risk that during i8ln some of these gaps will be overlooked.

h2
  span {{voteTotalTrue}}
  ng-pluralize(count="votesFor['Joe']", when="{'1':' Vote','other':' Votes'}")
  span  for
  span.candidate  Joe

Answer 1

To force Jade to respect your spaces, explicitly output a string with spaces:

span= ' for '

That is the easiest way.

dobesv has summarised various whitespace tricks and gotchas with Jade in this gist.