CSS3 makes web pages more expressive and supports more complex layouts

Article Introduction: CSS3 Region: A rich page layout based on HTML and CSS3.

Translated from: CSS3 Regions:rich page layout with HTML and CSS3
Chinese: CSS3 Region: Rich page layout based on HTML and CSS3
Please respect the copyright, reproduced please indicate the source, thank you!

The internet has become a great repository for references, textbooks, news, articles and interactive applications. However, when designing content for printing, some features are clearly still impossible or difficult to implement with web standards.

Print publications are exploring better ways to convert or change their content to accommodate rich digital formats. We also see that this is a good opportunity to make Web pages more expressive and to support more complex layouts.

Adobe has experimented with enhancing CSS to show the complex layouts used by traditional magazines. We have also submitted some suggestions to the Consortium CSS Workgroup and built a prototype to implement these proposals through WebKit. You can download these prototype experiences from Adobe Labs . You can then find a draft of the regions in CSS module and the CSS Exclusions Module page on this web site. You can also subscribe to the list of CSS mailing lists to discuss this issue. Please include "[css3-regions]" or "[Css3-exclusions]" in the message header to discuss the issue in this mail group. Of course, you can also use the Adobe Labs CSS regions Forum to feedback questions.

Some notes: This is a work in progress. As we discuss with the community at large, we will make some changes. The syntax used in this article reflects the status of the current draft, but it may evolve as the Working Group and the Community explore. Also note that, by convention, all new mathematics will be preceded by the-webkit-prefix. However, in order to simplify, I have omitted this prefix in this article.

Now, let's take a look at this extension and they can be grouped into 4 categories:

• linear content: "Flow" from one area to another Threading content.
• containers of any shape (arbitrarily shaped containers): Displays text in a non rectangular area.
• arbitrary shape wrapping (arbitrarily shaped exclusion): text wraps around a rectangular area.
• area style (Region styling): displays content based on the flow area.

The following are examples of various classifications:

Content Flow

In a typical HTML document, text can be displayed in more than one area, but the text in each area is irrelevant (see Figure 1). If you want to display text across multiple columns, or use other more complex areas you need to manually. This may not go away when the user enlarges the text or the user's font is larger than the font you set. This method (CSS3 region) is also available in the Zoom window which is adaptive to the fluid layout, or, when displayed on a flat panel, an adaptive vertical screen (portrait) or a horizontal screen (landscape) display.

Figure 1. Text is displayed across 3 columns of different widths

If you want to specify a single piece of content (such as text and pictures), how does that content appear in a string of areas? That's what content flow does.

To use it, give the container a name to the content through the Flow property, which removes the content from the normal CSS layout stream, and then you can insert the thread into 1 or more other areas-using from() content the value as the attribute.

The code for the three column layouts above is as follows:

Css

1 2 3 4 5 6 7

#source {flow : "Main-thread"; } . Region { content:from (main-thread); Background: #C5DFF0; }

Html

1 2 3 4 5 6 7

<div id= "source" > <p>lorem ipsum dolor [...] </p> </div> <div id= "Region1" class= "region" ></div> <div id= "Region2" class= "region" ></div> <div id= "Region3" Region "></div>

You can combine multiple named flow in a single page. You can also use the Content-order property to control the order of the text flow. If not specified, the normal document order is used.

With this simple widget, you can implement more complex layouts, including multiple columns of text, different widths of columns, and areas across multiple columns. (See Figure 2)

Figure 2. Text crosses stacked areas and columns

Shape wrapping (Wrap shape)

With shape wrapping, you can control the shape of the text through the area (see Figure 3). You can also use this property with the content stream or create a more interesting design individually.

Figure 3. Text content displayed inside a custom shape

To use this feature, you need wrap-shape to use attributes to define the shape and set the wrap-shape-mode property to the value you want. By setting the value of the content, the text is displayed inside the shape.

The actual heart-shaped code above is as follows:

Css

1 2 3 4 5 6 7 8 9 Ten 11

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

Html

1 2	<div class= "Circle" ></div> <div class= "Heart" ></div>

Our WebKit prototype supports the use of a simple polygon to specify a shape, but you can imagine that other aggregates can also be used to set shapes, or even use the alpha value of a picture ...

Surround (exclusions)

By using the other values of the Wrap-shap-mode property, you can create different effects, including those that you specify to wrap-shape be completely avoided (see Figure 4).

Figure 4. Text wraps around a custom shape

Css

1 2 3 4

. exclusion{ /* Text wraps around the entire element * /wrap-shape-mode:around; }

Html

1 2 3

<div class= "Exclusion Circle" > <p>lorem ipsum dolor [...] </p> </div>

Area style (Region styling)

In a magazine, it is common to specify that content wraps around a specific area of the design. We call it the regional style. Examples show that text wrapping is set to dark blue in the first block (including the portion of the introduction header), while the remaining text is grayed out (see Figure 5).

Figure 5. The text style relies on the area it flows into

Css

1 2 3 4 5 6 7 8

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

Html

1 2 3 4 5 6 7 8

<div id= "article" >

The area style is not yet implemented in this webkit prototype of Adobe Labs.

CSS3 Regional and media inquiries

Those basic building blocks can be grouped together to create more interesting and complex layouts, similar to the print publications you often see. You can also use them in conjunction with other Web standards. For example, combining CSS Media queries , you can create a layout that adapts to different device orientations (horizontal screen landscape, vertical screen portrait, etc.).

Figure 6 shows a wrap-shape layout that adapts to different screen orientations using attributes combined with CSS3 media queries.

Figure 6. Use attributes to combine CSS3 media queries for layouts that adapt to different screen orientations

Figure 7 shows how to adapt the same content to different screen orientations and the number of columns that change

Figure 7 Content for different screen orientations, while changing the number of columns

CSS3 area and JavaScript

You can also combine these features with JavaScript to create interactive content. As shown in Figure 8 below, you can slide the two-headed arrow to move the picture, and the text will rearrange itself around the mountain and car.

Figure 8. Slide two-way arrows to move the picture, text around the mountain and car re layout

This example is included in the WebKit prototype mentioned above and you can download the experience.

" CSS3 region This word, really not very good translation, temporarily in accordance with the meaning of region translation for the region, but feel very awkward. There are some phrases in the article, if you think there is a better Chinese version, please enlighten-god fly.