I'd like to equally distribute Divs, but I'm running into trouble.

jaderade

I have a pretty tried and true method of distributing Divs, that can be described here and has a jsFiddle here. However, the html is very picky about its spacing.

I've been trying several different things, and I've ended up here:

So knowing that this way of distributing divs is really picky about whitespace, I brought it into browser, to inspect, and people who know more about the way passages are output probably already see the problem:

Just to make sure that this could actually work, I went ahead and edited in browser, and yeah it functions fine, as seen below.


So my question is this: Is there anyway that I can get the html to output properly and still be rendered in the passage? If not, is there another method of distributing divs that could yield basically the same results, assuming that there are more than two .paper divs? I have very little knowledge of Javascript, but I'm willing to start learning if it means I can craft a workaround.

Note: I've already tried editing the tw-passagedata in the HTML file itself, but that just causes the container div, and all of it's children to be excluded from the passage entirely.

EDIT: I actually just solved this on my own, though it's not exactly the prettiest way of doing things. For anyone who wants to know how you can equally space divs in a container, here's what I did to make it work (using the CSS listed in the JS Fiddle above).



I was looking through the forums and stumbled over something unrelated about the print command, and I got the vague impression that if anything Really Simple would work, it would be that. I tried a few different escape characters before I got to the \r carriage return one, and that's the one that worked for me. \n was really wonky though.

Even though this has been solved, if there are any other solutions, like through Javascript that can target elements or something, I'd definitely like to hear them out though.

TheMadExile

@jaderade Your problem is that you're placing line breaks within your markup. Most story formats automatically translate line breaks into <br> elements.

The correct solution here is simply not to generate line breaks, though you still need some kind of whitespace between the intervening elements for the technique to function, as it relies upon justification. To do this, while not also affecting line breaks within the box <div> elements, use the line continuation markup.

For example (the spacing within is deliberate):

<div id="container">\
  <div class="box1"></div>  \
  <div class="box2"></div>  \
  <div class="box3"></div>  \
  <div class="box4"></div>\
</div>

That said, the ideal way to achieve what you're after would probably be to use flexbox instead of justification—though, support for older browsers is slightly more limited.

jaderade

Hey, I already replied with thanks on twitter, but I felt I should do so formally now that I'm getting around to actually putting the flexbox stuff in practice. The CSS seems very verbose compared to my setup before, but it spaces things out a little more cleanly, and that's a welcome improvement.

I'm running into a new problem now, which is that the Twine IDE doesn't like to display my 'box' divs as children to their parent div, when they're put in through the <<for>> loop, but it displays just fine in chrome, so I think it might just be Twine being picky.

Thanks for your help