CN105630815A - 网页重排版方法及装置 - Google Patents

Abstract

本发明公开了一种网页重排版方法及装置，通过获取用户对网页中的目标元素的执行动作和对应的动作参数，并根据所述动作参数计算所述目标元素在网页中的更新样式，以达到对网页中的目标元素重新排版的目的。本发明的技术方案可以使用户对排版混乱的网页内容自主进行版式调整，而且能适应不同用户的阅读风格，灵活性较好，大大提升了用户的阅读体验。

Description

网页重排版方法及装置

技术领域

本发明涉及计算机技术领域，特别是涉及一种网页重排版方法及装置。

背景技术

随着互联网技术的迅猛发展，网络呈现给人们的内容越来越丰富。大多数网页已不是单一的文字或图片等版式，而是多种媒体元素交叉组合排版，以呈现更加丰富多样的信息。特别是随着智能移动终端的广泛普及，使“传递”和“分享”成为当前互联网的重要组成部分。例如用户可以在日常的工作和生活中将所见、所感以及所闻非常方便的通过智能手机发表在互联网上，既分享了信息，也丰富了与他人之间的沟通。

发明人在实现本发明的过程中发现，一些网页中的内容可能在排版上不够细致，尤其是由用户自发通过移动终端发表的网页内容在排版上有很大的随意性，网页中的元素在方向、大小或位置上比较混乱。例如用户发表的照片与对应的文字呈90度，即本应竖放的照片变成了横向摆放，这就使其他用户在阅读时为了顺利理解文字所表达的意思，需要在文字方向和图片方向中来回调转，导致用户阅读非常不方便。另外，由于不同用户的阅读习惯可能不一样，这就使得同一网页内容在排版风格上不可能适应所有的用户，导致排版方式灵活性不够，用户对于网页浏览器的体验不够友好。

发明内容

本发明实施例中提供了一种网页重排版方法及装置，以解决现有技术中的网页排版方式不够灵活，用户体验不够友好的问题。

为了解决上述技术问题，本发明实施例公开了如下技术方案：

一方面，提供了一种网页重排版方法，所述方法包括：检测用户对网页中的目标元素的执行动作，所述执行动作包括：旋转，和/或缩放，和/或移动；根据所述执行动作获取所述执行动作的动作参数，所述动作参数包括：旋转角度，和/或缩放系数，和/或移动的目标位置；根据所述动作参数计算所述目标元素的更新样式；根据所述更新样式对所述目标元素在所述网页中进行排版。

结合一方面，在第一种可能的实现方式中，所述方法还包括：检测用户输入的触发操作，判断所述触发操作是否满足预设的触发条件，如果满足所述预设的触发条件，则执行所述检测用户对网页中的目标元素的执行动作的步骤；

所述判断所述触发操作是否满足预设的触发条件，包括：判断所述触发操作是否为预设的触屏操作，所述预设的触屏操作包括：在所述目标元素的有效显示范围内点击超过第一时间阈值的触屏操作，或者判断所述触发操作是否为预设的触发菜单项。

结合一方面，或第一种可能的实现方式，在第二种可能的实现方式中，所述检测用户对网页中的目标元素的执行动作包括：检测用户对所述目标元素进行旋转，和/或缩放，和/或移动的触屏手势操作，或者检测用户根据预设的菜单项对所述目标元素进行旋转，和/或缩放，和/或移动的操作。

结合一方面，或第一种可能的实现方式，在第三种可能的实现方式中，所述动作参数还包括所述执行动作的事件中心点的坐标；

所述方法还包括：判断所述事件中心点的坐标是否位于所述目标元素的有效显示范围内；当所述事件中心点的坐标位于所述目标元素的有效显示范围内，则执行根据所述动作参数计算所述目标元素的更新样式。

