StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I have a partial solution, one that still needs work. I kept thinking about this problems during a meeting today, and tried to hack it together afterward. But I don't have time to work through the remaining issues. There is an <strong><a href="http://jsfiddle.net/CrossEye/re827/" rel="nofollow">example on JSFiddle</a></strong>. Click the "Test" button to see how it splits up the sample text. You can choose different text blocks (excerpts from speeches by famous American leaders) or enter your own. You can also choose how many lines of text you want to divide on, but if you choose anything greater than two, you will need to increase the height of the #callout div, which is the first selector in the CSS secion.</p> <p>The basic idea is to use the DOM node you want to fill out and the the text you want to fill it with to calculate how much will fit, then split the string based on that. My implementation, though, required another piece of information, which was the number of lines of text to include. I believe that we should be able to derive that, but couldn't get it quickly enough.</p> <p>The important code looks like this:</p> <pre><code>var split = function($div, lines, text) { var origHeight = $div.height(); $div.css("height", "auto"); $div.html(new Array(lines + 1).join("<br/>")); // would like to remove var height = $div.height(); // and calculate this more directly var point = 1, newHeight; do { $div.text(text.substring(0, point)); newHeight = $div.height(); } while (newHeight <= height && point++ < text.length); $div.height(origHeight); point--; return [text.substring(0, point), text.substring(point)] } </code></pre> <p>This solution uses jQuery, but you can think of it as scaffolding if that offends your sensibilities. We can remove it easily enough later, but it made a proof of concept easier to create.</p> <p>This does not deal with the fact that things are split mid-word. That should be an easy problem to fix. I thought that the height problem is more interesting so far. If that can be solved, the word one should be pretty simple.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload