[css-round-display] Update Media Queries Extension using florian's feedback(1-6)

Author: hyojinLGE

css-round-display/Overview.bs

@@ -7,7 +7,7 @@ Status: ED
 ED: http://dev.w3.org/csswg/css-round-display/
 Editor: Hyojin Song, LG Electronics, hyojin22.song@lge.com
 Editor: Soonbo Han, LG Electronics, soonbo.han@lge.com
-Abstract: This document proposes CSS extensions to support a round display. It extends existing CSS features including Media Queries[[MEDIAQ]], CSS Shapes[[CSS-SHAPES-1]], Borders[[CSS3-BORDER]], and Positioned Layout[[CSS3-POSITIONING]]. The extensions will help web authors to build a web page suitable for a round display.
+Abstract: This document describes CSS extensions to support a round display. It extends existing CSS features including Media Queries[[MEDIAQUERIES]], CSS Shapes[[CSS-SHAPES-1]], Borders[[CSS3-BORDER]], and Positioned Layout[[CSS3-POSITIONING]]. The extensions will help web authors to build a web page suitable for a round display.
 </pre>
 
 
@@ -21,24 +21,24 @@ 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 propose to 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 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.
 </p>
 <p>
-To apply the shape of a display to content area, we propose to extend the 'shape-inside' property of CSS Shapes. We also propose to add the 'border-boundary' property to CSS Borders and introduce polar positioning for a better web design suitable for a round display.
+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.
 </p>
 
 
 <h2 id="terminology">Terminology</h2>
 This specification follows the CSS property definition conventions from [[!CSS21]]. <br />
-The detailed description of Media Queries is defined in [[!MEDIAQ]]<br />
+The detailed description of Media Queries is defined in [[!MEDIAQUERIES]]<br />
 The detailed description of CSS Shapes is defined in [[CSS-SHAPES-1]]<br />
 The detailed description of Borders is defined in [[CSS3-BORDER]]<br />
 The detailed description of Positioned Layout is defined in [[CSS3-POSITIONING]]<br />
 
 
 <h2 id="extending-media-queries">Extending Media Queries for a round display</h2>
 <p>
- Media Queries [[!MEDIAQ]] define mechanisms to support media-dependent style sheets, tailored for different media types. We propose to extend Media Queries by adding the 'device-radius' media feature to support a round display. This will allow web authors to apply different styles to a web page on the rounded display.
+ Media Queries [[!MEDIAQUERIES]] define mechanisms to support media-dependent style sheets, tailored for different environments. We propose to extend Media Queries by adding the 'device-radius' media feature to support a round display. This will allow web authors to apply different styles to a web page on the rounded display.
 </p>
 <section>
 <h3 id="device-radius-media-feature">The 'device-radius' media feature</h3>
@@ -47,21 +47,24 @@ To use different style sheets for a rectangle display and for a round display, m
 This media query indicates that different style sheets will be applied depending on the display shape.
 <pre>
 &lt;link media="screen and (max-device-radius: 49%)" rel="stylesheet" href="rectangle.css" />
-&lt;link media="screen and (min-device-radius: 50%)" rel="stylesheet" href="round.css" /></pre>
-</div>
+&lt;link media="screen and (min-device-radius: 50%)" rel="stylesheet" href="round.css" />
+</pre>
 <p>
-This media feature accepts optional '<code>min-</code>' or '<code>max-</code>' prefixes to express 'greater or equal to' and 'smaller or equal to' contstriants. By the mechanism of media queries, if the value of the 'device-radius' media feature is less than or equal to 49%, '<code>rectangle-clock.css</code>' is applied. If it is 50%, '<code>round-clock.css</code>' is applied.
+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.
 </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.
 </p>
 <pre class='descdef'>
 	Name: device-radius
 	Type: range
     For: @media
 	Value: [ <<length>> | <<percentage>> ]
-	Initial: 0
 	Percentage: Refer to corresponding dimension of the display
 </pre>
+<p class="note">
+This media feature accepts optional '<code>min-</code>' or '<code>max-</code>' prefixes to express 'greater or equal to' and 'smaller or equal to' contstriants.
+</p>
 <p>
 The example below shows how a web page looks in the different shape of displays.
 </p>
@@ -151,7 +154,7 @@ Using 'device-radius' with just a single value (e.g., device-radius: 50%) is eno
 <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 propose to 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 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>
@@ -213,7 +216,7 @@ What if content overflows? Clipping or scrolling?
 <h2 id="drawing-borders">Drawing borders around the display border</h2>
 <h3 id="border-boundary-property">The 'border-boundary' property</h3>
 <p>
-We propose the 'border-boundary' property to set a boundary constraint that affects the borders of an element.
+We add the 'border-boundary' property to set a boundary constraint that affects the borders of an element.
 </p>
 <pre class='propdef'>
     Name: border-boundary
@@ -266,7 +269,7 @@ The example below shows how the 'border-boundary' property works on drawing bord
 
 <h2 id="positioning-content">Positioning content by using the polar coordinate system</h2>
 <p>
-Elements are often placed along a circle or concentric circles, and polar coordinates are useful to handle such cases. This section introduces polar positioning to support layout of elements in the polar coordinate system where the position of an element is determined by a distance from a fixed point within the containing element and an angle from a fixed direction. We propose to add '<code>polar</code>' to the value of the 'position' property to support the polar coordinates of the children of an element. The 'polar-angle' and 'polar-distance' properties specify the position of an element (or a child).
+Elements are often placed along a circle or concentric circles, and polar coordinates are useful to handle such cases. This section introduces polar positioning to support layout of elements in the polar coordinate system where the position of an element is determined by a distance from a fixed point within the containing element and an angle from a fixed direction. We add '<code>polar</code>' to the value of the 'position' property to support the polar coordinates of the children of an element. The 'polar-angle' and 'polar-distance' properties specify the position of an element (or a child).
 </p>
 <h3 id="position-property">The 'position' property</h3>
 When the 'position' property on an element is set to '<code>polar</code>', its children use the polar coordinates.