结合一方面，或第一种可能的实现方式，在第四种可能的实现方式中，根据所述动作参数计算所述目标元素的更新样式包括：将所述动作参数转换成CSS标准的transform属性；根据所述转换后的所述transform属性和所述目标元素原有的transform属性计算所述目标元素的更新样式。

另一方面，提供一种网页重排版装置，其特征在于，所述装置包括：

检测单元，用于检测用户对网页中的目标元素的执行动作，所述执行动作包括：旋转，和/或缩放，和/或移动；获取单元，用于根据所述检测单元检测的所述执行动作获取所述执行动作的动作参数，所述动作参数包括：旋转角度，和/或缩放系数，和/或移动的目标位置；计算单元，用于根据所述获取单元获取的所述动作参数计算所述目标元素的更新样式；排版单元，用于根据所述计算单元计算的所述更新样式对所述目标元素在所述网页中进行排版。

结合另一方面，在另一方面的第一种可能的实现方式中，所述装置还包括：检测判断单元，具体用于在所述检测单元检测用户对网页中的目标元素的执行动作之前，检测用户输入的触发操作，并判断所述触发操作是否为预设的触屏操作；

所述预设的触屏操作包括：在所述目标元素的有效显示范围内点击超过第一时间阈值的触屏操作；或者具体用于检测用户输入的触发操作，并判断所述触发操作是否为预设的触发菜单项。

结合另一方面，或另一方面的第一种可能的实现方式，在另一方面的第二种可能的实现方式中，所述检测单元包括：第一检测子单元，用于检测用户对所述目标元素进行旋转，和/或缩放，和/或移动的触屏手势操作；或者第二检测子单元，用于检测用户根据预设的菜单项对所述目标元素进行旋转，和/或缩放，和/或移动的操作。

结合另一方面，或另一方面的第一种可能的实现方式，在另一方面的第三种可能的实现方式中，所述获取单元获取的所述动作参数还包括所述执行动作的事件中心点的坐标；

所述装置还包括：判断单元，用于判断所述事件中心点的坐标是否位于所述目标元素的有效显示范围内；

所述计算单元，具体用于当所述判断单元判断出所述事件中心点的坐标位于所述目标元素的有效显示范围内时，根据所述获取单元获取的所述动作参数计算所述目标元素的更新样式。

结合另一方面，或另一方面的第一种可能的实现方式，在另一方面的第四种可能的实现方式中所述计算单元包括：

转换子单元，用于将所述获取单元获取的所述动作参数转换成CSS标准的transform属性；

计算子单元，用于根据所述转转换子单元换后的所述transform属性和所述目标元素原有的transform属性计算所述目标元素的更新样式。

由以上技术方案可见，本发明实施例提供的网页重排版方法及装置，通过获取用户对网页中的目标元素的执行动作和对应的动作参数，并根据所述动作参数计算所述目标元素在网页中的更新样式，以达到对网页中的目标元素重新排版的目的。本发明的技术方案可以使用户对排版混乱的网页内容自主进行版式调整，而且能适应不同用户的阅读风格，灵活性较好，大大提升了用户的阅读体验。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，对于本领域普通技术人员而言，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1为本发明网页重排版方法的一个实施例的流程示意图；

图2为本发明网页重排版方法的另一个实施例的流程示意图；

图3为本发明实施例重排版之前的网页示意图；

图4为本发明实施例对网页进行重排版的过程示意图；

图5a为本发明实施例重排版之后的网页示意图；

图5b为本发明实施例重排版之后的网页示意图；

图6为本发明实施例网页重排版装置的一个实施例的结构示意图；

图7为本发明实施例网页重排版装置的另一个实施例的结构示意图；

图8为本发明实施例计算单元的结构示意图。

具体实施方式

首先对本发明网页重排版方法的一个实施例进行说明，参见图1，本实施例包括如下步骤：

步骤101：检测用户对网页中的目标元素的执行动作，所述执行动作包括：旋转，和/或缩放，和/或移动。

所述目标元素可以是文字、图片、视频、动画等媒体元素。

