CN109783792A - 图文排版方法及装置 - Google Patents

Abstract

本发明实施例提供一种图文排版方法及装置，属于页面处理技术领域。该方法包括：获取在网页页面中的HTML5编辑器内编辑的图文内容；基于预设的图文处理逻辑，对图文内容进行处理；基于处理后的图文内容，输出排版后的图文文件。由于是基于HTML5编辑器，而不用依赖于PC端，并可以在任何终端进行图文排版，从而使得图文排版***的兼容性更高。另外，由于HTML5相较于传统SVG文件，编辑功能更为强大且更加易用，从而使得图文排版***的可拓展性及编辑效率越高。

Description

图文排版方法及装置

技术领域

本发明实施例涉及页面处理技术领域，尤其涉及一种图文排版方法及装置。

背景技术

文字广告是以文字形式向公众介绍商品、宣传服务、告知文体活动等的一种传播方式。文字广告可以是单独的，也可以是与音像广告、招牌广告、橱窗广告、模型广告等物像广告并用。文字广告具有布局灵活、短小精干和费用低廉的特点，在出版物中，一般都有大量的文字广告。在相关技术中，主要是基于SVG(Scalable Vector Graphics，可缩放矢量图形)对文字广告进行设计，也即通过对SVG文件中的内容进行微调，从而达到文字广告细节的调整。由于上述过程比较依赖于SVG文件，而SVG文件比较复杂，从而文字排版效率比较低。

发明内容

为了解决上述问题，本发明实施例提供一种克服上述问题或者至少部分地解决上述问题的图文排版方法及装置。

根据本发明实施例的第一方面，提供了一种图文排版方法，包括：

获取在网页页面中的HTML5编辑器内编辑的图文内容；

基于预设的图文处理逻辑，对图文内容进行处理；

基于处理后的图文内容，输出排版后的图文文件。

本发明实施例提供的方法，通过获取在网页页面中的HTML5编辑器内编辑的图文内容。基于预设的图文处理逻辑，对图文内容进行处理。基于处理后的图文内容，输出排版后的图文文件。由于是基于HTML5编辑器，而不用依赖于PC端，并可以在任何终端进行图文排版，从而使得图文排版***的兼容性更高。另外，由于HTML5相较于传统SVG文件，编辑功能更为强大且更加易用，从而使得图文排版***的可拓展性及编辑效率越高。

根据本发明实施例的第二方面，提供了一种图文排版装置，包括：

获取模块，用于获取在网页页面中的HTML5编辑器内编辑的图文内容；

处理模块，用于基于预设的图文处理逻辑，对图文内容进行处理；

输出模块，用于基于处理后的图文内容，输出排版后的图文文件。

根据本发明实施例的第三方面，提供了一种电子设备，包括：

至少一个处理器；以及

与处理器通信连接的至少一个存储器，其中：

存储器存储有可被处理器执行的程序指令，处理器调用程序指令能够执行第一方面的各种可能的实现方式中任一种可能的实现方式所提供的图文排版方法。

根据本发明的第四方面，提供了一种非暂态计算机可读存储介质，非暂态计算机可读存储介质存储计算机指令，计算机指令使计算机执行第一方面的各种可能的实现方式中任一种可能的实现方式所提供的图文排版方法。

应当理解的是，以上的一般描述和后文的细节描述是示例性和解释性的，并不能限制本发明实施例。

附图说明

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

图1为本发明实施例提供的一种图文排版方法的流程示意图；

图2为本发明实施例提供的一种图文排版装置的结构示意图；

图3为本发明实施例提供的一种电子设备的框图。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

文字广告是以文字形式向公众介绍商品、宣传服务、告知文体活动等的一种传播方式。文字广告可以是单独的，也可以是与音像广告、招牌广告、橱窗广告、模型广告等物像广告并用。文字广告具有布局灵活、短小精干和费用低廉的特点，在出版物中，一般都有大量的文字广告。在相关技术中，主要是基于SVG(Scalable Vector Graphics，可缩放矢量图形)对文字广告进行设计，也即通过对SVG文件中的内容进行微调，从而达到文字广告细节的调整。由于上述过程比较依赖于SVG文件，而SVG文件比较复杂，从而文字排版效率比较低。另外，SVG文件至少还有如下缺陷：

