Freeing the Floats of the Future from the Tyranny of the Rectangle

But what does that even mean?

Who Am I?

Bem Jones-Bey <bemjb@adobe.com>, on Twitter as @bemjb
Computer Scientist on Adobe's Web Platform Team <http://webplatform.adobe.com/>
Contributor to the WebKit (Safari) and Blink (Chrome and Opera) open source projects

http://ngm.nationalgeographic.com/2012/12/sequoias/quammen-text

http://webplatform.adobe.com/Demo-for-National-Geographic-Forest-Giant/browser/src/

CSS Shapes Level 1

W3C Candidate Recommendation

Desktop

37 No No 24 7.1*

Mobile

8* 53 37 54 No

* denotes prefix required.

Data from caniuse.com

CSS Shapes Polyfill

Based on a demo by Razvan Caliman

shape-outside

A float causes inline content to wrap around its rectangular margin box
shape-outside specifies a shape to be used instead of the margin box for wrapping inline content

Image Shapes

#image {
    shape-outside: url("images/cow.png");
}

Alpha channel of the image defines the shape's contour

Always sized and positioned based on the content box of the float

Image from Freepik

shape-margin

#shape-margin {
    shape-outside: url("images/cow.png");
    shape-margin: 1em;
}

Alpha channel of the image defines the shape's contour

Always sized and positioned based on the content box of the float

Image from Freepik

shape-image-threshold

#image-threshold {
    shape-outside: radial-gradient(
        10em circle at left, #268bd2, transparent 50%
    );
    shape-image-threshold: 0.00;
}

Any pixels with opacity below the threshold are not considered part of the shape

Range is from 0.0 (transparent) to 1.0 (opaque)

Defaults to 0.0

shape-image-threshold

Supported images

Can be a url to any image
- For animated images, the spec says that only the first frame is used, but the in practice, you get an animated shape
- Data URIs work great
- Must have same origin or be allowed by CORS
Gradients are also supported, both linear and radial
And more in the future, as the CSS image value gets expanded

Basic Shapes

inset()
circle()
ellipse()
polygon()

Basic Shape: inset()

Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, 'and what is the use of a book,' thought Alice 'without pictures or conversations?'

So she was considering in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid), whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies, when suddenly a White Rabbit with pink eyes ran close by her.

There was nothing so very remarkable in that; nor did Alice think it so very much out of the way to hear the Rabbit say to itself, 'Oh dear! Oh dear! I shall be late!' (when she thought it over afterwards, it occurred to her that she ought to have wondered at this, but at the time it all seemed quite natural); but when the Rabbit actually took a watch out of its waistcoat-pocket, and looked at it, and then hurried on, Alice started to her feet, for it flashed across her mind that she had never before seen a rabbit with either a waistcoat-pocket, or a watch to take out of it, and burning with curiosity, she ran across the field after it, and fortunately was just in time to see it pop down a large rabbit-hole under the hedge.

none

inset(2em)

inset(2em 3em)

inset(2em 3em 4em)

inset(2em 3em 4em 5em)

Works the same way as the margin shorthand.

#one-arg-inset { shape-outside: inset(5%); /* top = right = bottom = left = 5% */ }
        #two-arg-inset { shape-outside: inset(5% 10%); /* top = bottom = 5%, right = left = 10% */ }
        #three-arg-inset { shape-outside: inset(5% 10% 15%); /* top = 5%, right = left = 10%, bottom = 15% */ }
        #four-arg-inset { shape-outside: inset(5% 10% 15% 20%); /* top = 5%, right = 10%, bottom = 15%, left = 20% */ }

Works the same way as the margin shorthand.

Basic Shape: inset() with rounded corners

inset(2em round 1em 2em 3em 4em)

Rounded corners use border radius syntax.

Basic Shape: circle()

To Sherlock Holmes she is always the woman. I have seldom heard him mention her under any other name. In his eyes she eclipses and predominates the whole of her sex. It was not that he felt any emotion akin to love for Irene Adler. All emotions, and that one particularly, were abhorrent to his cold, precise but admirably balanced mind. He was, I take it, the most perfect reasoning and observing machine that the world has seen, but as a lover he would have placed himself in a false position. He never spoke of the softer passions, save with a gibe and a sneer. They were admirable things for the observer—excellent for drawing the veil from men’s motives and actions. But for the trained reasoner to admit such intrusions into his own delicate and finely adjusted temperament was to introduce a distracting factor which might throw a doubt upon all his mental results. Grit in a sensitive instrument, or a crack in one of his own high-power lenses, would not be more disturbing than a strong emotion in a nature such as his. And yet there was but one woman to him, and that woman was the late Irene Adler, of dubious and questionable memory.

circle()

circle(farthest-side)

circle(closest-side at 50% 50%)

circle(farthest-side at 50% 50%)

centerX centerY

Basic Shape: ellipse()