步骤102：根据所述执行动作获取所述执行动作的动作参数，所述动作参数包括：旋转角度，和/或缩放系数，和/或移动的目标位置。

步骤103：根据所述动作参数计算所述目标元素的更新样式。

步骤104：根据所述更新样式对所述目标元素在所述网页中进行排版。

所述更新样式包括更新的版式、坐标。

需要说明的是，本实施例以及下文中的本发明网页重排版方法的其他实施例的执行主体可以是网页浏览器本身，或者位于浏览器一侧。

本发明实施例提供的网页重排版方法及装置，通过获取用户对网页中的目标元素的执行动作和对应的动作参数，并根据所述动作参数计算所述目标元素在网页中的更新样式，以达到对网页中的目标元素重新排版的目的。本发明的技术方案可以使用户对排版混乱的网页内容自主进行版式调整，而且能适应不同用户的阅读风格，灵活性较好，大大提升了用户的阅读体验。

参见图2，为本发明网页重排版方法的另一个实施例的流程示意图，本实施例包括如下步骤：

步骤201：检测用户输入的触发操作，判断所述触发操作是否满足预设的触发条件，如果满足，则执行步骤202，否则结束流程。

在默认情况下，本发明的网页重排版的功能关闭，以防止用户阅读时误操作影响正常阅读，只有在用户输入了正确的触发操作时，才开启本发明的功能。

具体的，所述触发操作可以是预设的触屏操作，所述预设的触屏操作包括：在所述目标元素的有效显示范围内点击超过第一时间阈值的触屏操作，即“长按”目标元素的手势动作。以智能触屏终端为例，可以设置满足触发条件的用户触发操作为“长按”网页中的目标图片超过一秒钟，以触发本发明网页重排版的功能。为了更直观起见，该目标图片也可以在“长按”后显现出如阴影或闪动等效果，此处并不是本发明技术方案的重点，因此不做赘述。

可选的，所述预设的触屏操作也可以是其他触屏手势，如在所述目标元素的有效显示范围内连续点击两次的触屏操作，即“双击”目标元素的手势动作，具体的触屏手势形式不加限制。

可选的，所述触发操作也可以是预设的触发菜单项，例如，可增加设置一个“重排版”功能的菜单项，使用户通过点击该菜单项或使用按键选择该菜单项来触发本发明网页重排版的功能。

可以设置上述触屏操作和触发菜单项的两种触发方式中的一种，也可以两种方式同时设置。

步骤202：检测用户对网页中的目标元素的执行动作，所述执行动作包括：旋转，和/或缩放，和/或移动的触屏手势操作。

可选的，用户对网页中的目标元素的执行动作也可以通过预设的菜单项来执行，对应的该步骤202也可以为：检测用户根据预设的菜单项对所述目标元素进行旋转，和/或缩放，和/或移动的操作。

步骤203：根据所述执行动作获取所述执行动作的动作参数，所述动作参数包括：旋转角度，和/或缩放系数，和/或移动的目标位置，以及述执行动作的事件中心点的坐标。

步骤204：判断所述事件中心点的坐标是否位于所述目标元素的有效显示范围内。

当所述事件中心点的坐标位于所述目标元素的有效显示范围内，则执行步骤205，否则返回步骤202，继续检测用户的执行动作。

在本发明的其他实施例中，当所述事件中心点的坐标不在所述目标元素的有效显示范围内时，也可以结束流程。

“事件中心点”指的是在终端设备上对目标元素进行操作产生的中心坐标点，例如利用手指触摸屏幕的触屏操作是一个手指头面积的近似圆形，根据一定的算法，例如在这个近似圆形的区域内去除边缘离散部分，然后做水平和竖直方向的平均等算法。得到一个坐标作为该触屏操作的“事件中心点”。

