React: White-space between inline elements

[bstst]

Shouldn't there be a white-space between inline DOM elements separated by a line break [1]?

I think this example describes the situation pretty well: http://jsfiddle.net/bstst/kb3gN/2847/

Right now the workarounds are pretty ugly -- either CSS (don't get me started!) or manual white-space inside the inline elements (as in <span>foobar </span>), both of which are quite non-semantic.

Hope it's not a duplicate of an earlier issue -- I did my research!
Cheers!
M.

[1] http://www.w3.org/TR/html401/appendix/notes.html#notes-line-breaks

[sophiebits]

This is an intentional deviation from HTML because usually you don't want extra whitespace between tags. See here for a summary of the current rules:

http://facebook.github.io/react/blog/2014/02/20/react-v0.9.html#jsx-whitespace

[syranide]

@bstst You can use {' '} to insert intentional whitespace (or tabs, newlines, etc).

(PS. Yes I know it's in the link, but in-case someone stumbles across this issue)

[bstst]

Yeah, @syranide, I've already noticed this.

The thing is, I'm using CoffeeScript, thus I'm not using JSX, thus it both feels and looks wrong in the code. And it inserts a redundant react <span> in to the DOM.

I still am not convinced this is the right behavior too. In my opinion, every inline opening tag should be written to the DOM on the newline.

For example, how would you write the following HTML markup without JSX?:

<div>
<span class="name">name</span>
<span class="alias">alias</span>
<span class="city">city</span>
</div>

It renders to name alias city.

Here's how, in the current situation (CoffeeScript):

React.DOM.div {}, [
  React.DOM.span {className: 'name'}, 'name'
  ' '
  React.DOM.span {className: 'alias'}, 'alias'
  ' '
  React.DOM.span {className: 'span'}, 'city'
]

If you don't add these white-spaces, the output will be without white-spaces:

<div><span class="name">name</span><span class="alias">alias</span><span class="city">city</span></div>

Which renders to namealiascity

While the desired result has white-spaces due to the inline tags being separated by new-lines.

Admit it, it's ugly. And wrong. Whilst all it would take to fix is add a newline before (or after) each inline tag when writing to the DOM.

[syranide]

@bstst That makes no sense to me. You're relying on implicitly added newlines to create whitespace for you. While not considering that there would be no solution for when I _don't_ want whitespace separating the two (which is pretty much always).

It seems to me that you're relying on an _implicit_ behavior to do something you _explicitly_ require. It doesn't matter if it's ugly, code beauty is never a goal, code being understandable and deterministic is IMHO.

[bstst]

@syranide, indeed, now that I think about it, I see there would be no solution when white-space is not wanted. I rest my case, sorry for the commotion ;)

[dhruvbalhara]

@spicyj @syranide - Any hints on how I can add spaces before each child divs(with class 'b'), given that I am generating the child elements through a loop whose length is not fixed. https://jsfiddle.net/rqrvywfz/2/

[syranide]

@dhruvbalhara Just push the string " " to the array you're generating where you want spaces to be? Or am I misunderstanding you?

[dhruvbalhara]

@syranide - Ah, right. Sorry. I completely missed that. My apologies for this dumb question.

[ivan-kleshnin]

HTML and CSS have a notion of inline and block elements. Whitespace between inline elements is significant and shouldn't really be altered in any way by any processor. The situtation is complicated by the fact you can change which elements are inline and which are block in CSS.

Still the most correct way would be to refer to the list of default inline and block elements as those are rarely swapped in practice. And never strip whitespace between inline and text elements by default.

[jordanbtucker]

Here's a way to add the space with CSS:

.alias::before,
.city::before {
  content: ' ';
}

[ivan-kleshnin]

@jordanbtucker if you are at CSS level you should just use horizontal margins. Before and After bear a lot of problems and should be reserved for emergency cases.

Update: people downvoting this comment apparently have no experience with Markup. Ok, lol.

[AGMETEOR]

You can use this tiny package;
https://www.npmjs.com/package/react-add-space