Skip to content

Quite a few misc fixes plus rephrasing 2 paragraphs #62

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 20, 2015
Merged

Quite a few misc fixes plus rephrasing 2 paragraphs #62

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions css-round-display/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,7 +148,7 @@ Using 'device-radius' with just a single value (e.g. device-radius: 50%) is enou
<h2 id="aligning-content">Aligning content along the display border</h2>
<h3 id="shape-inside-property">The 'shape-inside' property</h3>
<p>
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 '<code>display</code>' to the 'shape-inside' property to facilitate it. When the 'shape-inside' property on an element is set to '<code>display</code>', 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 '<code>display</code>', such an element having this value will have its content (or contained elements) aligned along the display border automatically.
</p>
<pre class='link-defaults'>
spec:css21; type:type; text:<uri>
Expand Down Expand Up @@ -202,14 +202,14 @@ The example below shows how the 'shape-inside' property works when it is set to
</div>
</div>
<p>
Even though the shape of the rounded display could be described by circle() or ellipse() as <<basic-shape>>, '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 <<basic-shape>> (i.e. circle() or ellipse()), allowing web authors to conveniently align contents with the display edge.
</p>
<p>
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.
</p>
<div style="width: 500px;">
<img alt="An image of two examples to show the principle of shape-inside: display" style="width: 500px" src="images/shape_inside_a.png">
<p class="caption">Align a part of the content along the display border</p>
<p class="caption">Align part of the content along the display border</p>
</div>
<p class="issue">
What if content overflows? Clipping or scrolling?
Expand Down