CSS3区域：利用HTML和CSS3构建的富页面布局

vingoo

网站已经变成一个储存参考和教育资料、新闻、文章和互动应用程序的内容的丰富宝库。 然而，一些在设计打印内容时被认为是理所当然的功能目前仍不能或难以使用web标准实现。

打印出版物正在探索更佳的方法以便将它们的内容转换和改变为一种富数字格式。 我们将这看作是一个能够使得web更富于表现力和支持更完善布局的机会。

Adobe 已经验证利用一些CSS增强功能来表示传统杂志使用的复杂布局类型。 我们已经提交若干建议给 W3C CSS工作组（Working Group），并且已经使用WebKit创建一个实现这些建议的原型。 你可以从Adobe Labs中下载该原型，然后对其进行验证。 你可以在 CSS Regions Module 中找到W3C的编者草案，并且在W3C网站中找到 CSS Exclusions Module 页面。 关于这些建议的讨论的信息，请查阅W3C CSS 邮件列表。 欢迎你给该公共邮件列表发送评论。 请在你的邮件消息的主题中包含 "[css3-regions]"或 "[css3-exclusions]"。

你也可以给我们发送关于基于 WebKit的原型以及我们在Adobe Labs的CSS Regions forum中的范例的反馈。

警告： 这是一项正在进行的工作。 随着我们与更广泛的社区进行讨论，我们将作若干更改。 本文使用的句法反映了当前W3C的编者草案的状态，但它可能会随着在W3C CSS 工作组中的讨论以及与更广泛的社区的讨论的继续进行而不断演化。 此外，还必须注意，依据惯例，应该在我们的WebKit原型中给所有新建议的属性添加"-webkit-" 前缀。 为了简洁起见，我已经在本文的后面剩余部分省略了该前缀。

现在，让我们输入探讨一下建议的扩展功能。 它们可以划分为4个类别：

• 线程内容（Threading content）: 从一个区域流向另一个区域的内容。
• 任意形状容器（Arbitrarily shaped containers）: 在非矩形区域显示的文本
• 任意形状非操作（Arbitrarily shaped exclusions）: 包围任意形状的文本
• 区域式样（Region styling）:基于内容充满区域的式样内容。
  

下面是每个类别的若干简单范例。

内容流

在典型的HTML文档中，文本可以在多个区域显示，但每个区域中的文本是独立的（参见图1）。 如果你希望显示跨多个栏的文本，或使用其它更为复杂的区域安排，你必须在每个区域人工调整文本。 当用户放大文本时，或即使他们在他们的系统中具有与你指定的字体不同的字体，上述方式效果不佳。 另外，当窗口的尺寸变化时，或当平板电脑的显示内容适应纵向和横向调整时，该方式也不能适应易变布局的变化。

图1. 跨三个具有不同宽度的栏显示的文本

如果你能够独立地指定一个线程内容（例如文本和图像），将会怎么样呢？并且该线程是如何跨若干区域流动的呢？ 这就是内容流需要实现的功能。

为了使用内容流，你可以通过对包含相应内容的区域使用建议的flow CSS 属性为一个线程赋予一个名称。 这样做可以从正常的CSS布局流中删除相应的内容。 然后，通过将from()函数用作content属性的值，你可以将该线程插入到一个或多个其它区域。

上述三栏范例的标记语言如下所示：

CSS

    #source {       flow: "main-thread";    }        .region {        content: from(main-thread);        background: #C5DFF0;    }

HTML

            Lorem ipsum dolor [...]
   
   
   
   

你可以在一个单一页面对多个具有名称的流进行合并。 你也能够以显式的方式控制显示顺序，而文本将使用content-order 属性根据这一顺序进行流动。 如果没有指定顺序，则使用正常的文档顺序。

利用这一简单的构建块，你可以表示更多复杂布局，包括多栏文本、具有不同宽度和高度的栏，以及横跨多栏的区域（参见图2）。

图2. 跨层叠区域和栏的文本流动

包围形状

利用包围形状功能（wrap shape），你可以控制文本流动区域的形状（参见图3）。 你可以与内容流一起或与内容流独立地使用这一属性来创建更加有趣的设计。

图 3. 在自定义形状中流动的文本内容

当使用这一功能时，你必须使用wrap-shape属性定义其自己的形状并且将wrap-shape-mode 属性设置为期望值。 通过指定content的值，该文本将能够在该形状内部显示。

能够显示上面的心型文本的标记语言如下所示：

CSS

.circle{        /* shape the element as a circle */        wrap-shape: polygon(0px, 150px /* ...more points */);        wrap-shape-mode: content;   }.heart{        /* shape the element as a heart */        wrap-shape: polygon(150px, 32px /* ...more points */);          wrap-shape-mode: content;   }

HTML

我们的基于WebKit原型支持使用一个简单多边形定义一个形状，但你可以设想其它几何原语也能够用于指定形状，或甚至使用图像的alpha值。 目前W3C工作组正在讨论这一理念。

非操作

通过使用不同的wrap-shape-mode属性值，你可以创建不同的效果，包括指定 wrap-shape 属性应该解释为一个完全回避的区域 （参见图4）。

图 4. 围绕自定义形状流动的文本内容

CSS

    .exclusion{        /* flow text around this element */        wrap-shape-mode: around;    }

HTML

            Lorem ipsum dolor [...]
   


区域式样

在杂志文章中为通过一个设计的特定区域显示的内容指派一种不同的式样是目前典型的作法。 我们称之为区域式样方式。 从该范例可以看出，在第一个区域显示的文本（包括"Introduction" 标题）是深蓝色，而文本的其它部分是灰色（参见图5）。

图5. 文本式样取决于它显示的区域

CSS

   p {       color: gray:   }   @region-style #region_1 {       p {           color: #0C3D5F;       }   }

HTML

            Introduction        This is an example [...]
   
   
   
   
   

区域式样功能目前仍未在Adobe Labs的WebKit原型中实现。

CSS3区域和媒体查询

这些基本的构建块能够进行组合以便创建更有趣和复杂的布局，这些布局与你平常在打印出版物看到的布局相似。 你也可以将这些布局与其它web标准进行组合。 例如，通过与CSS媒体查询一起使用这些功能，你可以创建能够适用于设备的不同方位（纵向和横向）的布局。

图6展示了与CSS3媒体查询一起使用wrap-shape属性以创建一个适用于不同设备方位的布局。

图6. 与CSS3媒体查询一起使用wrap-shape属性以创建一个适用于不同设备方位的布局。

图7展示了如何能够制作相同内容以适用于设备不同方位，包括改变栏的数量。

图 7. 适用于设备不同方位的制作内容，包括改变栏的数量


CSS3区域和JavaScript

你也可以将这些功能与JavaScript结合以创建互动内容。 在图8给出的范例中，你可以滑动双向箭头来摇动图像以便展现图像更多画面。 当你滑动该图像时，文本将围绕山峰和小汽车的形状进行重新显示。

图8. 你可以滑动双向箭头来摇动图像以便展现图像更多画面-文本将围绕山峰和小汽车的形状进行重新显示

该范例包含于你从Adobe Labs中下载的原型中。 我建议你下载它并且自己对其验证一下。 我真地期盼看到你将受到启发并且利用我们的方案构建的创造性，此外，我还期盼与你合作创建一个更佳的web世界。