Tell me, O Muse, of that ingenious hero who travelled far and wide after he had sacked the famous town of Troy. Many cities did he visit, and many were the nations with whose manners and customs he was acquainted; moreover he suffered much by sea while trying to save his own life and bring his men safely home; but do what he might he could not save his men, for they perished through their own sheer folly in eating the cattle of the Sun-god Hyperion; so the god prevented them from ever reaching home. Tell me, too, about all these things, oh daughter of Jove, from whatsoever source you may know them.

So now all who escaped death in battle or by shipwreck had got safely home except Ulysses, and he, though he was longing to return to his wife and country, was detained by the goddess Calypso, who had got him into a large cave and wanted to marry him. But as years went by, there came a time when the gods settled that he should go back to Ithaca; even then, however, when he was among his own people, his troubles were not yet over; nevertheless all the gods had now begun to pity him except Neptune, who still persecuted him without ceasing and would not let him get home.

ellipse()

ellipse(farthest-side farthest-side)

ellipse(closest-side closest-side at 50% 50%)

ellipse(farthest-side farthest-side at 50% 50%)

centerX centerY

Defining Radii for Circle and Ellipse

Length (em, ex, ch, rem, vw, vh, vmin, vmax, cm, mm, q, in, pc, pt, px)
Percentage
- For circle()
  - relative to (width2+height2)/2−−−−−−−−−−−−−−−−−√
- For ellipse()
  - x radius (rx) is relative to the width of the reference box
  - y radius (ry) is relative to the height of the reference box

Basic Shape: polygon()

#triangle {
    shape-outside: polygon(0 0, 100% 0, 50% 100%);
}

A polygon with less than 3 vertices is invalid.

A polygon will always be closed by drawing a line from the last point specified to the initial point.

CSS Shapes Editor for Chrome

Box (Model) Shapes

none

margin-box

border-box

padding-box

content-box

Annancy is a legendary being whose chief characteristic is trickery. A strong and good workman, he is invariably lazy, and is only to be tempted to honest labour by the offer of a large reward. He prefers to fill the bag which he always carries, by fraud or theft. His appetite is voracious, and nothing comes amiss to him, cooked or raw. No sooner is one gluttonous feast over than he is ready for another, and endless are his shifts and devices to supply himself with food. Sometimes he will thrust himself upon an unwilling neighbour, and eat up all his breakfast. At another time he carries out his bag and brings it home full of flesh or fish obtained by thieving. He is perfectly selfish, and knows no remorse for his many deeds of violence, treachery and cruelty. His only redeeming point is a sort of hail-fellow-well-met-ness, which appeals so much to his associates that they are ready almost, if not quite, to condone his offences.

Reference Boxes

Basic shapes are sized and positioned relative to the element that the shape applies to.
Percentages used to position or size shapes are precentages of the reference box dimensions.
By default, the shape's coordinates are relative to the margin box of the element
This can be changed by specifying one of the box shapes along with the basic shape

For example:

.basic-shape-reference-box {
        shape-outside: circle() content-box;
    }

What will you do with shapes?

http://bemjb.github.io/freeingfloatstalk/

@bemjb

Useful Links

The Adobe Web Platform Team's CSS Shapes page
CSS Shapes Editor for Chrome by Razvan Caliman
CSS Shapes articles on the Adobe Web Platform Team Blog
CSS Shapes Level 1 Specification
Breaking Down Boxes With CSS Shapes by Amelia Bellamy-Royds
CSS Shapes 101 by Sara Soueidan
Moving Forward with CSS Shapes by Sara Soueidan
CSS Shapes: Breaking the Rectangular Design Shackles by Patrick Catanzariti

Freeing the Floats of the Future from the Tyranny of the Rectangle – Image Shapes – Basic Shape: inset()

bemjb

Freeing the Floats of the Future from the Tyranny of the Rectangle – Image Shapes – Basic Shape: inset()

0 0

freeingfloatstalk

Freeing the Floats of the Future from the Tyranny of the Rectangle

Who Am I?

CSS Shapes Level 1

shape-outside

Image Shapes

shape-margin

shape-image-threshold

Supported images

Basic Shapes

Basic Shape: inset()

Basic Shape: inset() with rounded corners

Basic Shape: circle()

Basic Shape: ellipse()

Defining Radii for Circle and Ellipse

Basic Shape: polygon()

Box (Model) Shapes

Reference Boxes

What will you do with shapes?

Useful Links

Freeing the Floats of the Future from the Tyranny of the Rectangle – Image Shapes – Basic Shape: inset()

bemjb

Freeing the Floats of the Future from the Tyranny of the Rectangle – Image Shapes – Basic Shape: inset()

0 0 (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/platform.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();

freeingfloatstalk

Freeing the Floats of the Future from the Tyranny of the Rectangle

Who Am I?

CSS Shapes Level 1

shape-outside

Image Shapes

shape-margin

shape-image-threshold

Supported images

Basic Shapes

Basic Shape: inset()

Basic Shape: inset() with rounded corners

Basic Shape: circle()

Basic Shape: ellipse()

Defining Radii for Circle and Ellipse

Basic Shape: polygon()

Box (Model) Shapes

Reference Boxes

What will you do with shapes?

Useful Links

0 0