Shapes

● ● ● ● ●

Two kinds of shapes:

• Shapes for content: shape-inside
  • Shape of the content box
  • Determines how text inside the element wraps
• Shapes for exclusions: shape-outside
  • Determines how other text wraps around this element

Kinds of shapes

● ● ● ● ●

• Rounded rectangle
• Circle & ellipse
• Polygon
• External: shape in SVG
• External: shape from a bitmap image

  img {float: left; shape-outside: attr(src url)}

Note: no shapes yet that grow with the content

Shaping an image

● ● ● ● ●

<img id="panorama" src="panorama.jpg" alt="">

#panorama {
  position: absolute;
  wrap-flow: both;
  shape-outside:
    polygon(0px, 440px 62px, 481px...)
}

Exclusions – wrapping rules

● ● ● ● ●

The wrap-flow property:

• auto – level-2 behavior
• both – text both left and right of exclusions
• start – text stays left of exclusions
• end – text stays right of exclusions
• maximum – left or right, whichever is bigger
• clear – neither left nor right

Exclusions & shapes – prototypes

● ● ● ● ●

Exclusions:

• JavaScript prototype by Adobe (2011) uses different property names; always does 'wrap-flow: both'
• IE 10 Consumer Preview (2011)

Shapes:

• JavaScript prototype by Adobe (2011)
  only polygon shapes