[css-round-display] shape-inside: display

During the F2F discussion, I mentioned an idea I wanted to discuss
more fully, which is, splitting the 'display' value of 'shape-inside'
into two keywords:

   'display' - shape of the box is the same as the viewport
   'match-parent' - shape of the box fits to the containing block

In the case of a page that is only as large as the viewport, this
isn't very interesting, but in the case of a page that is taller
than the viewport or that scrolls, the behavior is easier to
process than the current intersection of the box and its viewport.
It does not rely on the scroll position, and therefore gives a
direct, static result.

It also allows multiple regions of the screen to be laid out into
a shape that fits the round viewport, and these regions can be
manipulated into and out of view while maintaining their shape.

In the simple case of a page that fits the viewport, it would
be used as follows:

   <body>
     <h1>This is the Title</h1>
     <p>This is some paragraph text</p>
   </body>

   body { shape-inside: display; }
   h1, p { shape-inside: match-parent; }

instead of

   h1, p { shape-inside: display; }

(Of course we still have the problem that shape-inside has: what
if the content is increased. But that's a problem general to
shape-inside that we need to solve.)

~fantasai

Received on Thursday, 10 September 2015 05:17:49 UTC