网页上的每一个元素，无论是一个字，还是一个图片，都有其特定的有效显示范围，如果事件中心点落在这个元素的有效显示范围内，则认为所述执行动作是作用在这个元素中，此时执行步骤205。

步骤205：将所述动作参数转换成CSS标准的transform属性。

将所述动作参数如旋转角度、缩放系数、移动的目标位置转换成标准级联样式表CSS(CascadingStyleSheet)的transform属性，对应为旋转rotate(angle)、缩放scale(x,y)、移动translate(x,y)。CSStransform属性可实现对元素进行旋转、缩放、移动或倾斜skew(angle)，具体用法可参见CSS参考手册，为现有的技术，在此不再赘述。

步骤206：根据所述转换后的所述transform属性和所述目标元素原有的transform属性计算所述目标元素的更新样式。

目标元素本身也有transform属性，用于标识该元素在网页中的位置，将目标元素本身的transform属性与转换后的所述transform属性进行叠加计算，以得到所述目标元素的更新样式，所述更新样式包括更新的版式、坐标。

步骤207：根据所述更新样式对所述目标元素在所述网页中进行排版。

根据所述更新样式将所述目标元素输出在屏幕上，可选的，为了网页排版更加美观，还可以将目标元素进行微调整，例如设置padding属性以调整目标元素的内边距，防止其与其他元素重合、覆盖。也可重复使用本方法对网页进行重排版，直至达到最佳的阅读效果。也就是说，本方案提供的“重排版”功能，是可以多次使用，并且效果可以叠加。例如，先旋转90度，完成重排版后，用户觉得仍然不够美观还可以再旋转45度。那么，总的效果就是图片总共旋转：135度。

下面以一个实际网页为例来说明本方案产生的效果。图3为用户在某论坛上发表的一个帖子，为排版之前的网页示意图，如图3所示的网页示意图中，用户上传了一张随手拍的照片，并附了对照片进行的评论，但本应竖直摆放的照片被横向放置了，照片中的杯子、桌子、人物都是倾斜的，使该帖子的读者在阅读时非常不方便，需要在文字方向和图片方向之间进行调转，才能将照片中的内容和文字所表达的意义对应起来。

此时读者可以使用左手长按文字部分以激发重排版的功能，然后右手食指和拇指一起在图片上做顺时针方向旋转90度(或者使用菜单方式选择对应的触发菜单项)的触屏手势，如图4所示为读者对该网页进行重排版的过程示意图，图中的三角形和四角形分别代表右手的拇指与食指在屏幕上的旋转动作的方向。

如图5a所示为重排版之后的网页示意图，通过执行本方案的功能之后，帖子中的图片被纵向放置，能正常的分辨直立的桌子和坐着的人物，很容易就看到几只开口向上的雪糕杯盒随意的散落在本来井井有条的桌面上，顿时对于帖子文字内容所描述的对不文明现象的心情感同身受。提高了用户对于网页浏览器体验的友好度。图5b为重复使用本发明的方法，再将图片部分缩小到原有的十分之一，从视觉上看使图片与文字的搭配更加协调。

由以上实施例可见，本发明实施例提供的网页重排版方法，首先检测用户输入的触发操作，当所述触发操作满足预设的触发条件时，通过获取用户对网页中的目标元素的执行动作和对应的动作参数，并根据所述动作参数计算所述目标元素在网页中的更新样式，以达到对网页中的目标元素重新排版的目的。本发明的技术方案可以使用户对排版混乱的网页内容自主进行版式调整，而且能适应不同用户的阅读风格，灵活性较好，大大提升了用户的阅读体验。

与本发明网页重排版方法的实施例相对应，本发明还提供了对应的网页重排版装置的实施例。

参见图6，为本发明网页重排版装置的一个实施例的结构示意图。该网页重排版装置具体可以为网页浏览器，或设置在网页浏览器一侧。

该装置包括：检测单元601，用于检测用户对网页中的目标元素的执行动作，所述执行动作包括：旋转，和/或缩放，和/或移动。

