采用HTML5技术对网页内容进行分页显示的方法技术

本发明专利技术涉及一种采用HTML5技术对网页内容进行分页显示的方法，网页上需要分页显示的基本内容单元，是图书中的一个连续不分页的内容区块，通常这是图书的一个章；将较长的网页内容根据图书的每个章，分拆为多个小节，需要将较长的网页内容进行拆分，拆分为若干个小节，这个拆分的部分，称为“小节”，将很多个小节组合起来，共同构成完整的分页效果，然后一部分一部分地显示在栏目中。本发明专利技术能够让HTML5的内容，以分页的方式进行显示，高性能的算法，即使上百页的内容，也可能在几秒内完成分页，速度可媲美PC机上Word的分页速度，内容发生变化时，可以很方便的重新计算分页，完全采用HTML5代码实现，因而有着良好的可移植性。

【技术实现步骤摘要】
采用HTML5技术对网页内容进行分页显示的方法
本专利技术属于一种对网页内容进行分页显示的方法，具体的是采用HTML5技术对网页内容进行分页显示的方法。
技术介绍
iBook出现以后，电子图书的阅读方式，变成类似于实体书的“翻书阅读”效果。比以前来讲，用户体验有了极大的提升，这种阅读方式，有两个特点：1、采用分页的显示方式，图书是一页一页的显示；2、切换页面时，采取翻页的效果，类似于真实的图书。iBook不只支持纯文本的图书显示，还能支持带格式的图书显示。iBook的标准文档格式是ePub格式。ePub底层就是HTML5的格式，因此iBook能够显示各种复杂的HTML5排版格式。iBook的这种阅读方式，其主要的好处是更像实体的图书，从而使得用户阅读时，更有真实感。在强调用户体验的时代，这种阅读模式得到了大家的广泛好评。iBook是采用原生态的ObjectC来编写的，虽然在iOS平台上实现了翻页显示效果，但是其代码，并不能移植到其他平台上。iBook另外还有一个缺点，就是只支持ePub格式，而ePub格式的图书，尤其是中文书，在网络上是相当难找的，这就大大制约了iBook在中文图书阅读方面的使用。在Android和WindowsPhone平台中，也有人开发了类似的翻页显示效果，然而虽然这个网址实现了翻页效果，但是却无法支持ePub，无法实现文字格式的显示。由于这个原因，Android下面的图书阅读软件，绝大部分都只能支持纯文本图书的显示，而无法支持各种复杂的图书排版效果。同样，WindowsPhone和PC机下面，也还没有类似于iBook的图书阅读软件。为了解决这个问题，最简单的做法，就是直接使用HTML5技术，实现类似于iBook的图书翻页效果。因为HTML5技术是跨平台的，因此一旦实现，在所有的移动平台和PC机上，都能使用。HTML5的默认内容显示模式，是所谓的“流式显示模式”。这种显示模式下，所有的内容，像液体一样，向下“流动”，然后通过垂直卷滚条的滑动，来观看被遮挡的内容。流式显示模式，因为显示的方式不一样，根本就不存在页面的概念，因此是不可能产生图书翻页效果的。要在HTML5应用中，实现类似于iBook的翻页显示效果，要解决三个主要问题：1、要在HTML5中实现“页式显示模式”，以“页”为单位显示网页内容。2、性能要足够好，要能够支持带格式的、数量很多的页面。3、可以实现图书翻页显示效果。要在HTML5中实现“页式显示模式”，最简单的思路，就是计算段落或者行的高度，然后达到设定的页面高度之后，就从中打断，把剩余的内容放到下一页去。然而这个思路实际上是不可行的，原因是因为在HTML中，一大篇文字，例如实际上可能占100页的一大篇文字，可能只有一个DOM对象。而HTML中所有获取高度的操作，都只能针对DOM对象。因此，HTML中无从获取“段落”和“行”的高度，因此，无法简单地以打断段落、或者打断行的方式进行分页。另一个思路，就是在第3方编辑软件(例如Word)中，事先进行好分页，然后保存在HTML5中(可以通过某个特殊的自定义标记)。这个方式在实践中也行不通，因为用户的设备分辨率千变万化，不同的设备，页面尺寸不同，分页的位置也会不一样。另外，即使同一台设备，用户也可能改变字号，进而导致分页的改变。因此，事先进行好分页的思路也是不可行的。还有人采用HTML5的Canvas技术，来实现页式显示模式，以及翻页效果，例如：采用Canvas技术，虽然也能实现页式显示模式，但是存在一些严重的问题：性能问题，只有在CPU性能强大的设备上，才能流畅地运行，大部分移动设备上，都不能正常运行。无法支持网页内容的排版，Canvas是一种方形的画布对象，采用Canvas之后，其中的内容就无法采用其他网页技术，例如CSS3之类。这样导致网页内容的显示，无法支持排版格式。只能支持“纯文字+图像”这样的简单内容显示。公开号为CN101853293A的专利，虽然名称为“一种自适应分页的方法及装置”，但是其解决的问题，是对一个HTML的网页版面，以DOM对象为单元进行分割。如前所述，DOM对象是一个很粗的单位，一大篇文字可能只是一个DOM对象(例如100页长)，以DOM对象为基本单元的方案根本无从分页。因此，我们必须找到一种能够将HTML内容进行分页显示的方法，并且这种方法有着足够高的性能，然后才有可能实现基于HTML5的图书翻页显示效果。
技术实现思路
针对上述问题，本专利技术的目的采用HTML5技术对网页内容进行分页显示的方法，本方法能够让HTML5的内容，以分页的方式进行显示，高性能的算法，即使上百页的内容，也可能在几秒内完成分页，速度可媲美PC机上Word的分页速度，内容发生变化时，可以很方便的重新计算分页，完全采用HTML5代码实现，因而有着良好的可移植性。本专利技术的目的是通过以下技术方案来实现的：采用HTML5技术对网页内容进行分页显示的方法，其特征在于：包括以下步骤：(1)网页上需要分页显示的基本内容单元，是图书中的一个连续的、没有人工预先设定好分页的内容区块，不同图书设置内容区块的方式不一样，内容区块可以是图书的一个章，也可以不是；(2)将较长的网页内容根据图书的每个章，分拆为多个小节，需要将较长的网页内容进行拆分，拆分为若干个小节，这个拆分的部分，称为“小节”，将很多个小节组合起来，共同构成完整的分页效果，然后一部分一部分地显示在栏目中；(3计算出每个小节的高度，然后计算出“剩余影响”；小节的“剩余影响”，在排版仍然要考虑在内，计算出每个小节对后面的小节的“剩余影响”，计算出了剩余影响，以后各个小节排列时，只要考虑到前一个小节的“剩余影响”，就可以通过多个小节的组合，实现较长内容的分栏排版；(4)生成一系列页面对象，每个页面对象包含合适的栏内容，从而看上去像图书的“一页”，首先，将分栏中的一个栏，变为一个独立的页面；具体的做法：将分栏中的栏的尺寸，设置为和页面尺寸同样大小；设定页面为容器，其中包含分栏内容；调整分栏的margin-left参数，让想要的栏出现在最左边；分栏内容的父对象，父对象的宽度设置为页面的宽度，这样超出这个宽度的栏，都不会显示出来，父对象的高度就设置为页面的高度，分栏的高度也设置为页面的高度，分栏对象的margin-left设置为若干栏的宽度，这样在父对象中，就能显示出指定的栏；规定页面的尺寸，让剩余的栏不显示出来；通过这样的设置，就可以让页面显示指定的一个栏；就将分栏中的一个栏，转化为了一个独立的页面，为了提高性能，每个页面就不能包含所有的栏，只包含其要显示的栏，多余的栏越少越好；(5)将HTML5的内容拆分为很多个独立的页面对象生成后，可以根据需要进行显示或者设置翻页效果，翻页效果的实现，实际上就是对页面进行某种切换。本本专利技术HTML5的页式显示模式，能够让HTML5的内容，以分页的方式进行显示，高性能的算法，即使上百页的内容，也可能在几秒内完成分页，速度可媲美PC机上Word的分页速度，内容发生变化时，可以很方便的重新计算分页，完全采用HTML5代码实现，因而有着良好的可移植性。具体实施方式下面对本专利技术做进一步的说明：实施例：采用HTML5技术对网页内容进行分页显示的方法，包括以下步骤本文档来自技高网...

【技术保护点】
一种采用HTML5技术对网页内容进行分页显示的方法，其特征在于：包括以下步骤：(1)网页上需要分页显示的基本内容单元，是图书中的一个连续不分页的内容区块，通常这是图书的一个章；(2)将较长的网页内容根据图书的每个章，分拆为多个小节，需要将较长的网页内容进行拆分，拆分为若干个小节，这个拆分的部分，称为“小节”，将很多个小节组合起来，共同构成完整的分页效果，然后一部分一部分地显示在栏目中；(3计算出每个小节的高度，然后计算出“剩余影响”；小节的“剩余影响”，在排版仍然要考虑在内，计算出每个小节对后面的小节的“剩余影响”，计算出了剩余影响，以后各个小节排列时，只要考虑到前一个小节的“剩余影响”，就可以通过多个小节的组合，实现较长内容的分栏排版；(4)生成一系列页面对象，每个页面对象包含合适的栏内容，从而看上去像图书的“一页”，首先，将分栏中的一个栏，变为一个独立的页面；具体的做法：将分栏中的栏的尺寸，设置为和页面尺寸同样大小；设定页面为容器，其中包含分栏内容；调整分栏的margin?left参数，让想要的栏出现在最左边；分栏内容的父对象，父对象的宽度设置为页面的宽度，这样超出这个宽度的栏，都不会显示出来，父对象的高度就设置为页面的高度，分栏的高度也设置为页面的高度，分栏对象的margin?left设置为若干栏的宽度，这样在父对象中，就能显示出指定的栏；规定页面的尺寸，让剩余的栏不显示出来；通过这样的设置，就可以让页面显示指定的一个栏；就将分栏中的一个栏，转化为了一个独立的页面，为了提高性能，每个页面就不能包含所有的栏，只包含其要显示的栏，多余的栏越少越好；(5)将HTML5的内容拆分为很多个独立的页面对象生成后，可以根据需要进行显示或者设置翻页效果，翻页效果的实现，实际上就是对页面进行某种切换。...

【技术特征摘要】
1.一种采用HTML5技术对网页内容进行分页显示的方法，其特征在于：包括以下步骤：(1)网页上需要分页显示的基本内容单元，是图书中的一个连续的、没有人工预先设定好分页的内容区块，不同图书设置内容区块的方式不一样，内容区块可以是图书的一个章，也可以不是；(2)将较长的网页内容根据图书的每个章，分拆为多个小节，需要将较长的网页内容进行拆分，拆分为若干个小节，这个拆分的部分，称为“小节”，将很多个小节组合起来，共同构成完整的分页效果，然后一部分一部分地显示在栏目中；(3)计算出每个小节的高度，然后计算出“剩余影响”；小节的“剩余影响”，在排版仍然要考虑在内，计算出每个小节对后面的小节的“剩余影响”，计算出了剩余影响，以后各个小节排列时，只要考虑到前一个小节的“剩余影响”，就可以通过多个小节的组合，实现较长内容的分栏排版；(4)生成一系列页面对象，每个页面对象包含合适的栏内容，从而看上去像图书的“一页”，首先，将分栏中的一个栏，变为一个独立的页面；具体的做法：将分栏中的栏的尺寸，设置为和页面尺寸同样大小；设定页面为容器，其中包含分栏内容；调整分栏的marg...

【专利技术属性】
技术研发人员：张昀，
申请(专利权)人：张昀，
类型：发明
国别省市：