(1)文字不支持换行，需要用多个文字块来模拟；

(2)文字字符间距不可通过样式直接设定，需要计算每个字符的x或y坐标，每次变动位置或文字长度都要重新计算；

(3)文字与边框适应不方便，需要人工维持；

(4)文字框编辑状态需要人工模拟；

(5)定位方式不统一，有些标签采用xy属性进行定位，有些只能用matrix进行定位；

(6)横排文字默认根据基线定位，若要上或下对齐需要进行转换(不同字体不同字号转换偏差不同)；

(7)纵排文字不同浏览器中定位方式不同，若要左或右对齐需要转换(不同字体不同字号转换偏差不同)；

(8)非常依赖现有C/S架构软件输出是SVG文件内容；

(9)基于SVG文件的文字广告***局限于PC端，不能跨平台生成图文文件，如PDF文件。

针对上述情形，本发明实施例提供了一种图文排版方法。参见图1，该方法包括：

101、获取在网页页面中的HTML5编辑器内编辑的图文内容。

由于是在网页页面中的HTML5编辑器实现图文内容的编辑，而网页页面是需要通过浏览器打开，从而编辑器的操作界面需要支持不同的浏览器。例如，操作界面可以支持Firefox，而若最终输出的是PDF文件且用到了Chrome浏览器的引擎，从而操作界面还需要支持Chrome。其中，竖排Firefox默认靠左，Chrome默认靠右，从而可设置left属性，也即增加left:0来进行统一。还需要说明的是，像素精度可采用浏览器支持的精度，即整数位数与小数位数加起来不超过6位。单位统一使用毫米mm作为单位，不能出现像素px等相对单位，之后根据需求也可能会出现其它物理单位。

102、基于预设的图文处理逻辑，对图文内容进行处理。

这里图文处理逻辑，主要是包括文字图形的排版方式以及文字的变换方式。具体地，可基于HTML5设置的各项标签，对图文内容进行编辑。由于HTML5中不能对文字图形进行变换，如旋转之类的，从而需要加入预设的图文处理逻辑，以对图文内容进行变换。

103、基于处理后的图文内容，输出排版后的图文文件。

在得到处理后的图文内容后，可得到相关的HTML文件。最后基于相关的HTML文件，可输出排版后的图文文件。其中，图文文件格式可以为PDF文件，本发明实施例对此不作具体限定。需要说明的是，HTML文件可以不是完整的HTML文件，只需要有必要的标签内容即可，如至少一对div标签，本发明实施例对此也不作具体限定。

本发明实施例提供的方法，通过获取在网页页面中的HTML5编辑器内编辑的图文内容。基于预设的图文处理逻辑，对图文内容进行处理。基于处理后的图文内容，输出排版后的图文文件。由于是基于HTML5编辑器，而不用依赖于PC端，并可以在任何终端进行图文排版，从而使得图文排版***的兼容性更高。另外，由于HTML5相较于传统SVG文件，编辑功能更为强大且更加易用，从而使得图文排版***的可拓展性及编辑效率越高。

基于上述实施例的内容，作为一种可选实施例，图文内容至少由小组、文字块及图形块组成；文字块及图形块作为小组的子节点。其中，小组、文字块及图形块均可以通过标签进行表示，从而文字块及图形块对应的标签可被包含在小组对应的标签内，也即使得文字块及图形块作为小组的子节点。需要说明的是，由于在HTML5编辑器内编辑图文内容时，对应生成的HTML文件，其配置的css文件与HTML5编辑器的样式相对应，从而该css文件可以不作修改，也可以不用自定义新的css。基于上述实施例的内容，作为一种可选实施例，文字块及图形块均使用div标签进行定义，并使用style定义样式信息。

