Present html content as dynamic "pages"

Question

I'm building an e-Book reader for android. The content of an ebook is often divided into html files (epub) with one or may chapters in them.

I'm planning to build an e-book reader who divides the content of those files into different "pages". The problem is to know how many much text "fits" on one page and to calculate the correct amount of pages since that depends on a number of different factors, such as: font-size, word size, paragraphs, images, page-breaks, headlines etc.

Idealy i would have my text justified and selectable, and since that's not possible with normal TextView or EditText i must use a non-scrollable WebView.

So to sum it up, how can i "measure" how much text that fits on one "page" on my WebView? Or is there a different better approach to solve this? I saw that the Paint class as support for measure text and breakText.

Thanks!

Answer 1

Note : This answer does not use the webview as your display surface.

You can use the Canvas to draw each page. The canvas gives you it's height & width using which you can draw each line on the canvas using drawText based on the width & height available.

Basically you can calculate how many letters can fit in a line , take that many words , taking care you don't split any words and keep drawing the text.

If you break up the tasks to use different workers for each paragraph you can also probably make it fast.

Answer 2

Maybe you can do it like this

• Text is being added and rendered inside WebView

• In WebView, you can use Javascript to inspect the current state of DOM tree and extract measurements like width and height of individual elements

• Javascript communicates back the size of the page back to WebView creator thru some callback

• When Javascript detects that the page size threshold is exceeded it sends a signal for a page break needed

Android HTML5 Kindle does page breaking with Javascript so it is definitely possible.