[css-round-display] Correct overall mistakes

Author: anawhj

css-round-display/Overview.bs

@@ -22,7 +22,7 @@ Everything on the web is a rectangle. For example, the window content area in a
 In order to facilitate the use of the web on a round display, we need to rethink existing CSS features.
 </p>
 <p>
-Current user agents are not capable of detecting the shape of a display so that authors cannot apply a different layout for a round display. To resolve the issue, we add the 'device-radius' media feature to Media Queries. The feature informs the web page of the property regarding the shape of the display.
+Current user agents are not capable of detecting the shape of a display so that authors cannot apply different layouts for a round display. To resolve the issue, we add the 'device-radius' media feature to Media Queries. The feature informs the web page of the property regarding the shape of the display.
 </p>
 <p>
 To apply the shape of a display to content area, we extend the 'shape-inside' property of CSS Shapes. We also add the 'border-boundary' property to CSS Borders and introduce polar positioning for a better web design suitable for a round display.
@@ -51,7 +51,7 @@ This media query indicates that different style sheets will be applied depending
 &lt;link media="screen and (device-radius: 50%)" rel="stylesheet" href="round.css" />
 </pre>
 <p>
-By the mechanism of media queries, if the value of the 'device-radius' media feature is less than or equal to 49%, '<code>rectangle.css</code>' is applied. If it is 50%, '<code>round.css</code>' is applied.
+By the mechanism of media queries, if the value of the 'device-radius' media feature is less than 50%, '<code>rectangle.css</code>' is applied. If it is 50%, '<code>round.css</code>' is applied.
 </p>
 </div>
 <p>As in the '<code>border-radius</code>' property, the 'device-radius' media feature can describe various round shapes of displays, such as rectangle, regular circle, ellipse, and rectangle with round corners.
@@ -64,14 +64,14 @@ By the mechanism of media queries, if the value of the 'device-radius' media fea
 	Percentage: Refer to corresponding dimension of the display
 </pre>
 <p class="note">
-Note: To define a '<code>range</code>' type media feature, the feature may be written as a normal media feature, but with a '<code>min-</code>' or '<code>max-</code>' prefix on the feature name. '<code>min-</code>' or '<code>max-</code>' prefixes express 'greater or equal to' or 'smaller or equal to' constriants respectively.
+Note: To define a '<code>range</code>' type media feature, the feature may be written as a normal media feature, but with a '<code>min-</code>' or '<code>max-</code>' prefix on the feature name. '<code>min-</code>' or '<code>max-</code>' prefixes express 'greater or equal to' or 'smaller or equal to' constraints respectively.
 </p>
 <p>
-The length or percentage value of the '<code>device-radius</code>' property defines a radius of a quarter ellipse in terms of the shape of the corner of the outer screen edge (This is similar to the '<code>border-radius</code>' properties. see the 'border-radius' description). If the length is zero the shape of screen is a rectangle, otherwise it is a rectangle with rounded corners or a regular circle. A percentage value of the '<code>device-radius</code>' is proportional to the diameter of the screen. If the screen shape is the regular circle, '<code>device-radius</code>': 50% has a true value, because a half of the diameter of the regular circle is the radius of the screen shape. An negative value is not allowed.
+The length or percentage value of the '<code>device-radius</code>' property defines a radius of a quarter ellipse in terms of the shape of the corner of the outer screen edge (This is similar to the '<code>border-radius</code>' property. See the 'border-radius' description). If the length is zero, the shape of screen is a rectangle, otherwise it is a rectangle with rounded corners or a regular circle. A percentage value of the '<code>device-radius</code>' is proportional to the diameter of the screen. If the screen shape is the regular circle, '<code>device-radius</code>': 50% has a true value, because a half of the diameter of the regular circle is the radius of the screen shape. A negative value is not allowed.
 </p>
 
 <div class='example'>
-The example below shows how a web page looks in the different shape of displays. This is a simple clock written in HTML. (without 'device-radius')
+The example below shows how a web page looks in the different shapes of displays. This is a simple clock written in HTML. (without 'device-radius')
 <pre>&lt;!DOCTYPE html>
 
 &lt;html>
