CSS3 Region：基于HTML和CSS3的富页面布局

红太狼 2022-08-06 15:29 66阅读 0赞

http://www.qianduan.net/css-regions.html

互联网已经成为一个提供参考、教材、新闻、文章和交互应用的大宝库了。然而，当为印刷设计内容时，一些功能显然仍然不可能或者很难使用Web标准来实现。

印刷出版物正在探索更好的方法来转换或者改变他们的内容以适应富数字格式。我们也看到这是一个让网页更富于表现和支持更复杂布局的好机会。

Adobe通过增强CSS进行了一些实验来展示一些传统杂志使用的复杂布局。我们也提交了一些建议到W3C CSS工作组，并构建了一个原型来通过webkit实现这些提案。你可以从[Adobe Labs][]下载这些原型体验下。 然后你也可以在[CSS Regions Module][]和这个W3C网站上的[CSS Exclusions Module][] 页面找到W3C编写的草案。你也可以订阅[W3C CSS 邮件列表][W3C CSS]来讨论这个问题。欢迎在邮件标题中加入”\[css3-regions\]”或者”\[css3-exclusions\]”来在这个邮件组中讨论这个问题。当然也可以通过Adobe Labs的[CSS Regions 论坛][CSS Regions]反馈问题。

一些说明: 这是个在进行中的工作。随着我们和广大社区的讨论，我们将会做些改变。本文中用到的语法反映出当前W3C草案的现状，但是随着W3C工作组和社区的探讨可能会有些进化。同时也请注意，按照惯例，所有的新的数学将会首先采用-webkit-前缀。不过，为了简化，我在本文中省去了这个前缀。

现在，让我们了解这个扩展吧，他们可以被分为4类:

*  线性内容(Threading content): 从一个区域“流向”另一个区域的内容。
 *  任意形状的容器(Arbitrarily shaped containers): 在非矩形区域内显示文本。
 *  任意形状环绕(Arbitrarily shaped exclusion): 文本环绕非矩形区域。
 *  区域样式(Region styling):根据流向区域显示内容。

下面是各种分类的例子：

### 内容流(Content flow) ###

在典型的HTML文档中，文字可以在多个区域显示，但是每个区域中的文字是不相关的(见图1)。如果你想要跨多个列显示文本，或者使用别的你需要的更复杂的区域来手动。在用户放大文字或者用户的字体比你设定的字体大时，这可能会无法乱掉。这个方法(css3 region)同样是的拥有在缩放窗口是自适应的流体布局成为可能，或者，当显示在平板上时，自适应竖屏(portrait)或者横屏(landscape)显示。

![文字跨3个不同宽的列显示][3]

![文字跨3个不同宽的列显示][3 1]

图1.文字跨3个不同宽的列显示

如果你想要单独地指定一托内容(比如文字和图片)，那些内容如何在一串区域内显示(flow)呢？这正是内容流(content flow)要做的。

要使用它，通过flow属性赋予内容的容器一个名字，这样做会将内容从普通的CSS布局流中去掉，然后你可以插入这个线程到1个或多个其他区域——使用`from()`作为`content`属性的值。

上面的三列布局的代码如下：

CSS

HTML

<table style="border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgb(237,237,237); border-collapse:collapse; border-spacing:0px; font-size:14px; line-height:2; margin:0px 0px 20px; width:580px"> 
 <tbody style=""> 
 <tr style=""> 
 <td style="border-top-width:1px; border-top-style:solid; border-top-color:rgb(237,237,237); padding:0.5em 1em"> <pre style="font-size:14px; background-color:rgb(245,245,245); color:rgb(102,102,102); margin-top:20px; margin-bottom:20px; overflow:auto; padding:20px; white-space:pre-wrap; word-wrap:break-word">1
2
3
4
5
6
7
</pre> </td> 
 <td style="border-top-width:1px; border-top-style:solid; border-top-color:rgb(237,237,237); padding:0.5em 1em"> <pre><code> &lt;div id="source"&gt;
	&lt;p&gt;Lorem ipsum dolor [...]&lt;/p&gt;