获取单元602，用于根据所述检测单元601检测的所述执行动作获取所述执行动作的动作参数，所述动作参数包括：旋转角度，和/或缩放系数，和/或移动的目标位置。

计算单元603，用于根据所述获取单元602获取的所述动作参数计算所述目标元素的更新样式。

排版单元604，用于根据所述计算单元603计算的所述更新样式对所述目标元素在所述网页中进行排版。

可选的，参见图7，所述装置还可以包括：检测判断单元605，用于检测用户输入的触发操作，并判断所述触发操作是否满足预设的触发条件，当所述触发操作是否满足预设的触发条件时，检测单元601执行其功能。

可选的，所述检测判断单元605可以具体用于检测用户输入的触发操作，并判断所述触发操作是否为预设的触屏操作，所述预设的触屏操作包括：在所述目标元素的有效显示范围内点击超过第一时间阈值的触屏操作。

可选的，所述检测判断单元605也可以具体用于检测用户输入的触发操作，并判断所述触发操作是否为预设的触发菜单项。

所述检测单元601可以包括：第一检测子单元，用于检测用户对所述目标元素进行旋转，和/或缩放，和/或移动的触屏手势操作。

可选的，所述检测单元601也可以包括：第二检测子单元，用于检测用户根据预设的菜单项对所述目标元素进行旋转，和/或缩放，和/或移动的操作。

如图7所示，为本发明网页重排版装置的另一个实施例的结构示意图。

优选的，所述获取单元602获取的所述动作参数还包括所述执行动作的事件中心点的坐标。此时所述装置还可以包括，判断单元606。

所述判断单元606，具体用于判断所述事件中心点的坐标是否位于所述目标元素的有效显示范围内。

所述计算单元603，具体用于当所述判断单元606判断出所述事件中心点的坐标位于所述目标元素的有效显示范围内时，根据所述获取单元603获取的所述动作参数计算所述目标元素的更新样式。

如图8所示，为计算单元603的结构示意图，所述计算单元603具体包括：

转换子单元6031，用于将所述获取单元602获取的所述动作参数转换成CSS标准的transform属性。

计算子单元6032，用于根据所述转转换子单元6031换后的所述transform属性和所述目标元素原有的transform属性计算所述目标元素的更新样式。

上述实施例中的装置，其中各个模块单元执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明，相关之处参见方法实施例的部分说明即可。

由以上实施例可见，本发明实施例提供的网页重排版装置，通过获取用户对网页中的目标元素的执行动作和对应的动作参数，并根据所述动作参数计算所述目标元素在网页中的更新样式，以达到对网页中的目标元素重新排版的目的。本发明的技术方案可以使用户对排版混乱的网页内容自主进行版式调整，而且能适应不同用户的阅读风格，灵活性较好，大大提升了用户的阅读体验。

本领域的技术人员可以清楚地了解到本发明实施例中的技术可借助软件加必需的通用硬件的方式来实现，通用硬件包括通用集成电路、通用CPU、通用存储器、通用元器件等，当然也可以通过专用硬件包括专用集成电路、专用CPU、专用存储器、专用元器件等来实现，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明实施例中的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在存储介质中，如只读存储器(ROM，Read-OnlyMemory)、随机存取存储器(RAM，RandomAccessMemory)、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例或者实施例的某些部分所述的方法。

本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于系统实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

以上所述的本发明实施方式，并不构成对本发明保护范围的限定。任何在本发明的精神和原则之内所作的修改、等同替换和改进等，均应包含在本发明的保护范围之内。

Claims (10)

1.一种网页重排版方法，其特征在于，所述方法包括：

检测用户对网页中的目标元素的执行动作，所述执行动作包括：旋转，和/或缩放，和/或移动；

根据所述执行动作获取所述执行动作的动作参数，所述动作参数包括：旋转角度，和/或缩放系数，和/或移动的目标位置；

