the exclusion area for an exclusion element
or
(cut from Shapes section intro)
exclusions and
(cut from Shapes section intro note)
Content area
The content area
is normally used for layout of the inline flow content of a box.
Outside and inside
In this specification, 'outside' refers to DOM content that is not a descendant of an element
while 'inside' refers to the element's descendants.
(cut from shapes definitions)
The inside shape defines an element's content shape and the element's inline
content will flow within that shape.
It is important to note that while outside shapes only apply to floats, inside shapes apply to all block-level elements.
(cut from shapes intro)
CSS 'shape-outside' and CSS box model relation:
the red box illustrates the exclusion element's
content box, which is unmodified and subject to normal CSS positioning (here absolute positioning).
<style type="text/css">
.exclusion {
wrap-flow: both;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
shape-outside: circle(50%, 50%, 50%);
border: 1px solid red;
}
</style>
<div style=”position: relative;”>
<div class=”exclusion”></div>
Lorem ipsum dolor sit amet...
</div>
(cut exclusion example from shapes intro)
Note, images can define cavities and inline flow content should wrap inside
them. In order to avoid that, another exclusion element can be overlaid.
(cut from Shapes from Image)
The shape defined by the 'shape-inside'
and 'shape-padding' properties
defines an exclusion area
that contributes
to the element's wrapping context.
The 'shape-inside' property applies
to all block-level elements.
(cut from Declaring Shapes, along with shape-inside references)
The shape is computed
based on the border box of the element for exclusions,
or computed based on the margin box for floats.
(cut from shape-outside:auto definition)
The above figure shows how
'shape-outside' shapes
impact the exclusion areas.
The red box represents an element's content box
and 'A', 'B', 'C' and 'C' represent exclusions
with a complex shape
and their 'wrap-flow' property
computes to 'both', 'start', 'end' and 'clear',
respectively.
As illustrated in the picture,
when an exclusion allows wrapping
on all sides,
text can flow inside 'holes'
in the exclusion
(as for exclusion 'A').
Otherwise, the exclusion clears
the area on the side(s)
defined by 'wrap-flow',
as illustrated
for 'B', 'C' and 'D' above.
(cut from shape-outside)
The 'shape-inside' Property
The 'shape-inside' property adds
one or more exclusion areas
to the element's wrapping context.
This modifies the normal rectangular shape
of the content area
to a possibly non-rectangular wrapping area.
The exclusion areas
are defined by subtracting the shape
from the element's content area.
Any part of the shape outside
the element's content area
has no effect.
| Name: |
shape-inside |
| Value: |
outside-shape | auto | <basic-shape> | <uri> |
| Initial: |
outside-shape |
| Applies to: |
block-level elements |
| Inherited: |
no |
| Percentages: |
N/A |
| Computed value: |
computed lengths for <basic-shape>, the absolute URI for <uri>, otherwise as specified |
The values of this property have the following meanings:
- outside-shape
-
The shape is computed
based on the computed value
of the 'shape-outside' property.
E.g., when shape-outside
computes to 'auto',
use the meaning of 'auto' below
to compute the shape.
- auto
-
The shape is computed based on the content box of the element.
- <basic-shape>
-
The shape is computed based on the values of one of 'rectangle', 'inset-rectangle', 'circle', 'ellipse'
or 'polygon'.
- <uri>
-
If the <uri> references an SVG shape element, that element defines the shape.
Otherwise, if the <uri> references an image, the shape is extracted and computed
based on the alpha channel of the specified image.
If the <uri> does not reference an SVG shape element or an image, the
effect is as if the value 'auto' had been specified.
The 'shape-inside' property applies to floats.
The 'shape-inside' property may not apply on some elements such as elements with a
computed 'display' value of 'table'.
Overflow content avoids
the exclusion area(s) added
by 'shape-inside' and 'shape-padding'
(as well as any other exclusion areas
in the element's wrapping context).
The 'shape-image-threshold'
applies to both 'shape-outside' and 'shape-inside'.
(cut from shape-image-threshold)
The 'shape-padding' Property
The 'shape-padding' property adds padding to a shape-inside.
This defines a new shape where every point
is the specified distance from the shape-inside.
This property takes on positive values only.
| Name: |
shape-padding |
| Value: |
<length> |
| Initial: |
0 |
| Applies to: |
block-level elements |
| Inherited: |
no |
| Percentages: |
N/A |
| Computed value: |
the absolute length |
A 'shape-padding' creating an offset
from a circular shape-inside.
The light blue rectangles represent
inline content affected
by the shape created
by the padding.
Note that the 'shape-padding' property only affects layout of content inside
the element it applies to while the 'shape-margin' property only affects layout of content
outside the element.
