1、css3 region：基于html和css3的富頁面布局譯自：css3 regions: rich page layout with html and css3中文：css3 region：基于html和css3的富頁面布局 互聯網已經成為一個提供參考、教材、新聞、文章和交互應用的大寶庫了。然而，當為印刷設計內容時，一些功能顯然仍然不可能或者很難使用web標準來實現。印刷出版物正在探索更好的方法來轉換或者改變他們的內容以適應富數字格式。我們也看到這是一個讓網頁更富于表現和支持更復雜布局的好機會。adobe通過增強css進行了一些實驗來展示一些傳統雜志使用的復雜布局。我們也提交了一些建議到w3

2、c css工作組，并構建了一個原型來通過webkit實現這些提案。你可以從adobe labs下載這些原型體驗下。 然后你也可以在css regions module和這個w3c網站上的css exclusions module 頁面找到w3c編寫的草案。你也可以訂閱w3c css 郵件列表來討論這個問題。歡迎在郵件標題中加入”css3-regions“或者”css3-exclusions“來在這個郵件組中討論這個問題。當然也可以通過adobe labs的css regions 論壇反饋問題。一些說明: 這是個在進行中的工作。隨著我們和廣大社區的討論，我們將會做些改變。本文中用到的語法反映出當

3、前w3c草案的現狀，但是隨著w3c工作組和社區的探討可能會有些進化。同時也請注意，按照慣例，所有的新的數學將會首先采用-webkit-前綴。不過，為了簡化，我在本文中省去了這個前綴。現在，讓我們了解這個擴展吧，他們可以被分為4類: 線性內容(threading content): 從一個區域“流向”另一個區域的內容。 任意形狀的容器(arbitrarily shaped containers): 在非矩形區域內顯示文本。 任意形狀環繞(arbitrarily shaped exclusion): 文本環繞非矩形區域。 區域樣式(region styling):根據流向區域顯示內容。 下面是各種

4、分類的例子：內容流(content flow)在典型的html文檔中，文字可以在多個區域顯示，但是每個區域中的文字是不相關的(見圖1)。如果你想要跨多個列顯示文本，或者使用別的你需要的更復雜的區域來手動。在用戶放大文字或者用戶的字體比你設定的字體大時，這可能會無法亂掉。這個方法(css3 region)同樣是的擁有在縮放窗口是自適應的流體布局成為可能，或者，當顯示在平板上時，自適應豎屏(portrait)或者橫屏(landscape)顯示。圖1.文字跨3個不同寬的列顯示如果你想要單獨地指定一托內容(比如文字和圖片)，那些內容如何在一串區域內顯示(flow)呢？這正是內容流(content fl

5、ow)要做的。要使用它，通過flow屬性賦予內容的容器一個名字，這樣做會將內容從普通的css布局流中去掉，然后你可以插入這個線程到1個或多個其他區域使用from()作為content屬性的值。上面的三列布局的代碼如下：css1234567#source flow: main-thread;.region content: from(main-thread);background: #c5dff0;html1234567 lorem ipsum dolor . 你可以在一個頁面中聯合多個命名的flow。你也可以使用content-order屬性來控制文字流的順序。如果沒有指定，將會使用正常的文檔

6、順序。通過這個簡單的構件，你可以實現更復雜的布局，包括多列文本、不同寬高的列，以及跨越多個列的區域。(見圖2)圖2. 文字穿越堆疊的區域和列形狀環繞(wrap shape)使用形狀環繞，你可以控制文字經過區域的形狀(見圖3)。你也可以使用這個屬性搭配內容流或者單獨的創建更有趣的設計。圖3.文字內容顯示在自定義形狀的內部要使用這個特性，你需要使用wrap-shape屬性來定義形狀，并設定wrap-shape-mode屬性為需要的值。通過制定content的值，文字將顯示在形狀內部。上面的現實心形的代碼如下：css1234567891011.circle/* 定義元素形狀為一個圓*/wrap-sh

7、ape: polygon(0px, 150px /* .更多點*/);wrap-shape-mode: content; .heart/* 定義元素形狀為心形*/wrap-shape: polygon(150px, 32px /* .更多的點 */); wrap-shape-mode: content; html12我們的基于webkit原型支持使用一個簡單的多邊形指定一個形狀，但是你可以想象其它的集合體也可以被用于設定形狀，或者甚至使用一張圖片的alpha值。環繞(exclusions)通過使用wrap-shap-mode屬性的其它值，你可以創建不同的效果，包括指定的wrap-shape 屬

8、性可以理解為要完全避開的區域(看圖4)。圖4. 文字環繞在自定義圖形周圍css1234.exclusion/* 文字環繞整個元素 */wrap-shape-mode: around;html123 lorem ipsum dolor .區域樣式(region styling)在雜志中，指定內容環繞設計中的一個特定的區域是很常見的。我們稱之為區域樣式。例子展示了文字環繞在第一個區塊(包括introduction標題的部分)被設定為深藍色，而余下的文字則為灰色(看圖 5)。圖5.文字樣式依賴它流入的區域css12345678p color: gray:region-style #region_1

9、p color: #0c3d5f;html12345678introductionthis is an example .區域樣式目前還沒有在adobe labs的這個webkit原型里面實現。css3 區域和媒體查詢那些基本的構建塊可以組合起來創建更有趣更復雜的布局，類似你經常看到的印刷出版物。你也可以將它們配合其它web標準適用。比如，結合css媒體查詢，可以創建適應不同設備的方向(橫屏landscape、豎屏portrait等)的布局。圖 6展示了使用wrap-shape屬性結合css3 媒體查詢來實現適應不同屏幕朝向的布局。圖6. 使用屬性結合css3 媒體查詢來實現適應不同屏幕朝向的布局圖7 展示如何讓同樣的內容適應不同的屏幕方向，以及變化的列數圖7 內容適應不同的屏幕方向，同時改變的列數css3 區域和javascript 你也可以將這些功能結合javascript以創建交互的內容。在下面的圖8中展示的，你可以滑動雙向的箭頭以移動圖片，這個時候，文字圍繞山體和汽