&lt;/div&gt;
&nbsp;
&lt;div id="region1" class="region"&gt;&lt;/div&gt;
&lt;div id="region2" class="region"&gt;&lt;/div&gt;
&lt;div id="region3" class="region"&gt;&lt;/div&gt;</code></pre> </td> 
 </tr> 
 </tbody> 
</table>

你可以在一个页面中联合多个命名的flow。你也可以使用content-order属性来控制文字流的顺序。如果没有指定，将会使用正常的文档顺序。

通过这个简单的构件，你可以实现更复杂的布局，包括多列文本、不同宽高的列，以及跨越多个列的区域。(见图2)

![文字穿越堆叠的区域和列][fig02.jpg]

图2. 文字穿越堆叠的区域和列

### 形状环绕(Wrap shape) ###

使用形状环绕，你可以控制文字经过区域的形状(见图3)。你也可以使用这个属性搭配内容流或者单独的创建更有趣的设计。

![文字内容显示在自定义形状的内部][fig03.jpg]

图3.文字内容显示在自定义形状的内部

要使用这个特性，你需要使用`wrap-shape`属性来定义形状，并设定`wrap-shape-mode`属性为需要的值。通过制定content的值，文字将显示在形状内部。

上面的现实心形的代码如下：

CSS

<table style="border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgb(237,237,237); border-collapse:collapse; border-spacing:0px; font-size:14px; line-height:2; margin:0px 0px 20px; width:580px"> 
 <tbody style=""> 
 <tr style=""> 
 <td style="border-top-width:1px; border-top-style:solid; border-top-color:rgb(237,237,237); padding:0.5em 1em"> <pre style="font-size:14px; background-color:rgb(245,245,245); color:rgb(102,102,102); margin-top:20px; margin-bottom:20px; overflow:auto; padding:20px; white-space:pre-wrap; word-wrap:break-word">1
2
3
4
5
6
7
8
9
10
11
</pre> </td> 
 <td style="border-top-width:1px; border-top-style:solid; border-top-color:rgb(237,237,237); padding:0.5em 1em"> <pre><code>.circle{ 
/* 定义元素形状为一个圆*/
	wrap-shape: polygon(0px, 150px /* ...更多点*/);
	wrap-shape-mode: content; 
}
&nbsp;
.heart{ 
	/* 定义元素形状为心形*/
	wrap-shape: polygon(150px, 32px /* ...更多的点 */); 
	wrap-shape-mode: content; 
}</code></pre> </td> 
 </tr> 
 </tbody> 
</table>

HTML

我们的基于WebKit原型支持使用一个简单的多边形指定一个形状，但是你可以想象其它的集合体也可以被用于设定形状，或者甚至使用一张图片的alpha值。。。

### 环绕(Exclusions) ###

通过使用wrap-shap-mode属性的其它值，你可以创建不同的效果，包括指定的`wrap-shape` 属性可以理解为要完全避开的区域(看图4)。

![图4. 文字环绕在自定义图形周围][4.]

图4. 文字环绕在自定义图形周围

CSS

HTML

### 区域样式(Region Styling) ###

在杂志中，指定内容环绕设计中的一个特定的区域是很常见的。我们称之为区域样式。例子展示了文字环绕在第一个区块(包括introduction标题的部分)被设定为深蓝色，而余下的文字则为灰色(看图 5)。

![图5.文字样式依赖它流入的区域][5.]

图5.文字样式依赖它流入的区域

CSS

HTML

<table style="border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgb(237,237,237); border-collapse:collapse; border-spacing:0px; font-size:14px; line-height:2; margin:0px 0px 20px; width:580px"> 
 <tbody style=""> 
 <tr style=""> 
 <td style="border-top-width:1px; border-top-style:solid; border-top-color:rgb(237,237,237); padding:0.5em 1em"> <pre style="font-size:14px; background-color:rgb(245,245,245); color:rgb(102,102,102); margin-top:20px; margin-bottom:20px; overflow:auto; padding:20px; white-space:pre-wrap; word-wrap:break-word">1
2
3
4
5
6
7
8
</pre> </td> 
 <td style="border-top-width:1px; border-top-style:solid; border-top-color:rgb(237,237,237); padding:0.5em 1em"> <pre><code>&lt;div id="article"&gt;
	&lt;h1&gt;Introduction&lt;/h1&gt;
	&lt;p&gt;This is an example [...]&lt;/p&gt;
