I'm making a book reader web application. From the server I get a long string with all of the book text in HTML format. It looks something like this:

<div><p>Alice was beginning....</p></div></div>to get very  ... </div>

What I want is to split this text into pages. I want to get something like this:

<li id='page1'>... text ...</li>
<li id='page2'>... text ...</li>
...

A single page should fill the viewport. Users shouldn't be able to scroll the book text. Instead, they should be able to move between the pages using buttons.

I need some function to measure all content, split it into pieces of same maximum height, and tag the pieces with page numbers. It must also take into account pictures and long paragraphs (which may not fit on a single page).

How can I acplish all of this?

I'm making a book reader web application. From the server I get a long string with all of the book text in HTML format. It looks something like this:

<div><p>Alice was beginning....</p></div></div>to get very  ... </div>

What I want is to split this text into pages. I want to get something like this:

<li id='page1'>... text ...</li>
<li id='page2'>... text ...</li>
...

A single page should fill the viewport. Users shouldn't be able to scroll the book text. Instead, they should be able to move between the pages using buttons.

I need some function to measure all content, split it into pieces of same maximum height, and tag the pieces with page numbers. It must also take into account pictures and long paragraphs (which may not fit on a single page).

How can I acplish all of this?

• javascript
• html
• split

Share Improve this question Follow edited Dec 8, 2014 at 10:23 hon2a 7,22455 gold badges4545 silver badges5858 bronze badges asked Dec 8, 2014 at 9:18 georgelvivgeorgelviv 30422 silver badges1010 bronze badges 4

• 1 very interesting "question". Can you put it in the form of a question, descriptive text being in plete sentences? I want to upvote, but its a bit unclear. – Todd Commented Dec 8, 2014 at 9:29
• Please reformat - this is unclear. – Michael Voznesensky Commented Dec 8, 2014 at 10:05
• I'd create a Div in Javascript that has exactly the same css rules and dimension as the actual "page div" shown to the user, then just fill word by word in the div and check if it still fits. If yes apply the next word, if no remove the last one and move on to fill the next page. – wawa Commented Dec 8, 2014 at 10:09
• Does this answer your question? Split text into pages and present separately (HTML5) – David Mulder Commented Mar 25, 2020 at 13:29

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

To find out the dimensions of each bit of content, you'd have to let the browser actually render it and then measure it. Additionally, if you want to break in the middle of flow (e.g. in the middle of a paragraph), things get pretty difficult. (You cannot measure individual characters/words without wrapping them in elements.) You'd also have to disable zoom, etc., so that your measurements have some lasting meaning. All in all, HTML rendering engines are specifically tailored to render flow content, which is pretty much the opposite to paged content.

However, there are some approaches to paging, you could take, neither of which actually deals with rendering the whole text and taking measurements.

Scroll Override

One approach I'd try would be to simply

• render all text into a container,
• style the container in such a way that the scrollbar is not visible (e.g. by pushing it off the screen),
• disable manual scrolling, and
• provide "paging" buttons that programatically scroll by exactly the height of your "page".

This solution has the advantage of being simple to implement, but it's not perfect. Images can be rendered across the break and the user wouldn't be able to see them whole.

Columns

The only other approach I could think of at short notice is using columns. You'd have to

• render all text into a container,
• style the container to be "infinitely" wide and have "infinite" number of columns, each the width of the page,
• absolutely position the container in its parent,
• make your "paging" buttons move the container horizontally by the width of the page.

This solution needs modern browsers with support for columns, but using columns solves the problem of properly breaking flow content into pages. I'd remend trying this first, if at all possible.