HTML and CSS Reference
In-Depth Information
CSS Exclusions
Speaking about CSS regions, Adobe also submitted a new specification for a feature called CSS
exclusions
. Exclusions
allow for text content to free flow around images, videos, canvases, and other elements in the DOM tree. With CSS
exclusions, it's truly possible to create rich print-like magazine effects in your browser using pretty simple CSS.
What's really interesting is that you can create shapes inside CSS and use them as exclusions, which can create really
interesting effects with negative space. Let's take a look at an example from Adobe using CSS exclusions and adaptive
text layout based on the orientation of the tablet, as shown in Figure
12-3
.
Figure 12-3.
Example from Adobe using CSS exclusions (source: Adobe)
You can see by incorporating exclusions into your text layout, you can gain really amazing results that
form-fit around specific content, in this case, the mountain. So, let's take a look at working with CSS exclusions in
an example layout where you wrap mock publisher content around a 300x250 rectangle exclusion, which could be
your ad real estate.
Listing 12-2.
CSS Exclusions Example
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
body, html{
height:100%;
width:100%;
overflow:hidden;
}
#container{
font-size:14px;
text-align:justify;
-webkit-hyphens:auto;
