CN101477564A - 一种在窄屏幕设备上显示宽网页的智能布局方法 - Google Patents

Abstract

本发明提供了一种在窄屏幕设备上显示宽网页的智能布局方法是通过对网页中的文本内容和非文本内容分别采用视口宽度显示算法和网页布局宽度显示算法进行显示布局处理，使得网页中的文本内容被布局在显示设备的视口宽度以内，而非文本内容则在保证显示布局不被打乱的前提下充分利用显示设备的视口宽度。通过该智能布局方法可以使浏览者获得适合于在窄屏幕上浏览的文本内容布局，同时也不会影响网页中非文本内容的准确显示。

Description

一种在窄屏幕设备上显示宽网页的智能布局方法

技术领域

本发明涉及一种屏幕显示的布局方法，特别是一种为方便浏览者在窄屏幕设备上浏览宽网页，将宽网页的显示内容进行重新布局的方法，属于互联网应用技术领域。

背景技术

随着网络技术和应用的快速发展，目前互联网日益普及，已经从传统的电脑扩展到了包括手机、电视机、机顶盒、卫星接收机、手持式游戏机、便携式媒体播放器等多种设备上。在不远的将来，使用这些非电脑设备上网的用户数量甚至有可能超过使用电脑上网的用户数量。

用户能够访问的互联网网站主要分为两类：web网站以及wap网站。其中的wap网站主要是针对手机这一类小屏幕设备而设计的，其功能、表现力、网站和网页的数量也远远比不上web网站。Web网站是互联网的最主要的组成部分，也是未来互联网发展的趋势，web网站的网页(以后简称web网页)是互联网内容的最主要的存储形式。

但是，目前的web网页大部分是针对电脑设计的，在手机等屏幕比较窄的设备上来看这些网页会产生问题：手机屏幕的宽度比web网页的宽度窄，那么在手机上浏览这些网页时就需要反复的左右移动屏幕上的内容才能看到所有的内容，这会给用户的阅读造成很大的不方便。如附图1所示，要想阅读网页中的文字，必须多次左右移动内容才能够看清楚，文字越多，这种不方便性就越突出。

针对这个问题，有一些浏览器采用了一种比较简单的解决办法：就是将网页的所有内容都按照屏幕的宽度进行重新布局，这样子用户不需要左右移动就可以阅读所有的文字内容。但是，这种简单的解决办法在解决文字阅读方便性的同时，却引来了另外一个问题，那就是有可能造成图片显示的混乱。目前，许多网站为了加速网页的加载速度，往往将一幅大的图片分割成多幅小的图片，也就是说看起来好像是一幅图，实际上是多幅图拼凑出来的，但是各个图片之间的相对位置关系必须严格按照网页设计者的本意才能正确显示，否则显示出来的图片就可能完全无法表达网页设计者的本意。在采用了按照屏幕宽度进行布局的算法后，图片也需要重新进行布局，这样就可能导致图片之间的相对位置与网页设计者的本意不一致，造成页面的混乱，无法正确表达网页作者的本意。如附图2所示，按照屏幕宽度布局之后，阅读文字不需要左右移动了，但是两幅图片的显示已经错位，看不出原来图片的原貌了，如果有更多幅图片，这种失真效果就更加突出。

针对上面这些问题，本发明设计了一种在窄屏幕设备上显示宽网页的智能布局方法。

发明内容

本发明的目的在于解决现有技术中存在的不足，提供一种在窄屏幕设备上显示宽网页的智能布局方法，以方便浏览者在窄屏幕设备上浏览宽网页。

本发明的发明目的是通过下述技术方案予以实现的：

一种在窄屏幕设备上显示宽网页的智能布局方法，其特征在于：具体包括如下步骤：

(1)显示设备将所接收的网页数据解析为节点树形结构；

(2)显示设备根据所解析的网页数据节点树形结构，自根节点起依次对各个节点进行处理；

(3)显示设备判断所处理的节点类型；如果该节点为文本节点，则采用视口宽度显示算法处理；如果该节点为非文本节点，则采用网页布局宽度显示算法处理；

(4)当所述网页数据的各个节点均被处理完成后，该布局方法结束。

所述视口宽度显示算法具体包括如下步骤：

