Rectangle 27 0

You have to parse the HTML, best would be to use some library where you can access the DOM like in JavaScript. Then you can create a custom layout for the parsed content. Does WebView supports JavaScript? That would be a good start to try with.

Obviously you can not split at arbitrary locations of the HTML file, your have to consider the HTML-Tags. After modifying the DOM or splitting the html you can provide an custom CSS file for the content to display it in a way you like and add some pagination using your library or JavaScript.

Using <span style="display:none"></span> can help you to hide content in a website. Then you don't have to split is physically (it is in memory after loading the page anyway).

Hope that helped a bit. You will not get a full solution here, but maybe you got some ideas. If you find further more specific problems it will be easier to ask more specific questions.

Thanks for your reply. With Jericho html parser i have parsed the html and have extracted the text content and images and then I have setup a custom layout with imageview at the top and textview below it. If there is a image i am setting it to the imageview, if not my textview fits the screen.

With textview.getPaint().measureText(txt) i am getting the width of the text to be displayed.How can we calculate the number of characters or the text that fits the screen.

android webview - Split html string into multiple pages - Stack Overfl...

android-webview
Rectangle 27 0

Doing any sort of HTML/DOM parsing is going to drive you up the wall, I think, and means that you're effectively starting to develop your own HTML layout engine.

It's a better idea to use the CSS3 column functions. Basically, get your content to render within a fixed width-and-height column. This becomes your page. Then shift your content position left to move between pages, and wrap it in a container that will hide overflow elements.

<body>
    <div id="container">
        <div id="content">

            CONTENT GOES HERE

            <span id="endMarker"></span>
        </div>
    </div>
    <div>
        <button id="previous">Previous</button>
        <span id="page">Page N of M</span>
        <button id="next">Next</button>
    </div>
</body>
#container {
    width: 240px;
    overflow: hidden;
    background-color: yellow;
}
#content {
    position: relative;
    height: 30em;

    -moz-column-width: 240px;
    -webkit-column-width: 240px;
    column-width: 240px;

    -moz-column-gap: 10px;
    -webkit-column-gap: 10px;
    column-gap: 10px;
}

Now we will set the left CSS property for the #content to switch between pages, in multiples of -250px.

We've only got to work out how many columns our content takes, and we've got paging. How to get css3 multi-column count in Javascript gives a hint: we're going to find it from the left position of #endMarker.

Here's a working example http://lateral.co.za/pages.html, with the first chapter of Moby Dick. It works in Chrome and on Android, but not in Firefox - I think because of differences in the CSS columns implementations. Since we're interested in Android here, the code is good.

  • The CSS settings as above.
<span id="endMarker"></span>
#content
  • The addition of a #previous and #next button, and a #page span, all outside the #container.
  • This javascript after jQuery loads: var _column = 0; var _columnCount = 0; var _columnWidth = 240; var _columnGap = 10; $(function() { _columnCount = Math.floor($('#endMarker').position().left/(_columnWidth + _columnGap)); setColumn = function(i) { _column = i; document.getElementById('content').style.left = -1 * _column * (_columnWidth + _columnGap); $('#page').html('Page ' + (_column+1) + ' of ' + (_columnCount+1)); } $('#next').click(function() { if (_column==_columnCount) return; setColumn(_column+1); }); $('#previous').click(function() { if (0==_column) return; setColumn(_column-1); }); setColumn(0); });

There's room for work. One might want to think about that number of columns calculation, I sort of sucked it from the referenced SO post, but haven't actually thought it through... The width of the container seems to affect the column width of the content, which doesn't entirely make sense to me.

this is really nice, but how can i set width and height to fill window? using width:$( window ).width(); instead width: 240px; and other column width not worked.

It should be enough to make the container fill the window. Or use width: 100%; or width: 100vw;

-moz-column-width: 240px; -webkit-column-width: 240px;  column-width: 240px;
height
width

android webview - Split html string into multiple pages - Stack Overfl...

android-webview