拆分HTML字符串成多个页面 [英] Split html string into multiple pages
问题描述
我想开发电子书阅读器种类android应用的。我需要拆分长HTML字符串（在运行时由服务器发送）到基于可用的屏幕空间上飞的页面。 HTML内容可能包含文本，图像，视频etc.I正在使用的WebView显示HTML的文章。
I am trying to develop eBook reader kind of android application. I need to split long html string(sent by server at run-time) into pages on fly based on the screen space available. Html content is an article which could contain text, images, videos etc.I am using WebView to display the html.
谁能给我方向朝这可怎么实现的。
Can anyone give me direction towards how this can be achieved.
先谢谢了。
推荐答案
做任何形式的HTML / DOM解析是要推动你了墙，我想，意味着你开始有效地开发自己的HTML布局引擎。
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.
这是一个更好的办法是使用CSS3列函数。基本上，让您的内容，以一个固定的宽度和高度柱内作出。这将成为你的页面。然后改变你的内容的位置留给页面之间移动，并在一个容器中，将隐藏溢出元素包裹。
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.
我们的HTML将主要是：
Our HTML will basically be:
<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>
我们的基本的CSS是：
Our basic CSS is:
#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;
}
现在，我们将设置离开 CSS属性为＃内容，页面之间切换，在-250px的倍数。
Now we will set the left CSS property for the #content to switch between pages, in multiples of -250px.
我们只有制定出我们的内容多少列需要，我们已经得到了传呼。 <一href=\"http://stackoverflow.com/questions/6989306/how-to-get-css3-multi-column-count-in-javascript\">How获得在Javascript CSS3多列数给出了一个暗示：我们打算从左边位置 #endMarker 发现
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.
下面是一个工作的例子 http://lateral.co.za/pages.html ，与第一章白鲸。它工作在Chrome和Android上，但不能在Firefox - 我想是因为在CSS中列实现之间的差异。由于我们在Android的有兴趣在这里，code是不错的。
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.
重要的部分是：
- 的CSS设置同上。
- 增加了一个
＆LT的;跨度ID =结束标记＆GT;＆LT; / SPAN＆GT;内容后（但在＃内容DIV） - 增加了一个
＃previous和#next按钮和#page跨度，所有的#container的。 -
这JavaScript的jQuery的加载后：
- The CSS settings as above.
- The addition of a
<span id="endMarker"></span>after the content (but within the#contentdiv) - The addition of a
#previousand#nextbutton, and a#pagespan, 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);
});
这就是它。
有房工作。有人可能要想想这个数字列计算，我有点吸它从引用的SO职位，但并没有真正想通了......容器的宽度似乎影响内容的列宽，这并不完全道理给我。
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.
但至少一切都似乎是工作，而无需做任何HTML分析和自己的布局，至少在Chrome和Android上。
But at least everything seems to be working without having to do any HTML parsing and own layout, at least in Chrome and on Android.
这篇关于拆分HTML字符串成多个页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
