Do I have to use   for space in Jade?

Question

I am using Jade and everything is cool except that Jade "eats" my spaces.

For example, in HTML:

<b>Hello</b> <b>World</b> 

or

<b>Hello</b> <b>World</b> 

Will have a space between "Hello" and "World".

But when converting to Jade it'd be

b Hello b World 

When rendered as HTML, the space is gone. Like:

<b>Hello</b><b>World</b> 

Do I have to add   in my Jade template or is there any way I can get a normal space in the generated HTML?

Answer 1

Of course, when you have two of the same tags after each other, you can simply merge them:

b Hello World 

But, if you would have two different sibling tags and would want a space between them, you could use piping to output a space between them.

For example:

b Hello |     <-- 2 spaces after the pipe i World 

Note that when specifying tag contents / piping text, the actual text content is preceded by a white space. This white space is not outputted. So, in effect, to pipe a white-space you need a | character followed by two spaces.

If you are in an environment where trailing spaces are not preserved, you can alternatively use the following:

b Hello =" " i World 

= evaluates a JavaScript expression and outputs the result.

Also note that   is not the same as a space in HTML. The correct HTML entity to use is   (or   if you like hexadecimal numbers).

  stands for non-breaking space. Its character code is 160 ( ). The difference is that where an ordinary space is used, multiple spaces will be shown as a single space and if a line overflows, the text will continue on the next line.* Non-breaking spaces on the other hand will allways be shown. Lines will never wrap where a non-breaking space is used.

This is best illustrated with an example:

 

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    (Note the scroll bar at the bottom.)

Space ( )

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    (Note there is no scroll bar because all spaces are concatenated into one.)

_{* This can be overridden with the CSS white-space property. Some elements, such as <pre>, display all white space and line endings by default.}

Answer 2

This should do it:

b Hello   | World 

Unfortunately it produces this HTML output in Chrome on my machine:

<b>               Hello               World</b> 

But in the end it becomes:

To come to an end

b Hello   b World 

...will do it too.