基于HTML标准的所见即所得文档编辑器的页面布局方法技术领域
本发明属于基于Web浏览器的“所见即所得”文档编辑领域，涉及一种用HTML实现
所见即所得文档编辑器的页面布局方法和系统。
背景技术
“所见即所得”(WISIWYG)形式的文档编辑是现代计算机的一个重要应用领域。
WISIWYG这一说法最早是由美国喜剧演员Flig Wilson从上世纪60年代末期作为他节目中
的标语开始使用的。70年代初期美国施乐Palo Alto研究中心(PARC)开发的Bravo是最早实
现WISIWYG理念的文档处理软件。这种技术使得用户在视图中所看到文档与该文档的最终
产品具有相同的样式，也允许用户在视图中直接编辑文本、图形、或文档中的其他元素。支
持WISIWYG的系统可以即时向用户提供对文档的各种修改在视觉上的反馈，从而极大地提
高的文档处理系统的可用性和用户的工作效率。 正是因为这样的一些优点，WISIWYG这一
编辑形式逐渐成为现代文档处理系统的一项必备功能。
随着互联网技术的迅速发展，在浏览器中进行在线的文档处理变得越来越流行。
这种方式的优点是可以使用户摆脱客户端的限制，随时随地从任何设备上实现对文档的处
理，从而使文档处理的方便程度得到了前所未有的提高。正是由于这种模式的巨大潜力，近
几年来，各种基于HTML的开源的及商用的WISIWYG在线文档编辑系统大量涌现，成为文档处
理的新潮流。这种系统把传统文档处理系统如Microsoft Word的功能实现在一个Web页中。
该Web页一般包含菜单区、工具条区、文档区等主要部件。文档区按WISIWYG显示文档内容并
请允许用户进行各种修改。
但是HTML语言对于实现真正的WISIWYG来说有着严重的限制。这种语言从设计上
讲是不支持文档内容分页的。因此目前的各种在线文档处理系统或者不支持分页，或者对
页面布局的支持非常不灵活，如每个文档只能有单一的页面格式，而且只能所有页面作为
一个整体只能单列显示而导致不能充分利屏幕空间等。但完善的内容分页显示是实现
WISIWYG的基础。本发明要解决的就是基于HTML为在线文档处理提供一种灵活的文档页面
布局方法。
发明内容
本发明为在浏览器中对文档内容的灵活分页提供了一套完善的基于HTML标准的
方法。该方法可以根据文档内容、文档页面格式说明、及其他参数如文档整体缩放比例、当
前窗口大小等自动生成实现页面布局的HTML代码。在系统实现上，依本发明所述方法所生
成的布局代码可以动态地嵌入在基于浏览器的编辑器框架中，成为基于浏览器的所见即所
得文档编辑系统的一个核心功能部件。
为达到上述目标，本发明所采取的主要技术方案如下：
一套基于HTML标签的文档内容的表示方法。需要特别强调的是，对于基于浏览器的文
档编辑系统而言，编辑系统本身是用一个Web页面实现的。此Web页面一般包括描述编辑系
统功能部件，如菜单、工具栏等布局的 HTML代码、实现动态交互功能的JavaScript代码等。
文档内容是编辑系统所要处理的对象。文档内容从类型上讲可以有文本以及图片、音频、和
视频等多媒体内容。本发明主要利用HTML标准中的标签<p>、<img>、<audio>、<video>来表
示文档内容。从格式上讲，文本可以有字体、段落等属性。这些属性可以用<p>标签的style
属性进行指定、或用class属性指定相应的CSS格式定义。虽然本发明所述方法尽量避免使
用HTML中指定文本格式的标签如<strong>、<b>、<i>、<u>等，但也不排除某些实现可能会用
到这些标签。图片的格式可以<img>标签的各种属性来指定。从布局上讲，各类文档内容可
以分成不同的节（<section>，<header>，<footer>）、列表（<ul>，<ol>，<li>）、表格（<table
>，<tbody>，<tr>，<td>，）。这些标签组合在一起构成了本发明文档内容说明规范的基础。不
同的实现可能会有所增减。不同的文档也可能只用到其中的一部分标签。
图1给出了用此方法表示的文档内容的一个例子。这一文档表示方法的主要成分
可以形式化描述如下（此处省略了一些更为细节但含义明确的定义如StringLiteral，URL，
TextAttribute等）：
Document ::= {Section}
Section ::= "<section" SectionAttribute ">"
[Header] [Footer] {SectionContent}"</section>"
Header ::= "<header>" Content "</header>"
Footer ::= "<footer>" Content "</footer>"
Content ::= Text | Image | Audio | Video | Table |
OrderedList | UnorderedList
Text ::= "<p" TextAttribute ">" StringLiteral "</p>"
Image ::= "<img src='" URL ImageAttribute "/>"
Audio ::= "<audio src='" URL AudioAttribute "/>"
StringLiteral "</audio>"
Video ::= "<video src='" URL VideoAttribute ">"
StringLiteral "</video>"
UnorderedList::= "<ul" UnorderedListAttribute ">" ListItem "</ul>"
OrderedList::= "<ol" OrderedListAttribute ">" ListItem "</ol>"
ListItem ::= "<li>" Content "</li>"
Table ::= "<table" TableAttribute ">" TableBody "</table>"
TableBody ::= "<tbody>" {TableRow} "</tbody>" | {TableRow}
TableRow ::= "<tr" RowAttribute ">" {TableCell} "</tr>"
TableCell ::= "<td" CellAttribute ">" {Content} "</td>"。
一套基于HTML扩展机制的页面格式表示方法。页面格式主要包含页面大小、方
向、上下左右页边距等。页面大小可以用标准页面大小代码指定，如A4, 16开，US-Letter
等，也可以用具体的尺寸，如25cm x 20cm等。页面方向可以是横向（Landscape）或纵向
（Portrait）。页面边距可以统一指定，如2.5cm，也可以上下左右分开指定。一种可能的实现
方式是将页面格式作为<section>标签的一个扩展属性如data-page-format指定。此属性
的内容可以是一个包含如下关键字值的JSON对象：
{
size: "16开",
margin : "25mm",
orientation: "纵向"
}。
另外一种实现方式是将所有section的页面格式用一个JSON对象统一指定。图2给
出了这种方式的一个例子。此对象可以作为包含所有section的父标签（如图1中的<div>）
的一个扩展属性。
一套基于HTML<table>标签对象的页面布局控制结构。在文档内容和页面格式确
定之后，文档编辑器的一个主要任务是将内容分成不同的页面展示出来。除了内容本身和
页面格式之外，影响展示结果的其他因素还包括屏幕的可用尺寸及页面的缩放比例。图3显
示了按图2指定页面格式图1中文档内容在一定屏幕大小及缩放比例下的实际页面布局效
果。图4中的DOM结构显示了实现这一布局的HTML代码。布局的基本思路是将多个宽度为文
档区宽度的<table>对象填充到屏幕的文档区中。
每一个这样的<table>对象都只有一行。该行至少有三个列，其中第一列和最后一
列为填充列，其余列均为文档页面容器。页面的内容被包在一个表示页面边框的结构中（在
图4中这个结构是用两个<div>标签实现的）。每一行的列数和填充列的宽度是根据文档区
宽度，分配到该行中的页面总宽度（在当前缩放比例下）动态决定的。表格的高度则由该行
的最大页面高度决定。<table>对象的总个数取决于页面的内容及页面格式。
按照这一设计，文档编辑器可以灵活地调整页面布局。例如浏览器窗口变大或缩
放比例变小时，我们可以在一行上显示多个页面，从而达到更充分地利用屏幕空间、从更宏
观角度浏览处理文档等目标。同时也可以突破现有基于浏览器的文档编辑系统或者不能支
持分页，或者只支持单一页面大小的局限。
附图说明
图1用HTML表示文档内容示例（DOM树结构）。
图2 JSON格式的页面布局说明示例。
图3文档分页布局效果示例。
图4实现文档分页布局效果的HTML DOM结构示例。
图5根据文档内容及页面格式说明在浏览器中进行文档页面的布局。
具体实施方式
本发明所述的方法可以用于实现基于浏览器的文档编辑器的页面布局引擎。本节
给出多种可能的实现方式中一些可能的选择及技术细节。这类编辑器一般将文档内容存在
云端的服务器上。在编辑器中打开文档时，这些内容将会被动态下载到浏览器。根据不同的
实现。下载可以是分步的，也可以是一次性的。文档内容可以缓存在本地，但最终会被存回
云端。文档内容被下载到浏览器后一般会被放到实现编辑器的Web页面某个我们称之为“容
器”的DOM树节点下。图1中最顶层的<div>签就是这样的一个容器节点。容器节点一般会被
隐藏。不同的实现可能会用不同类型的标签作为容器，甚至可以将文档内容作为某个标签
的扩展属性或数据。
类似地，页面格式说明也可以在打开文档时动态加载。说明数据的格式可以采用
HTML、JSON、XML等标准，以方便在浏览器中进行处理。当然也可以用其他自定义格式，此时
需要实现解析这些数据的代码。对于说明数据的存储可以根据其格式将其作为编辑器DOM
树上一个隐藏的节点，或者是作为某个节点的扩展数据或属性。
在完成文档内容及页面格式数据的加载后，编辑器的主要工作将是根据当前文档
内容区的屏幕大小、文档的缩放比例、页面格式说明，生成相应的页面布局控制结构。在浏
览器中，一种实现此控制结构的方法是利用如图4所示的<table>标签结构。如前所述，每一
个这样的<table>对象的一行至少包含三列。第一列和最后一列是两个填充列。中间其他列
是页面内容的容器。每个控制结构<table>对象可以包含一个或多个这样的行。整个文档的
编辑区将包含多个这样的控制结构。
图 5描述了基于本发明的布局引擎如何将页面内容分配到到各页面中的一些主
要步骤。布局引擎的主要工作是，对文档中的每一个节 <section>，根据其页面大小说明及
当前缩放比例生成一个容器<td>结构，如果当前页面控制结构<table>对象当前行的剩余
宽度大于此容器的宽度，或者当前行中还没有加入任何页面容器，则将此页面容器插入 到
当前行最右列的左边，然后将当前节中的未布局的内容依次填入当前的页面容器，直至可
能会产生溢出。溢出时可以有几种处理方法，如可以将产生溢出的那部分内容放到下一页，
也可以将这部分内容（如一个段落或表格）进行拆分，使当前窗口的空间得到充分利用。不
同的实现可以用不同的方法计算溢出何时发生。
在此过程中，如果将当前页面容器的加入当前控制结构会导致其宽度超过文档区
的宽度，此时布局引擎需要将此页面容器放入到下一个控制结构<table>中。此时可以需要
计算当前页面控制结构<table>的两个填充列的宽度，以完成当前页面控制结构的设置。用
多个<table>对象作为控制结构的优点是每一个控制结构是独立的，从而可以避免因单个<
table>对象的多行中列数或列宽度不同而带来的复杂设置。
在初始布局完成之后，随着在页面中的不同位置进行内容的增删和修改，可能需
要将某些内容从一个页面容器中移到另外一个容器中。同时，布局引擎可能需要创建新的
页面容器，也可能需要删除掉一些页面容器。在这些调整之后可以用如上述类似的方法将
页面容器重新布置在页面控制结构<table>中。此过程可能会导致创建新的页面控制结构
或清除不再需要的页面控制结构。