Browsers ignore justification for runtime generated content

Question

A common trick to evenly distribute blocks of content within a container is to give them a display:inline-block CSS property, and then apply text-align:justify to the parent container, so:

<section>
  <div></div><!-- repeat X times -->
</section>

And CSS:

section {
    text-align:justify;
}
div {
    width:200px;
    height:50px;
    display:inline-block;
}

This works fine in all browsers, including IE8+, as shown in this sample Fiddle. The last line reverts to left alignment since I didn't set text-align-last, which is fine, and unsupported by Webkit stable anyway.

However, if you now start generating additional div elements with Javascript, the layout engines somehow seem to completely forget about justification.

Refer to this second Fiddle which includes a periodical function adding a div every second. I have tested this in Chrome beta, Firefox latest, IE10 and IE11 - and all of them first screw up the last line completely, semi-justifying the generated content based on the previously available space, and then just left-aligning all following elements.

I have tried everything in Firebug and IE/Chrome dev tools, changing and resetting properties, but can't trigger a 'rejustification' in any way - they accept text-align:right, but if you then reset it to text-align:justify it just jumps back to left alignment again. Playing with white-space, letter-spacing and word-spacing just have no visible effect.

The relevant section in the W3 CSS standards provides no justification (pun intended) for this behaviour either as far as I can see.

Is there any fix or workaround for this issue?

Answer 1

In essence, it needs a space between each div as is the case for the ones in the HTML.

So do something like (I'm not familiar with mootools so there may be a simpler way)

(function(){
    $('root').grab(new Element('div'));
    $('root').grab(new Element('span', {
        'text': ' '
    }));
}).periodical(1000);

See http://jsfiddle.net/AdLuT/1/ (Perfect in FF and IE, slightly out in Chrome, which suggests a different problem there.)