Search code examples
htmlcssjustifygoogle-closure-templatessoy-templates

Strange behaviour involving Closure commands and "text-align:justify"

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):

enter image description here

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:

enter image description here

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:

enter image description here

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?

Solution

  • 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>