(11)所述显示设备获取所述文本节点样式限制宽度及视口宽度；

(12)显示设备获取文本节点的尚未被布局的文本内容；

(13)显示设备根据步骤(11)所得到的样式限制宽度和视口宽度，计算得出当前行的样式剩余宽度和视口剩余宽度，并以其中的较小值，作为该文本内容在当前行的布局实际允许宽度；

(14)显示设备根据所述布局实际允许宽度，计算当前行所能够容纳的文字数目，并判断是否能够容纳步骤(12)中所获得的尚未被布局的文本内容；如果能够全部容纳，则布局所有文本内容在当前行，并结束对本节点的布局处理；如果不能够全部容纳，则执行步骤(15)；

(15)显示设备在能够被容纳于当前行的文字中，从后向前查找分行点；如果查找到分行点，则将查到的第一个分行点以前的内容布局在当前行，并移动布局起点到下一行，然后返回步骤(12)；如果未查到分行点，则执行步骤(16)；

(16)显示设备判断当前行文本的布局起点是否在该文本节点允许布局的最左边位置；如果不在，则移动布局起点到下一行，并返回步骤(13)；如果在，则从所述能够被容纳于当前行的文字之后，从前向后查找分行点；如果查找到分行点，则将查到的第一个分行点以前的内容布局到当前行，并移动布局起点到下一行，然后返回步骤(12)；如果未查找到分行点，则将该文本节点的全部内容都布局在当前行，并结束对本节点的布局处理。

所述视口宽度显示算法还可以为如下步骤：

(21)所述显示设备获取所述文本节点样式限制宽度及视口宽度；

(22)显示设备获取文本节点尚未布局的文本内容；如果没有未布局的文本内容，则结束对本节点的布局处理；

(23)显示设备从步骤(22)所获得的尚未布局的文本内容起点处开始查找分行点；如果未找到分行点则以该文本内容结束位置为分行点；计算在第一个分行点以前文本内容的宽度；

(24)显示设备根据步骤(21)所得到的样式限制宽度和视口宽度，计算得出当前行的样式剩余宽度和视口剩余宽度，并以其中的较小值，作为该文本内容在当前行的布局实际允许宽度；

(25)如果步骤(23)所计算得到的分行点以前文本内容的宽度小于或者等于所述布局实际允许宽度，则该分行点以前文本内容布局在当前行，并返回步骤(22)；否则，执行步骤(26)；

(26)显示设备判断当前行文本的布局起点是否在该文本节点允许布局的最左边位置；如果不在，则移动布局起点到下一行，并返回步骤(24)；如果当前行文本的布局起点已经在允许布局的最左边位置，则将分行点以前的文本内容布局在当前行，并移动布局起点到下一行，然后返回步骤(22)。

所述网页布局宽度显示算法具体包括如下步骤：

(31)所述显示设备获得所述非文本节点的宽度及样式限制宽度；

(32)显示设备根据所述样式限制宽度，计算当前行的样式剩余宽度；

(33)比较所述非文本节点的宽度和当前行样式剩余宽度；如果当前行的样式剩余宽度大于或者等于节点宽度，则布局该节点在当前行，并结束对本节点的布局处理；否则，执行步骤(34)；

(34)显示设备判断当前行非文本节点的布局起点是否在该非文本节点允许布局的最左边位置；如果不在，则移动布局起点到下一行，并返回步骤(32)；否则，将该节点布局在当前行，并结束对本节点的布局处理。

本发明的有益效果是：通过该智能布局方法处理的网页可以使浏览者获得适合于在窄屏幕上浏览的文本内容布局，同时也不会影响网页中非文本内容的准确显示。

附图说明

图1为通过现有技术在窄屏幕设备上显示宽网页的布局示例一；

图2为通过现有技术在窄屏幕设备上显示宽网页的布局示例二；

图3为在窄屏幕设备上显示宽网页的智能布局方法的流程图；

图4为视口宽度显示算法的一种具体实施流程图；

图5为视口宽度显示算法的另一种具体实施流程图；

图6为网页布局宽度显示算法的具体实施流程图；

图7为样式限制宽度及视口宽度说明示意图。

具体实施方式

