如何将HTML内容拆分为适合屏幕的页面？

Question

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 accomplish all of this?

Answer 1

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 (eg 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 (eg 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 recommend trying this first, if at all possible.