根据所述动作参数计算所述目标元素的更新样式；

根据所述更新样式对所述目标元素在所述网页中进行排版。

2.根据权利要求1所述的方法，其特征在于，所述方法还包括：

检测用户输入的触发操作，判断所述触发操作是否满足预设的触发条件，如果满足所述预设的触发条件，则执行所述检测用户对网页中的目标元素的执行动作；

所述判断所述触发操作是否满足预设的触发条件，包括：

判断所述触发操作是否为预设的触屏操作，所述预设的触屏操作包括：在所述目标元素的有效显示范围内点击超过第一时间阈值的触屏操作，或者

判断所述触发操作是否为预设的触发菜单项。

3.根据权利要求1或2所述的方法，其特征在于，所述检测用户对网页中的目标元素的执行动作包括：

检测用户对所述目标元素进行旋转，和/或缩放，和/或移动的触屏手势操作，或者

检测用户根据预设的菜单项对所述目标元素进行旋转，和/或缩放，和/或移动的操作。

4.根据权利要求1或2所述的方法，其特征在于，所述动作参数还包括所述执行动作的事件中心点的坐标；

所述方法还包括：判断所述事件中心点的坐标是否位于所述目标元素的有效显示范围内；当所述事件中心点的坐标位于所述目标元素的有效显示范围内，则执行根据所述动作参数计算所述目标元素的更新样式的步骤。

5.根据权利要求1或2所述的方法，其特征在于，根据所述动作参数计算所述目标元素的更新样式包括：

将所述动作参数转换成CSS标准的transform属性；

根据所述转换后的所述transform属性和所述目标元素原有的transform属性计算所述目标元素的更新样式。

6.一种网页重排版装置，其特征在于，所述装置包括：

检测单元，用于检测用户对网页中的目标元素的执行动作，所述执行动作包括：旋转，和/或缩放，和/或移动；

获取单元，用于根据所述检测单元检测的所述执行动作获取所述执行动作的动作参数，所述动作参数包括：旋转角度，和/或缩放系数，和/或移动的目标位置；

计算单元，用于根据所述获取单元获取的所述动作参数计算所述目标元素的更新样式；

排版单元，用于根据所述计算单元计算的所述更新样式对所述目标元素在所述网页中进行排版。

7.根据权利要求6所述的装置，其特征在于，所述装置还包括：

检测判断单元，具体用于在所述检测单元检测用户对网页中的目标元素的执行动作之前，检测用户输入的触发操作，并判断所述触发操作是否为预设的触屏操作，所述预设的触屏操作包括：在所述目标元素的有效显示范围内点击超过第一时间阈值的触屏操作；或者

具体用于检测用户输入的触发操作，并判断所述触发操作是否为预设的触发菜单项。

8.根据权利要求6或7所述的装置，其特征在于，所述检测单元包括：

第一检测子单元，用于检测用户对所述目标元素进行旋转，和/或缩放，和/或移动的触屏手势操作；或者

第二检测子单元，用于检测用户根据预设的菜单项对所述目标元素进行旋转，和/或缩放，和/或移动的操作。

9.根据权利要求6或7所述的装置，其特征在于，所述获取单元获取的所述动作参数还包括所述执行动作的事件中心点的坐标；

所述装置还包括：判断单元，用于判断所述事件中心点的坐标是否位于所述目标元素的有效显示范围内；

所述计算单元，具体用于当所述判断单元判断出所述事件中心点的坐标位于所述目标元素的有效显示范围内时，根据所述获取单元获取的所述动作参数计算所述目标元素的更新样式。

10.根据权利要求6或7所述的装置，其特征在于，所述计算单元包括：

转换子单元，用于将所述获取单元获取的所述动作参数转换成CSS标准的transform属性；

计算子单元，用于根据所述转转换子单元换后的所述transform属性和所述目标元素原有的transform属性计算所述目标元素的更新样式。