下面结合附图和实施例对本发明作进一步描述。

由前述可知，现有技术中在窄屏幕设备上显示宽网页通常有两种布局方法。一种方法是直接在窄屏幕设备上按照宽网页的布局格式显示。这种方法的缺点在于浏览者在浏览这些网页时就需要反复的左右移动屏幕上的内容才能看到所有的内容，这给浏览者的阅读造成很大的不方便。另一种方法就是将宽网页的内容都按照窄屏幕设备的屏幕宽度进行重新布局，这样用户不需要左右移动就可以阅读所有的网页内容。但是，这种方法的缺点在于经过这种方法重新布局的网页往往会使网页中的图片信息等非文字内容的显示变得混乱。

可见，现有在窄屏幕设备上显示宽网页内容的布局方法中所存在的问题，其关键在于无法对网页中文字内容和非文字内容通过统一的显示处理方法进行布局，以获得便于浏览者浏览的网页显示布局状态。本发明即是针对这一点，设计了一种对网页内容中文本内容和非文本内容采用不同的显示布局方法进行分别处理的智能布局方法。

图3为本发明所设计布局方法的流程图。如图所示，该在窄屏幕设备上显示宽网页的智能布局方法具体包括如下步骤：

(1)显示设备将所接收的网页数据解析为节点树形结构；

(2)显示设备根据所解析的网页数据节点树形结构，自根节点起依次对各个节点进行处理；

(3)显示设备判断所处理的节点类型；如果该节点为文本节点，则采用视口宽度显示算法处理；如果该节点为非文本节点，则采用网页布局宽度显示算法处理；

(4)当所述网页数据的各个节点均被处理完成后，该布局方法结束。

由上可知，本发明所设计的智能布局方法主要是针对网页中的文本内容和非文本内容分别进行不同的显示算法处理，以为浏览者提供最便于浏览的网页布局状态。这一点正是本发明与现有窄屏幕设备的网页显示布局技术的最大区别。通过这种布局方法可以使浏览者获得适合于在窄屏幕上浏览的文本内容布局，同时也不会影响网页中非文本内容的准确显示。

图4为所述视口宽度显示算法的一种具体实施流程图。图4所示视口宽度显示算法的具体步骤如下：

(11)显示设备获取该文本节点样式限制宽度及视口宽度。

参见图7，所述样式限制宽度是指节点所在的块类容器上设置的宽度。网页设计者通过对块类节点上设置宽度样式，以限制块类节点的内容的呈现范围。所述视口宽度是指屏幕或者浏览器窗口的宽度。

(12)显示设备获取文本节点的尚未被布局的文本内容。

(13)显示设备根据步骤11所得到的样式限制宽度和视口宽度，计算得出当前行的样式剩余宽度和视口剩余宽度，并以其中的较小值，作为该文本内容在当前行的布局实际允许宽度。

参见图7，所述样式剩余宽度就是前述样式限制宽度减去当前行已有内容占用的宽度。同样，视口剩余宽度是指前述视口宽度减去当前行已有内容占用的宽度。

(14)显示设备根据所述布局实际允许宽度，计算当前行所能够容纳的文字数目，并判断是否能够容纳步骤12中所获得的尚未被布局的文本内容。如果能够全部容纳，则布局所有文本内容在当前行，并结束对本节点的布局处理。如果不能够全部容纳，则执行步骤15。

(15)显示设备在能够被容纳于当前行的文字中，从后向前查找分行点。如果查找到分行点，则将查到的第一个分行点以前的内容布局在当前行，并移动布局起点到下一行，然后返回步骤12。如果未查到分行点，则执行步骤16。

所述分行点是指文字之间允许进行折行处理的位置。这里，文字之间是否被允许进行折行处理是根据文字的折行性质来判断。有的文字允许从自身的前面折行，比如前括号；有的文字允许从自身的后面折行，比如后括号。有的文字需要根据相邻文字来判断，比如字母。对于分行点的判断以为现有技术，并不在本发明的设计范围之内。因此，此处不再详述分行点的具体判断过程。

