diff --git a/css-round-display/Overview.bs b/css-round-display/Overview.bs index d1a723d73fe..9ea6de1ca3b 100755 --- a/css-round-display/Overview.bs +++ b/css-round-display/Overview.bs @@ -148,7 +148,7 @@ Using 'device-radius' with just a single value (e.g. device-radius: 50%) is enou
-CSS Shapes [[CSS-SHAPES]] define the 'shape-inside' property that aligns contents along the edge of a possibly non-rectangular wrapping area. Web authors may use this feature to fit contents inside a round display. However, it could sometimes be hard to specify the wrapping area identical to the shape of a display. Thus, we add a new value 'display' to the 'shape-inside' property to facilitate it. When the 'shape-inside' property on an element is set to 'display', its content (or contained element) is aligned along the display border automatically.
+CSS Shapes [[CSS-SHAPES]] define the 'shape-inside' property that aligns contents along the edge of a possibly non-rectangular wrapping area. Web authors may use this feature to fit contents inside a round display. However, it can be challenging to specify the wrapping area to be identical to the shape of a display. To address such cases, 'shape-inside' is extended with a new value named 'display', such an element having this value will have its content (or contained elements) aligned along the display border automatically.
spec:css21; type:type; text:@@ -202,14 +202,14 @@ The example below shows how the 'shape-inside' property works when it is set to -Even though the shape of the rounded display could be described by circle() or ellipse() as <
>, 'shape-inside: display' is useful that authors make contents to be aligned within the display edge conveniently. In case of complicated shaped displays like curved, stelliform, or polygonal shape, the availability of 'shape-inside: display' is more increased in comparison with a simple shaped display (e.g. regular rounded display). +This property is specially useful for complex shapes (e.g. curved, stelliform, polygonal), that wouldn't be covered by < > (i.e. circle() or ellipse()), allowing web authors to conveniently align contents with the display edge. When a containing block is placed on one end of the display and the containing block has 'shape-inside: display', the descendant blocks of the containing block are basically put on the overlapping region between the containing block and the display area. The overlapping region's shape is mostly complicated shape, so it's difficult to define the shape using previous method like basic-shape. The figure 4 describes these circumstances as follows.
-
Align a part of the content along the display border
+Align part of the content along the display border
What if content overflows? Clipping or scrolling?