@@ -103,7 +103,7 @@ The example below shows how a web page looks in the different shape of displays.
 <div style="width: 700px">
     <p class="caption">Devices where the 'device-radius' media feature is not applicable</p>
 </div>
-On the other hand, the example below shows how the 'device-radius' media feature works in the different shape of displays. This is the same as the code above except of media queries usage. The 'device-radius' media feature can be used as follows:
+On the other hand, the example below shows how the 'device-radius' media feature works in the different shapes of displays. This is the same as the code above except of media queries usage. The 'device-radius' media feature can be used as follows:
 <pre>&lt;!-- index.html -->
 
 &lt;head>
@@ -138,16 +138,16 @@ If this example code is loaded in a regular round display, '<code>round.css</cod
     <p class="caption">Devices where the 'device-radius' media feature is applicable</p>
 </div>
 </div>
-<p class="note">Note: If the shapes of displays are various, such as polygons, we need to extend the media features more with additional parameters. The current features have limitations to support the diversity beyond round shapes. How can we express star-shaped polygons? (E.g., SVG syntax, etc.) Of course, there is a trade-off between simplicity and expressiveness.
+<p class="note">Note: If the shapes of displays are various, such as polygons, we need to extend the media features more with additional parameters. The current features have limitations to support the diversity beyond round shapes. How can we express star-shaped polygons? (e.g. SVG syntax, etc.) Of course, there is a trade-off between simplicity and expressiveness.
 </p>
 <p class="issue">
-Using 'device-radius' with just a single value (e.g., device-radius: 50%) is enough (for simplicity)? Otherwise, do we need to support all possible values the same as 'border-radius'?
+Using 'device-radius' with just a single value (e.g. device-radius: 50%) is enough (for simplicity)? Otherwise, do we need to support all possible values the same as 'border-radius'?
 </p>
 
 <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 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 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.
 </p>
 <pre class='link-defaults'>
 spec:css21; type:type; text:<uri>
@@ -201,10 +201,10 @@ 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).
+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).
 </p>
 <p>
-When the containing block is placed on one end of the display and the block has 'shape-inside: display', The descendants 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.
+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 style="width: 500px" src="images/ex3.png">
@@ -267,7 +267,7 @@ The example below shows how the 'border-boundary' property works on drawing bord
 <div style="width: 600px">
     <p class="caption">Align the content along the display border</p>
 </div>
-<p class="note">Note: If the value of 'border-boundary' is parent or display, the border lines of a element are actually just a visual effect. It triggers a layout for rendering in a general way, but in the above cases(border-boundary: parent|display), the layout doesn't occurs and it only draws inward from the containing block's borders. With this situation, the borders might hide contents around the display edge.
+<p class="note">Note: If the value of 'border-boundary' is parent or display, border lines of the element are actually just a visual effect. It triggers a layout for rendering in a general way, but in the above cases (border-boundary: parent|display), the layout doesn't occur and it only draws the border lines inward from the containing block's borders. With this situation, the borders might hide contents around the display edge.
 </p>
 
 <h2 id="positioning-content">Positioning content by using the polar coordinate system</h2>
@@ -317,7 +317,7 @@ The 'polar-distance' property specifies the distance from the center of the pare
 </pre>
 
 <div class='example'>
-This example shows a way to align elements within the polar coordinates system.
+This example shows a way to align elements within the polar coordinate system.
 <pre>&lt;body>
 
   &lt;div id="circle1" style="position: polar; polar-angle: 0deg; polar-distance: 50%">&lt;/div>
@@ -333,7 +333,7 @@ This example shows a way to align elements within the polar coordinates system.
 </div>
 
 <p class="issue">
-By default, the 'polar-distance' property specifies the distance from the origin (or the center) of the containing element to that of the contained element. It needs to specify how can the origin of the containing element set.
+By default, the 'polar-distance' property specifies the distance from the origin (or the center) of the containing element to that of the contained element. It needs to specify how the origin of the containing element can be set.
 </p>
 <p class="issue">
 What value does the percentage value of the 'polar-distance' property refer to? The width of the containing element, or what? One feasible solution is to use the distance between the origin and the point on the border at the angle given by the 'polar-angle' property from the X-axis.