Is there any way to vertically justify text in HTML?

Question

I am currently displaying text in an HTML table that is simply one large row and two columns. I am using the table to take advantage of the side by side aspect (I could switch to floating divs if someone can tell me an advantage to doing so). I fill the text in the left side, and then I fill the right side. It is VERY critical that both sides look even as far as text distribution from top to bottom.

The content for each side is fixed (from the db), and the right side comes up short most of the time. Similar to how text justification spaces out words to fit a line, is there any way I can vertically justify the lines in the right column to make sure that there is text from top top bottom?

I have been searching like crazy and haven't had any luck.

Here is a screenshot of what it looks like. I am attempting to replicate a religious text exactly (hence the column data being fixed, that is actually how it is in the actually book), but I am just having a hard time fine tuning it. The strange thing is that sometimes there isn't a problem, but then other times it is quite bad:

Answer 1

Assuming UIWebView supports it (Mobile Safari has since iOS 3.2), you could use the -webkit-column CSS properties.

These flow the content of an HTML element into as many columns as you specify, and put as even an amount of text as possible into each column. They also allow you to specify rules (like borders) and gaps between the columns, which would suit your design.

This would mean you wouldn’t have to split the content yourself any more.

• http://jsfiddle.net/bexD4/2/

HTML

<div class="text"><p>I am currently displaying text in an HTML table that is simply one large row and two columns...</div>

<div class="references">If "Side by Side" is your main criterion for choosing a table with just two columns...</div>

CSS

.text {
    -webkit-column-count: 2;
    -webkit-column-gap: 20px;
    -webkit-column-rule: solid 1px #999;
}

.references {
    padding: 10px;
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    -webkit-column-rule: solid 1px #999;
    border-top: solid 1px #999;
}