javascript - How to divide text in pages based on viewport size and font

This is a bit of a tricky one. Basically, I have a horizontal slider used to navigate through pages populated live via Ajax(pre-loaded with a throttler, silent pre-loading etc, so everything is fine on that end).

Works like Facebook Billboarding, if anyone remembers the FB hacker cup, yet slightly different. So I compute the size of the block based on the viewport and I get boxSizeX and boxSizeY.

Now the server feeds a text of X words. The rendering is using monospaced font with a 13px font size. And a line-height of 1 em, so again 13 px. Basically, I am now trying to divide the block of text into chunks that fit perfectly into boxSizeX and boxSizeY without breaking words in half, ending sentences before the last two words(more suggestions on what I should look out for are extremely welcome, as I don't want to miss out on anything).

The entire computation is done in JS, although the boxSize can be served to the server when the initial call for the text is made, so that intensive computation is done server side. How would you best do this? I have little to no clue on what to look out for, browser rendering issues, fonts etc. Thank you!

Answer

If I understand your question correctly, for a monospaced font, splitting the string into two equal halves and checking for broken words would be the first step—correct?

Here's a basic working check for splitting a string in half, adding split words to the first half, deleting them from the second half, removing any leading spaces from the second half of the split string, and returning the result in two strings:

let str = "Works like Facebook Billboarding, if anyone remembers the FB hacker cup, yet slightly different. So I compute the size of the block based on the viewport and I get boxSizeX and boxSizeY.";
let halfway = Math.round(str.length/2);
let first_half = str.slice(0, halfway);
let second_half = str.slice(halfway);
let broken_word = second_half.indexOf(" ");
let orphan = (second_half.slice(0, broken_word));
first_half = first_half.concat(orphan);
second_half = second_half.slice(broken_word).trim()
console.log(first_half + " --halfway split here-- " + second_half)

You'd need to check whether the end of first_half or the beginning of second_half is a space, in which case there's no broken word, so you'd only run broken_word inside that test.

With a little more work, you can grab the two words before the last full stop in first half of the string, using a regex and reversing the string:

const backwards = first_half.split("").reverse().join("");
z = (backwards.match(/(\.\S+\s\S+)/)[0]);
end_sentence = z.split("").reverse().join("");
console.log(end_sentence);

From there you could use backwards.indexOf(".") or split first_half after the end of end_sentence, then slice and concat for the result you want for the first half of the string.