&lt;/div&gt;
&lt;div id="region_1"&gt;&lt;/div&gt;
&lt;div id="region_2"&gt;&lt;/div&gt;
&lt;div id="region_3"&gt;&lt;/div&gt;
&lt;div id="region_4"&gt;&lt;/div&gt;</code></pre> </td> 
 </tr> 
 </tbody> 
</table>

区域样式目前还没有在Adobe Labs的这个webkit原型里面实现。

### CSS3 区域和媒体查询 ###

那些基本的构建块可以组合起来创建更有趣更复杂的布局，类似你经常看到的印刷出版物。你也可以将它们配合其它web标准适用。比如，结合[CSS媒体查询][CSS]，可以创建适应不同设备的方向(横屏landscape、竖屏portrait等)的布局。

图 6展示了使用`wrap-shape`属性结合CSS3 媒体查询来实现适应不同屏幕朝向的布局。

![图6. 使用属性结合CSS3 媒体查询来实现适应不同屏幕朝向的布局][6. _CSS3]

![图6. 使用属性结合CSS3 媒体查询来实现适应不同屏幕朝向的布局][6. _CSS3 1]

图6. 使用属性结合CSS3 媒体查询来实现适应不同屏幕朝向的布局

图7 展示如何让同样的内容适应不同的屏幕方向，以及变化的列数

![图7 内容适应不同的屏幕方向，同时改变的列数][7]

![图7 内容适应不同的屏幕方向，同时改变的列数][7 1]

图7 内容适应不同的屏幕方向，同时改变的列数

### CSS3 区域和JavaScript ###

你也可以将这些功能结合JavaScript以创建交互的内容。在下面的图8中展示的，你可以滑动双向的箭头以移动图片，这个时候，文字围绕山体和汽车重新布局。

![图8. 滑动双向的箭头移动图片，文字围绕山体和汽车重新布局][8.]

![图8. 滑动双向的箭头移动图片，文字围绕山体和汽车重新布局][8. 1]

![图8. 滑动双向的箭头移动图片，文字围绕山体和汽车重新布局][8. 2]

图8. 滑动双向的箭头移动图片，文字围绕山体和汽车重新布局

这个例子包含在上面提到的WebKit原型中，你可以下载体验下。

译注：CSS3 region这个词，着实不太好翻译，暂时按照region的意思翻译为区域，但是感觉很别扭。还有文中的一些词组，如果你觉得有更好的中文说法，请赐教——神飞。

[Adobe Labs]: http://www.adobe.com/go/cssregions/
[CSS Regions Module]: http://dev.w3.org/csswg/css3-regions/
[CSS Exclusions Module]: http://dev.w3.org/csswg/css3-exclusions/
[W3C CSS]: http://lists.w3.org/Archives/Public/www-style/
[CSS Regions]: http://adobe.com/go/cssregions
[3]: http://img.qianduan.net/uploads/2011/06/fig01.jpg
[3 1]: http://img.qianduan.net/uploads/2011/06/fig01b.jpg
[fig02.jpg]: http://img.qianduan.net/uploads/2011/06/fig02.jpg
[fig03.jpg]: http://img.qianduan.net/uploads/2011/06/fig03.jpg
[4.]: http://img.qianduan.net/uploads/2011/06/fig04.jpg
[5.]: http://img.qianduan.net/uploads/2011/06/fig05.jpg
[CSS]: http://www.qianduan.net/media-type-and-media-query.html
[6. _CSS3]: http://img.qianduan.net/uploads/2011/06/fig06a.jpg
[6. _CSS3 1]: http://img.qianduan.net/uploads/2011/06/fig06b.jpg
[7]: http://img.qianduan.net/uploads/2011/06/fig07a.jpg
[7 1]: http://img.qianduan.net/uploads/2011/06/fig07b.jpg
[8.]: http://img.qianduan.net/uploads/2011/06/fig08a.jpg
[8. 1]: http://img.qianduan.net/uploads/2011/06/fig08b.jpg
[8. 2]: http://img.qianduan.net/uploads/2011/06/fig08c.jpg