- From: Alan Stearns <stearns@adobe.com>
- Date: Mon, 1 Oct 2012 13:39:16 -0700
- To: Alan Stearns <stearns@adobe.com>, Bear Travis <betravis@adobe.com>, Hans Muller <hmuller@adobe.com>, "www-style@w3.org" <www-style@w3.org>
OK. I've added a new paragraph to the shape-inside section defining how overflow works, with two diagrams [1][2]. It reads: --- Overflow content can overlap the bottom edge of a shape-inside, and overflow content can be displayed below the content area defined by shape-inside. When content overflows in the block direction, the last line in the content area determines its width(s) by finding the minimum shape width(s) in the remaining area between the line's top edge and the shape's bottom edge. This can result in the line intersecting the shape's bottom edge, or a zero-width line if (for instance) the shape's bottom edge is a continuous curve. Further overflow is laid out as if the shape-inside was set to 'auto'. --- And now I'll need to define 'shape widths'. The intent there is that the rectangle for any line box must not overlap the relevant shape boundaries - this constraint is added to all of the current calculations for available width, and applies to both shape-inside and shape-outside. Thanks, Alan [1] http://dev.w3.org/csswg/css3-exclusions/images/rounded-rect-overflow.png [2] http://dev.w3.org/csswg/css3-exclusions/images/ellipse-overflow.png On 9/26/12 1:38 PM, "Alan Stearns" <stearns@adobe.com> wrote: >Bear, > >I agree with your choices. Your answer to the second question follows what >Vincent added to issue 16460 (Specify overflow behavior for shape-inside) >[1]. And fitting the last line to the shape contours makes sense. I'll add >a paragraph in section 4.4.2 with a description of overflow with >shape-inside and add two example diagrams. The first diagram will be >similar to your option 3 with a rounded rect shape, and the second will be >similar to Hans's circle showing that the last line has no width, but with >a slight change that the remaining overflow fits just below the trailing >edge of the circle. > >Thanks, > >Alan > >[1] https://www.w3.org/Bugs/Public/show_bug.cgi?id=16460 > >On 9/26/12 12:57 PM, "Bear Travis" <betravis@adobe.com> wrote: > >>I think that there are two questions here. >> >> >>1. What is the correct behavior when the last line in a shape-inside >>content area is only partially contained by that shape? >>2. Where does inline content begin to lay out after it has overflowed the >>shape-inside? >> >> >>For the first question, I think that there are three options that make >>sense (see diagram [1]): >>Option 1. Inline content is not allowed to overlap the bottom edge of a >>shape-inside. The line box that would overlap the bottom edge is instead >>pushed down to the next available overflow position (determined by the >>answer to question 2). >>Option 2. Inline content can overlap the bottom edge of a shape-inside. >>The line box that overlaps the shape's bottom edge has a maximum width >>determined by the shape width at that line's top edge. >>Option 3. Inline content can overlap the bottom edge of a shape-inside. >>The line box that overlaps the shape's bottom edge has a maximum width >>determined by the minimum shape width between the line's top edge and the >>shape's bottom edge. >> >> >>I think option 3 makes the most sense, and it's what is proposed in Hans' >>diagrams. Previous lines in the shape-inside have not overflowed the >>shape-inside in the inline direction, and I think we should try to keep >>that behavior. At the same time, inline >> content defaults to stacking vertically with no separation [2], and so I >>think even if a line box overlaps the shape's bottom edge, it should >>still be placed right below the previous line box. >> >> >>On to the second question. I think that there are two major options (see >>diagram [3]): >>Option 1. The first line box outside the shape-inside is placed >>immediately after the previous line box. This aligns with the default >>behavior for inline formatting contexts. >>Option 2. The first line box outside the shape-inside is placed >>immediately after the logical bottom of its containing element. >> >> >>Here, I think option 1 makes the most sense, although it is slightly >>different from the behavior in Hans' diagram. Option 1 is similar to the >>behavior of overflow within a box that contains padding. Inline content >>begins laying out at the top padding edge, >> but continues to stack vertically with no space even if it goes past the >>bottom padding edge [4]. >> >> >>-Bear >> >> >>[1] https://dl.dropbox.com/u/1558588/shape-inside-last-linebox.png >>[2] http://www.w3.org/TR/CSS2/visuren.html#inline-formatting >>[3] https://dl.dropbox.com/u/1558588/shape-inside-overflow-line-box.png >>[4] http://jsfiddle.net/hAMN6/1/ >> >> >> >>From: Hans Muller <hmuller@adobe.com> >>Date: Tuesday, September 25, 2012 5:20 PM >>To: "www-style@w3.org" <www-style@w3.org> >>Subject: [css3-exclusions] how to handle exclusion shape-inside overflow >>Resent-From: <www-style@w3.org> >>Resent-Date: Wednesday, September 26, 2012 4:17 AM >> >> >> >>Here's a CSS Exclusions issue we'd like to see clarified in the spec. >> >> >>https://sites.google.com/site/hansmuller/webkit-blog/shape-inside-overflo >>w >>.png >> >> >>The diagram above shows two examples of how inline content would overflow >>in the block direction, given a "shape-inside" exclusion shape. The shape >>on the left is a rounded rectangle and five line segments, represented by >>blue rectangles, fit entirely >> within it. If the rule for block direction layout within a shape is that >>the width of the last line segment is not constrained by horizontal shape >>edges, then the width of the last (sixth) line segment is constrained by >>the X axis radius of the rectangle's >> rounded corners. Only four line segments fit within the ellipse on the >>right because, per the rule, the bottom of the ellipse would constrain >>the width of a fifth line segment to zero. >> >> >>Assuming overflow is not hidden, content that overflows the shape begins >>below the shape's element or below the last overlapping line segment, >>whichever is logically lower. The width of the overflow content is >>defined by the shape element's parent. >> >> >>Does this sound (and look) correct? >> >> >>This issue was also raised here, >>https://www.w3.org/Bugs/Public/show_bug.cgi?id=16460 >><https://www.w3.org/Bugs/Public/show_bug.cgi?id=16460>. In this case, >>overflow content was to begin immediately below the shape and the >>overflow's width would be defined by the shape-inside element. >> >> >> >> >> >> >> >>Thanks, >>- Hans >> >> >> >> >> >> > >
Received on Monday, 1 October 2012 20:39:45 UTC