(16)显示设备判断当前行文本的布局起点是否在该文本节点允许布局的最左边位置。如果不在，则移动布局起点到下一行，并返回步骤13；如果在，则从所述能够被容纳于当前行的文字之后，从前向后查找分行点。如果查找到分行点，则将查到的第一个分行点以前的内容布局到当前行，并移动布局起点到下一行，然后返回步骤12；如果未查找到分行点，则将该文本节点的全部内容都布局在当前行，并结束对本节点的布局处理。

所述允许布局的最左边位置是指当前节点所在的块类容器的最左侧，即表示当前行没有容纳其他任何内容。

通过上述图4所示的视口宽度显示算法处理后的文本节点内容被布局在显示设备的视口宽度以内，这样浏览者仅需使用上下键即可浏览文本内容，方便了浏览者浏览。

但应指出的是，图4所示流程仅为视口宽度显示算法的一种实施方式。事实上，上述的文本显示布局效果并不仅限于上述一种视口宽度显示算法得到。图5即为视口宽度显示算法的另一种具体实施流程图。图5所示视口宽度显示算法的具体步骤如下：

(21)显示设备获取该文本节点样式限制宽度及视口宽度。

(22)显示设备获取文本节点尚未布局的文本内容；如果没有未布局的文本内容，则结束对本节点的布局处理。

(23)显示设备从步骤22所获得的尚未布局的文本内容起点处开始查找分行点。如果未找到分行点则以该文本内容结束位置为分行点。计算在第一个分行点以前文本内容的宽度。

(24)显示设备根据步骤21所得到的样式限制宽度和视口宽度，计算得出当前行的样式剩余宽度和视口剩余宽度，并以其中的较小值，作为该文本内容在当前行的布局实际允许宽度。

(25)如果步骤23所计算得到的分行点以前文本内容的宽度小于或者等于所述布局实际允许宽度，则该分行点以前文本内容布局在当前行，并返回步骤22。否则，执行步骤26。

(26)显示设备判断当前行文本的布局起点是否在该文本节点允许布局的最左边位置。如果不在，则移动布局起点到下一行，并返回步骤24；如果当前行文本的布局起点已经在允许布局的最左边位置，则将分行点以前的文本内容布局在当前行，并移动布局起点到下一行，然后返回步骤22。

图6为所述网页布局宽度显示算法的具体实施流程图。图6所示网页布局宽度显示算法的具体步骤如下：

(31)显示设备获得该非文本节点的宽度及样式限制宽度。

(32)显示设备根据所述样式限制宽度，计算当前行的样式剩余宽度。

(33)比较所述非文本节点的宽度和当前行样式剩余宽度。如果当前行的样式剩余宽度大于或者等于节点宽度，则布局该节点在当前行，并结束对本节点的布局处理。否则，执行步骤34。

(34)显示设备判断当前行非文本节点的布局起点是否在该非文本节点允许布局的最左边位置。如果不在，则移动布局起点到下一行，并返回步骤32。否则，将该节点布局在当前行，并结束对本节点的布局处理。

通过这种方法进行布局处理的非文本节点，其显示布局并不会受到窄屏幕设备的视口宽度限制，而是在保证非文本节点按样式限制宽度显示的前提下，尽可能的充分利用显示设备的视口宽度。这样，就保证了非文本内容的显示不会因布局处理而被打乱。

综上所述，本发明所涉及的在窄屏幕设备上显示宽网页的智能布局方法是通过对网页中的文本内容和非文本内容分别进行不同的显示算法处理，使得其中的文本内容被布局在显示设备的视口宽度以内，而非文本内容则在保证显示布局不被打乱。这样就可以获得最适于浏览者浏览的网页布局显示状态。

可见，本发明的核心设计要点在于对于网页中的文本内容和非文本内容进行不同的显示算法处理，以达到各自不同的理想显示效果。而如前所述，用以达到文本内容和非文本内容理想显示效果的具体布局处理算法并不仅限于一种实施方式。因此，不论本领域一般技术人员所做的文本内容和非文本内容的具体显示布局处理方法如何，只要其依照本发明按照节点的类型分别进行显示布局处理的核心设计思想进行设计，则均应视为在本发明的保护范围之内。

Claims (4)

1、一种在窄屏幕设备上显示宽网页的智能布局方法，其特征在于：具体包括如下步骤：

(1)显示设备将所接收的网页数据解析为节点结构；

