[css-round-display] Fix bikeshed errors

Author: Jihye Hong

css-round-display/Overview.bs

@@ -21,8 +21,9 @@ url: https://svgwg.org/svg2-draft/shapes.html#TermShapeElement; type: dfn; spec:
 url: https://www.w3.org/TR/SVG11/struct.html#DefsElement; spec: SVG11; type: element; text: defs
 </pre>
 
-<h2 id="introduction">Introduction</h2>
-<p>
+Introduction {#introduction}
+==================================================
+
 Conventionally, web pages have been shown through a rectangular screen such as PC, tablet, and smart phone. The window content area in a web browser is a rectangle. Each HTML element follows the W3C box model and thus is also a rectangle.
 <br>
 Nowadays, devices come in varied shapes of the displays.
@@ -35,8 +36,8 @@ However, current web standards lack some features to support the devices as foll
 In order to facilitate the use of the web especially on a round display, there could be some features to support it.
 </p>
 <p>
-The 'device-radius' media feature is added to Media Queries.
-Current user agents are not capable of detecting the shape of a display so that authors cannot apply various layouts for a round display. To resolve the issue, 'device-radius' informs the web page of the property regarding the shape of the display.
+The 'shape' media feature is added to Media Queries.
+Current user agents are not capable of detecting the shape of a display so that authors cannot apply various layouts for a round display. To resolve the issue, 'shape' informs the web page of the property regarding the shape of the display.
 <br><br>
 To apply the shape of a display to content area, we extend the 'shape-inside' property of CSS Shapes. The position of the element which is overflowed from the display is adjusted inside the display when using this property even if the authors don’t know the exact shape of the display.
 <br><br>
@@ -51,18 +52,18 @@ This module provides features such as:
 	* 	Aligning contents in the display’s shape
 	* 	Drawing borders along the display’s edge
 	* 	Positioning elements in polar coordinates
-</p>
 
+Terminology {#terminology}
+==================================================
 
-<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 [[MEDIAQUERIES-4]]<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>
+Extending Media Queries for a round display {#extending-media-queries}
+==================================================
 
 Media Queries [[MEDIAQUERIES-4]] define mechanisms to support media-dependent style sheets, tailored for different environments. We propose to extend Media Queries by adding the shape media feature to support various types of displays. This will allow web authors to apply different styles to a web page on the rounded display.
 
@@ -77,7 +78,7 @@ To use different style sheets for a rectangle display and for a round display, m
 </pre>
 
 <p class="note">
-Note: To define a 'discrete' type media feature, the feature is evaluated in a boolean context.
+Note: To define a "discrete" type media feature, the feature is evaluated in a boolean context.
 </p>
 
 The 'shape' media feature describes the general shape of the targeted display area of the output device. It accepts the following values:
@@ -163,7 +164,9 @@ The 'shape' media feature describes the general shape of the targeted display ar
 <p class="note">Note: For other shapes, such as polygons, we need to extend the media features 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>
 
-<h2 id="extending-viewport-rule">Extending the @viewport rule</h2>
+Extending the @viewport rule {#extending-viewport-rule}
+==================================================
+
 <h3 id="viewport-fit-descriptor">The 'viewport-fit' descriptor</h3>
 
 'viewport-fit' can set the size of the initial viewport [[css-device-adapt]].
@@ -192,7 +195,7 @@ The initial viewport is seen through the physical screen of the device. On round
 Values have the following meanings:
 
 <dl dfn-type=value dfn-for=viewport-fit>
-    <dt><var>'auto'</var></dt>
+    <dt><var>auto</var></dt>
     <dd>
         This value doesn’t affect the initial viewport, and the whole web page is viewable. UA can do anything it wants for the reader to view the web page easily.
     </dd>
@@ -253,7 +256,9 @@ If it have to be guaranteed that any part of the web page isn’t hidden, avoidi
     </div>    
 </div>
 
-<h2 id="aligning-content">Aligning content along the display border</h2>
+Aligning content along the display border {#aligning-content}
+==================================================
+
 <h3 id="shape-inside-property">The 'shape-inside' property</h3>
 
 CSS Shapes [[CSS-SHAPES-1]] 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.
@@ -328,7 +333,9 @@ When a containing block is placed on one end of the display and the containing b
 What if content overflows? Clipping or scrolling?
 </p>
 
-<h2 id="drawing-borders">Drawing borders around the display border</h2>
+Drawing borders around the display border {#drawing-borders}
+==================================================
+
 <h3 id="border-boundary-property">The 'border-boundary' property</h3>
 
 We add the 'border-boundary' property to set a boundary constraint that affects the borders of an element.
@@ -390,7 +397,9 @@ The example below shows how the 'border-boundary' property works on drawing bord
 <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">Position the element along the path</h2>
+Position the element along the path {#positioning-content-along-a-path}
+==================================================
+
 This section introduces specifying a path and positioning the element along it.
 
 A path can be defined with 'offset-path' and 'offset-position'. The position of the element on the path is computed by the value of 'offset-distance' and 'offset-anchor'.
@@ -447,15 +456,15 @@ Values have the following meanings:
   </dd>
   <dt><<url>></dt>
   <dd>
-    References an SVG <a>shape element</a> and uses its geometry as motion path. See SVG 1.1 for more information about the initial position and initial direction [[!SVG11]].
+    References an SVG <a>shape element</a> and uses its geometry as path. See SVG 1.1 for more information about the initial position and initial direction [[!SVG11]].
   </dd>
   <dt dfn-type=value><dfn>none</dfn></dt>
   <dd>No path gets created.</dd>
 </dl>
 
 A computed value of other than ''none'' results in the creation of a <a spec="css21">stacking context</a> [[!CSS21]] the same way that CSS 'opacity' [[CSS3COLOR]] does for values other than ''1'', unless the element is an SVG element with out an associated CSS layout box.
 
-A reference that fails to download, is not a reference to an SVG <a>shape element</a> element, or is non-existent is ignored. No motion path and no stacking context are created.
+A reference that fails to download, is not a reference to an SVG <a>shape element</a> element, or is non-existent is ignored. No path and no stacking context are created.
 
 For SVG elements without associated CSS layout box, the <a>used value</a> for <a value for=mask-clip>content-box</a>, <a value for=mask-clip>padding-box</a>, <a value for=mask-clip>border-box</a> and <a value for=mask-clip>margin-box</a> is <a value for=clip-path>fill-box</a>.
 
@@ -510,7 +519,7 @@ Specifies the initial position of the path.
 Values are defined as follows:
 
  <dl dfn-for="offset-position">
-    <dt><var>'auto'</var></dt>
+    <dt><var>auto</var></dt>
     <dd>
     Computes to the current position of the element.
     </dd>
@@ -607,7 +616,7 @@ Values are defined as follows:
           <dt><dfn>farthest-corner</dfn></dt>
           <dd>The distance is measured between the initial position and the farthest corner of the box from it.</dd>
         </dl>
-        <p class='note'>Note: When the initial position is at one of the corners of the containing block, the closest side takes the edge where the initial position is on. Even if the offset given by <<length>> or <<percentage>> changes, the position of the element specified with closest-side is the same.</p>
+        <p class='note'>Note: When the initial position is at one of the corners of the containing block, the closest side takes the edge where the initial position is on. Even if the offset given by <<length>> or <<percentage>> changes, the position of the element specified with <var>closest-side</var> is the same.</p>
     </dd>
 </dl>
 
@@ -650,7 +659,7 @@ See the section Motion processing for how to process a motion position.
     Name: offset-anchor
     Applies to: All elements
     Value: <<position>>
-    Initial: 'auto'
+    Initial: auto
     Media: visual
     Inherited: no
     Percentages: Relative to width and height of an element
@@ -662,16 +671,16 @@ Defines an origin of the element in the path. The origin specifies a position wh
 Values have the following meanings:
 
 <dl>
-    <dt><var>'auto'</var></dt>
+    <dt><var>auto</var></dt>
     <dd>
-       Computes to the value from 'offset-position'. When 'auto' is given to 'offset-anchor', 'offset-position' behaves similar to 'background-position'.
+       Computes to the value from 'offset-position'. When ''auto'' is given to 'offset-anchor', 'offset-position' behaves similar to 'background-position'.
     </dd>
 
     <dt><<position>></dt>
     <dd>
         <dl>
           <dt><<percentage>></dt>
-          <dd>A percentage for the horizontal offset is relative to width of content box area of the element. A percentage for the vertical offset is relative to height of content box area of the element. For example, with a value pair of '100%, 0%', an anchor point is on the upper right corner of the element.</dd>
+          <dd>A percentage for the horizontal offset is relative to width of content box area of the element. A percentage for the vertical offset is relative to height of content box area of the element. For example, with a value pair of ''100%, 0%'', an anchor point is on the upper right corner of the element.</dd>
 
           <dt><<length>></dt>
           <dd>A length value gives a length offset from the upper left corner of the element's content area.</dd>
@@ -740,7 +749,7 @@ Values have the following meanings:
 </div>
 
 <p class="issue">
-How can the margin be applied to an element when <code>polar-origin: 50% 50%</code> and <code>polar-anchor: 50% 50%</code>?
+How can the margin be applied to an element when <code>offset-position: 50% 50%</code> and <code>offset-anchor: 50% 50%</code>?
 <br>
 Which would be a base point for applying it between the upper left corner or center of a containing block?
 With the former, the position of the element changes when the value of the margin changes, while with the latter, the margin value doesn't affect the position of the element.
@@ -759,7 +768,7 @@ With the former, the position of the element changes when the value of the margi
     Animatable: yes
 </pre>
 
-Defines the direction of the element while positioning along the <a>motion path</a>.
+Defines the direction of the element while positioning along the <a>path</a>.
 
 Values have the following meanings:
 
@@ -775,7 +784,7 @@ Values have the following meanings:
   <dd>Indicates that the element has a constant rotation transformation applied to it by the specified rotation angle. See definitions of ''auto'' or ''reverse'' if specified in combination with either one of the keywords. For the purpose of this argument, ''0deg'' points to the direction of the positive y-axis, and positive angles represent clockwise rotation, so ''90deg'' point toward the direction of the positive x-axis.</dd>
 
   <p class="issue">
-    Between the direction of the positive y-axis and that of the positive x-axis, which '0deg'' indicates? 
+    Between the direction of the positive y-axis and that of the positive x-axis, which ''0deg'' indicates? 
     In mathematical theory, ''0deg'' is commonly defined as the positive direction of the x-axis, but <<angle>> value in [[CSS3VAL]] specifies it as upper or north side on the screen.
   </p>
 </dl>
@@ -905,7 +914,7 @@ To determine the <dfn>computed distance</dfn> for a given <var>path</var> and <v
 
 3.  
     :   If <var>path</var> is a closed path:
-    ::  Let <a>computed distance</a> be equal to <var>distance</var> modulus <var>upper bound</bar>.
+    ::  Let <a>computed distance</a> be equal to <var>distance</var> modulus <var>upper bound</var>.
     :   Otherwise:
     ::  Let <a>computed distance</a> be equal to <var>distance</var> clamped by 0 and <var>upper bound</var>.
 
@@ -937,35 +946,42 @@ To determine the <dfn>computed distance</dfn> for a given <var>path</var> and <v
 
 </div>
 
-<h2 id="usecases">
-Use Cases</h2>
+Use Cases {#usecases}
+==================================================
 
 	Use cases are described on
 	<a href="https://wiki.csswg.org/ideas/round-display">these</a>.
 
-<h2 id="changes">
-Changes</h2>
+Changes {#changes}
+==================================================
 
 <h3 id="changes_from_Sep_22_2015">
 Changes from <a href="https://www.w3.org/TR/2015/WD-css-round-display-1-20150922/">September 22<sup>th</sup> 2015</a> version</h3>
 
 	<ul>
-		<li>Added 'polar-anchor'</li>
-		<li>Added 'contain' for 'polar-distance' for avoiding the overflow issue.</li>
-		<li>Added 'polar-origin'</li>
+		<li>Added ''polar-anchor''</li>
+		<li>Added 'contain' for polar-distance for avoiding the overflow issue.</li>
+		<li>Added ''polar-origin''</li>
 		<li>Added extension for 2d rotation function for polar coordinates</li>
 		<li>Changed naming of keyword values for 2d rotation function</li>
-		<li>Removed <code>polar</code> value of 'position'. Polar positioning applies to absolute/fixed/sticky/relative positioned elements</li>
-		<li>Added auto value to 'polar-origin' and make it as initial value</li>
-		<li>Added &lt;size> keywords to 'polar-distance'</li>
+		<li>Removed ''polar'' value of 'position'. Polar positioning applies to absolute/fixed/sticky/relative positioned elements</li>
+		<li>Added ''auto'' value to ''polar-origin'' and make it as initial value</li>
+		<li>Added &lt;size> keywords to ''polar-distance''</li>
 		<li>Added the Acknowledgements, Use cases, and Changes</li>
 	</ul>
 
-<h2 class="no-num" id="acks">
-Acknowledgements</h2>
-<p>
-	This specification is made possible by input from Dong-Young Lee, Soonbo Han,
-	Florian Rivoal, Joone Hur,
-	Kang-Soo Seo, Sangjo Park, Woojun Jung, Chisoon Jeong, Yunbum Sung,
-	Alan Stearns, Brad Kemper, and the CSS Working Group members.
-	Thanks also to Adenilson Cavalcanti for editorial input.</p>
+Security Considerations {#security-considerations}
+==================================================
+
+    There are no known security issues introduced by these features.
+
+Privacy Considerations {#privacy-considerations}
+==================================================
+
+    There are no known privacy issues introduced by these features.
+
+Acknowledgements {#acks}
+==================================================
+	This specification is made possible by input from Dong-Young Lee, Soonbo Han, Florian Rivoal, Joone Hur,
+	Kang-Soo Seo, Sangjo Park, Woojun Jung, Chisoon Jeong, Yunbum Sung, Alan Stearns, Brad Kemper, and the CSS Working Group members.
+	Thanks also to Adenilson Cavalcanti for editorial input.