其中，文字块可以<div class＝"blkText"style＝"xxx">...</div>的形式出现。如果为纵排，则可以加上vertical类。如果为固定尺寸，则可以加上sizeFixed类，并设置width和height。其它样式可以在style中设定，并可需遵循以下规范。具体地，由于位移参数不支持带单位，从而transform可以不合并为matrix。由于left和top定位在拖动时效果不好，从而可采用translate定位。transform需要注意顺序，translate->rotate->skew->scale，否则表现可能不如预期。针对一行中的局部文字样式，包括纵中横，均可以采用span标签来实现，如<span style＝"text-combine-upright:all；">xxx</span>。

图形块blkGraphic可以<div class＝"blkGraphic"style＝"xxx">...</div>的形式出现，图形块可具体包括矩形和线两种图形。需要说明的是，为了突破浏览器对div边框的1px限制，可将宽高和边框数值都放大5倍，整体再缩小到5分之一，即scale(0.2)，从而突破限制。矩形可以有width和height属性，而线可以有width属性，线可以采用border-bottom来表现。另外，在HTML5编辑器内编辑图文内容时，data-line-spacing可以作为DOM的属性存在，而不放在style属性中。生成的html不需要是一个完整的html，只需要至少包含<div class＝"smallGroup"...>...</div>即可。

还需要说明的是，文字块可以是尺寸随意的，而非固定尺寸，从而可提高灵活性，本发明实施例对此不作具体限定。另外，不可见的图形块可以不必生成，避免后续不可见的图形块覆盖住文字块，从而导致需要将不可见的图形块拖到一边，才能对文字块进行操作。

目前图文对齐方式会造成对齐功能失效(margin-left造成左对齐失效，margin-right造成右对齐失效)，以及FireFox下编辑状态的红色指示框显示错误。针对上述情形，基于上述实施例的内容，作为一种可选实施例，本发明实施例不对基于预设的图文处理逻辑，对图文内容进行处理的方式作具体限定，包括但不限于：通过在文字块中的文字或者图形块中的图形前面增加空格，以使得文字块中的文字与图形块中的图形对齐。

基于上述实施例的内容，作为一种可选实施例，本发明实施例不对基于预设的图文处理逻辑，对图文内容进行处理的方式作具体限定，包括但不限于：通过将文字块与图形块的边框缩小或者将文字块及图形块居中显示，以使得文字块中的文字与图形块中的图形对齐。

由于一段文字应该尽量连续，尽量避免分割，但为了对文字进行变换，可将文字拆块，从而对文字本身进行变换。基于上述实施例的内容，作为一种可选实施例，本发明实施例不对基于预设的图文处理逻辑，对图文内容进行处理的方式作具体限定，包括但不限于：通过对文字块中每一文字进行逐一分割，将逐一分割后得到的文字单元进行字形变换，字形变换至少包括以下四种方式中的任意一种方式，以下四种方式分别为平体变换、长体变换、旋转变换及倾斜变换。

基于上述实施例的内容，本发明实施例提供了一种图文排版装置，该装置用于执行上述方法实施例中提供的图文排版方法。参见图2，该装置包括：获取模块201、处理模块202及输出模块203；其中，

获取模块201，用于获取在网页页面中的HTML5编辑器内编辑的图文内容；处理模块202，用于基于预设的图文处理逻辑，对图文内容进行处理；输出模块203，用于基于处理后的图文内容，输出排版后的图文文件。

基于上述实施例的内容，作为一种可选实施例，图文内容至少由小组、文字块及图形块组成；文字块及图形块作为小组的子节点。

基于上述实施例的内容，作为一种可选实施例，文字块及图形块均使用div标签进行定义，并使用style定义样式信息。

基于上述实施例的内容，作为一种可选实施例，处理模块202，用于通过在文字块中的文字或者图形块中的图形前面增加空格，以使得文字块中的文字与图形块中的图形对齐。

基于上述实施例的内容，作为一种可选实施例，处理模块202，用于通过将文字块与图形块的边框缩小或者将文字块及图形块居中显示，以使得文字块中的文字与图形块中的图形对齐。

基于上述实施例的内容，作为一种可选实施例，处理模块202，用于通过对文字块中每一文字进行逐一分割，将逐一分割后得到的文字单元进行字形变换，字形变换至少包括以下四种方式中的任意一种方式，以下四种方式分别为平体变换、长体变换、旋转变换及倾斜变换。