(2)显示设备根据所解析的网页数据节点结构，自根节点起依次对各个节点进行处理；

(3)显示设备判断所处理的节点类型；如果该节点为文本节点，则采用视口宽度显示算法处理；如果该节点为非文本节点，则采用网页布局宽度显示算法处理；

(4)当所述网页数据的各个节点均被处理完成后，该布局方法结束。

2、如权利要求1所述的在窄屏幕设备上显示宽网页的智能布局方法，其特征在于：所述视口宽度显示算法具体包括如下步骤：

(11)所述显示设备获取所述文本节点样式限制宽度及视口宽度；

(12)显示设备获取文本节点的尚未被布局的文本内容；

(13)显示设备根据步骤(11)所得到的样式限制宽度和视口宽度，计算得出当前行的样式剩余宽度和视口剩余宽度，并以其中的较小值，作为该文本内容在当前行的布局实际允许宽度；

(14)显示设备根据所述布局实际允许宽度，计算当前行所能够容纳的文字数目，并判断是否能够容纳步骤(12)中所获得的尚未被布局的文本内容；如果能够全部容纳，则布局所有文本内容在当前行，并结束对本节点的布局处理；如果不能够全部容纳，则执行步骤(15)；

(15)显示设备在能够被容纳于当前行的文字中，从后向前查找分行点；如果查找到分行点，则将查到的第一个分行点以前的内容布局在当前行，并移动布局起点到下一行，然后返回步骤(12)；如果未查到分行点，则执行步骤(16)；

(16)显示设备判断当前行文本的布局起点是否在该文本节点允许布局的最左边位置；如果不在，则移动布局起点到下一行，并返回步骤(13)；如果在，则从所述能够被容纳于当前行的文字之后，从前向后查找分行点；如果查找到分行点，则将查到的第一个分行点以前的内容布局到当前行，并移动布局起点到下一行，然后返回步骤(12)；如果未查找到分行点，则将该文本节点的全部内容都布局在当前行，并结束对本节点的布局处理。

3、如权利要求1所述的在窄屏幕设备上显示宽网页的智能布局方法，其特征在于：所述视口宽度显示算法具体包括如下步骤：

(21)所述显示设备获取所述文本节点样式限制宽度及视口宽度；

(22)显示设备获取文本节点尚未布局的文本内容；如果没有未布局的文本内容，则结束对本节点的布局处理；

(23)显示设备从步骤(22)所获得的尚未布局的文本内容起点处开始查找分行点；如果未找到分行点则以该文本内容结束位置为分行点；计算在第一个分行点以前文本内容的宽度；

(24)显示设备根据步骤(21)所得到的样式限制宽度和视口宽度，计算得出当前行的样式剩余宽度和视口剩余宽度，并以其中的较小值，作为该文本内容在当前行的布局实际允许宽度；

(25)如果步骤(23)所计算得到的分行点以前文本内容的宽度小于或者等于所述布局实际允许宽度，则该分行点以前文本内容布局在当前行，并返回步骤(22)；否则，执行步骤(26)；

(26)显示设备判断当前行文本的布局起点是否在该文本节点允许布局的最左边位置；如果不在，则移动布局起点到下一行，并返回步骤(24)；如果当前行文本的布局起点已经在允许布局的最左边位置，则将分行点以前的文本内容布局在当前行，并移动布局起点到下一行，然后返回步骤(22)。

4、如权利要求1所述的在窄屏幕设备上显示宽网页的智能布局方法，其特征在于：所述网页布局宽度显示算法具体包括如下步骤：

(31)所述显示设备获得所述非文本节点的宽度及样式限制宽度；

(32)显示设备根据所述样式限制宽度，计算当前行的样式剩余宽度；

(33)比较所述非文本节点的宽度和当前行样式剩余宽度；如果当前行的样式剩余宽度大于或者等于节点宽度，则布局该节点在当前行，并结束对本节点的布局处理；否则，执行步骤(34)；

(34)显示设备判断当前行非文本节点的布局起点是否在该非文本节点允许布局的最左边位置；如果不在，则移动布局起点到下一行，并返回步骤(32)；否则，将该节点布局在当前行，并结束对本节点的布局处理。

Images