涉及Closure命令和“ text-align：justify”的奇怪行为

Question

I have some divs within a Soy template that I want to be evenly spaced, horizontally.

Here is what does work:

CSS (nomenclature simplified for this example):

.list-of-things {
  position: relative;
  text-align: justify;
}

.list-of-things::after {
  display: inline-block;
  width: 100%;
  content: '';
}

.list-of-things div {
  display: inline-block;
  height: 25px;
  weight: 25px;
}

The ::after rule just adds a fake last line, since justify won't apply to the last line.

HTML (in the soy template):

<div class="list-of-things">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Ta-da! This is what it looks like (border solidity added, to make it clearer):

JSFiddle demonstrating this: http://jsfiddle.net/ULQwf/1257/

Here is the problem:

If I stick the divs inside any Closure commands (if, for, etc.), like this:

{if true}
  <div>a</div>
  <div>b</div>
  <div>c</div>
{/if}

a, b, c divs will all just fall to default inline-block behaviour, on the left. Looks like this:

Even weirder, if I lump everything together, like this:

<div class="list-of-things">
  {if true}
    <div>a</div>
    <div>b</div>
    <div>c</div>
  {/if}
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

a, b, c divs will continue to default to the left. In the remaining space in the inline row, 1, 2, 3 divs will be nicely justified:

If I reverse the order and put the regular divs first and then Closure divs second, then the result is very similar, but a, b, c will be lumped together on the right instead of the left.

---

Looking through Developer Tools on Chrome, each div -- a, b, c, 1, 2, 3 -- looks exactly the same. Same computed values.

Another point -- all other text-align values work. If I change justify to text-align:center, all six divs will sit nicely together in the center. Same for text-align:left/right/etc..

Is there something about how templates and justify are computed/compiled that I'm not understanding? Do closure commands produce some sort of secret hidden surrounding div?

Answer 1

Discoveries:

• text-align:justify is whitespace-senstive
• Soy templates don't necessarily care about whitespace when they compile

Basically, this doesn't work:

<div>
  {if true}
    <div>a</div>
    <div>b</div>
    <div>c</div>
  {/if}
</div>

But this does!

<div>
  {if true}
    <div>a</div>{sp}
    <div>b</div>{sp}
    <div>c</div>{sp}
  {/if}
</div>