本发明实施例提供的装置，通过获取在网页页面中的HTML5编辑器内编辑的图文内容。基于预设的图文处理逻辑，对图文内容进行处理。基于处理后的图文内容，输出排版后的图文文件。由于是基于HTML5编辑器，而不用依赖于PC端，并可以在任何终端进行图文排版，从而使得图文排版***的兼容性更高。另外，由于HTML5相较于传统SVG文件，编辑功能更为强大且更加易用，从而使得图文排版***的可拓展性及编辑效率越高。

图3示例了一种电子设备的实体结构示意图，如图3所示，该电子设备可以包括：处理器(processor)310、通信接口(Communications Interface)320、存储器(memory)330和通信总线330，其中，处理器310，通信接口320，存储器330通过通信总线330完成相互间的通信。处理器310可以调用存储器330中的逻辑指令，以执行如下方法：获取在网页页面中的HTML5编辑器内编辑的图文内容；基于预设的图文处理逻辑，对图文内容进行处理；基于处理后的图文内容，输出排版后的图文文件。

此外，上述的存储器330中的逻辑指令可以通过软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，电子设备，或者网络设备等)执行本发明各个实施例方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。

本发明实施例还提供一种非暂态计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现以执行上述各实施例提供的方法，例如包括：获取在网页页面中的HTML5编辑器内编辑的图文内容；基于预设的图文处理逻辑，对图文内容进行处理；基于处理后的图文内容，输出排版后的图文文件。

以上所描述的装置实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性的劳动的情况下，即可以理解并实施。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到各实施方式可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件。基于这样的理解，上述技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在计算机可读存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行各个实施例或者实施例的某些部分所述的方法。

最后应说明的是：以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。

Claims (9)

1.一种图文排版方法，其特征在于，包括：

获取在网页页面中的HTML5编辑器内编辑的图文内容；

基于预设的图文处理逻辑，对所述图文内容进行处理；

基于处理后的图文内容，输出排版后的图文文件。

2.根据权利要求1所述的方法，其特征在于，所述图文内容至少由小组、文字块及图形块组成；所述文字块及所述图形块作为所述小组的子节点。

3.根据权利要求2所述的方法，其特征在于，所述文字块及所述图形块均使用div标签进行定义，并使用style定义样式信息。

4.根据权利要求2所述的方法，其特征在于，所述基于预设的图文处理逻辑，对所述图文内容进行处理，包括：

通过在所述文字块中的文字或者所述图形块中的图形前面增加空格，以使得所述文字块中的文字与所述图形块中的图形对齐。

5.根据权利要求2所述的方法，其特征在于，所述基于预设的图文处理逻辑，对所述图文内容进行处理，包括：

通过将所述文字块与所述图形块的边框缩小或者将所述文字块及所述图形块居中显示，以使得所述文字块中的文字与所述图形块中的图形对齐。

6.根据权利要求2所述的方法，其特征在于，所述基于预设的图文处理逻辑，对所述图文内容进行处理，包括：

通过对文字块中每一文字进行逐一分割，将逐一分割后得到的文字单元进行字形变换，所述字形变换至少包括以下四种方式中的任意一种方式，所述以下四种方式分别为平体变换、长体变换、旋转变换及倾斜变换。

7.一种图文排版装置，其特征在于，包括：

获取模块，用于获取在网页页面中的HTML5编辑器内编辑的图文内容；

处理模块，用于基于预设的图文处理逻辑，对所述图文内容进行处理；

输出模块，用于基于处理后的图文内容，输出排版后的图文文件。

8.一种电子设备，其特征在于，包括：

至少一个处理器；以及

与所述处理器通信连接的至少一个存储器，其中：

所述存储器存储有可被所述处理器执行的程序指令，所述处理器调用所述程序指令能够执行如权利要求1至6任一所述的方法。

9.一种非暂态计算机可读存储介质，其特征在于，所述非暂态计算机可读存储介质存储计算机指令，所述计算机指令使所述计算机执行如权利要求1至6任一所述的方法。