[css-logical-props] Add margin-block/margin-inline & friends. Fixes #…

…1282 per WG resolution https://lists.w3.org/Archives/Public/www-style/2013May/0201.html accepting proposal https://lists.w3.org/Archives/Public/www-style/2013Apr/0265.html

css-logical-props/Overview.bs

@@ -66,7 +66,7 @@ Introduction</h1>
   (in order to correctly implement the default HTML styles),
   The CSSWG resolved that although the draft is not very stable overall,
   the requisite features in
-  <a href="#logical-controls"></a> and <a href="#logical-box-props"></a>
+  <a href="#directional-keywords"></a> and <a href="#box"></a>
   are approved for shipping.
   However, there are a number of unstable features in this draft
   (which are not required for implementing the HTML default style sheet, incidentally),
@@ -78,7 +78,7 @@ Introduction</h1>
     <li>The 'inset-*' properties,
         because the name of the prefix is undecided.
         (It used to be 'offset-*', but ended up conflicting with another CSS feature.)
-    <li>The ''margin/logical'' keyword on shorthands,
+    <li>The ''border/logical'' keyword on shorthands,
         because the name of the keyword may change or it may be replaced by some other syntactic marker.
     <li>The 'background-image-transform' and 'border-image-transform' properties,
         because they have, as far as the editor is aware,
@@ -88,7 +88,7 @@ Introduction</h1>
   Please file them in GitHub, tweet them to @csswg, or send them to [email protected].
 </div>
 
-<h2 id="logical-controls">
+<h2 id="directional-keywords">
 Flow-Relative Values: <css>block-start</css>, <css>block-end</css>, <css>inline-start</css>, <css>inline-end</css></h2>
 
   Properties that accept physical directional keyword values
@@ -151,7 +151,7 @@ Flow-Relative Values for the 'resize' Property</h3>
     New values: block | inline
   </pre>
 
-<h2 id="logical-page">
+<h2 id="page">
 Flow-Relative Page Classifications</h2>
 
   In CSS, all pages are classified by user agents as either left pages or right pages. [[!CSS21]]
@@ -199,7 +199,7 @@ Flow-Relative Page Classifications</h2>
   The flow-relative page selectors have specificity equal to
   the ':left' and ':right' page selectors.
 
-<h2 id="logical-box-props">
+<h2 id="box">
 Flow-Relative Box Model Properties</h2>
 
   This specification introduces new CSS properties
@@ -259,7 +259,7 @@ Flow-Relative Box Model Properties</h2>
   (such as <code>getComputedStyle()</code>)
   must return the same value for equivalent pairs of such properties.
 
-<h3 id="logical-dimension-properties">
+<h3 id="dimension-properties">
 Logical Height and Logical Width: the 'block-size' and 'inline-size' properties</h3>
 
   <pre class="propdef">
@@ -307,9 +307,9 @@ Logical Height and Logical Width: the 'block-size' and 'inline-size' properties<
   'max-width' and 'max-height' properties.
   The mapping depends on the element's 'writing-mode'.
 
-<h3 id="logical-prop">
-Flow-relative Margins and Offsets:
-the margin- and inset-block-start/block-end/inline-start/inline-end properties</h3>
+<h3 id="margin-properties">
+Flow-relative Margins:
+the 'margin-block-start', 'margin-block-end', 'margin-inline-start', 'margin-inline-end' properties and 'margin-block' and 'margin-inline' shorthands</h3>
 
   <pre class="propdef">
   Name: margin-block-start, margin-block-end, margin-inline-start, margin-inline-end
@@ -325,6 +325,24 @@ the margin- and inset-block-start/block-end/inline-start/inline-end properties</
   These properties correspond to the 'margin-top', 'margin-bottom', 'margin-left', and 'margin-right' properties.
   The mapping depends on the element's 'writing-mode', 'direction', and 'text-orientation'.
 
+  <pre class="propdef shorthand">
+  Name: margin-block, margin-inline
+  Value: <<'margin-left'>>{1,2}
+  </pre>
+
+  These two <a>shorthand properties</a> set the
+  'margin-block-start' &amp; 'margin-block-end'
+  and
+  'margin-inline-start' &amp; 'margin-inline-end',
+  respectively.
+  The first value represents the <a>start</a> edge style,
+  and the second value represents the <a>end</a> edge style.
+  If only one value is given, it applies to both the <a>start</a> and <a>end</a> edges.
+
+<h3 id="inset-properties">
+Flow-relative Offsets:
+the 'inset-block-start', 'inset-block-end', 'inset-inline-start', 'inset-inline-end' properties and 'inset-block', 'inset-inline', and 'inset' shorthands</h3>
+
   <pre class="propdef">
   Name: inset-block-start, inset-block-end, inset-inline-start, inset-inline-end
   Value: <<'top'>>
@@ -340,6 +358,20 @@ the margin- and inset-block-start/block-end/inline-start/inline-end properties</
   'top', 'bottom', 'left', and 'right' properties.
   The mapping depends on the element's 'writing-mode', 'direction', and 'text-orientation'.
 
+  <pre class="propdef shorthand">
+  Name: inset-block, inset-inline
+  Value: <<'top'>>{1,2}
+  </pre>
+
+  These two <a>shorthand properties</a> set the
+  'inset-block-start' &amp; 'inset-block-end'
+  and
+  'inset-inline-start' &amp; 'inset-inline-end',
+  respectively.
+  The first value represents the <a>start</a> edge style,
+  and the second value represents the <a>end</a> edge style.
+  If only one value is given, it applies to both the <a>start</a> and <a>end</a> edges.
+
   <pre class="propdef shorthand">
   Name: inset
   Value: <<'top'>>{1,4}
@@ -349,8 +381,9 @@ the margin- and inset-block-start/block-end/inline-start/inline-end properties</
   'top', 'right', 'bottom', and 'left' properties.
   Values are assigned to its <a>sub-properties</a> as for 'margin'.
 
-<h3 id="border-padding">
-Logical Padding and Border: the padding- and border-<var>*</var>-block-start/block-end/inline-start/inline-end properties</h3>
+<h3 id="padding-properties">
+Flow-relative Padding:
+the 'padding-block-start', 'padding-block-end', 'padding-inline-start', 'padding-inline-end' properties and 'padding-block' and 'padding-inline' shorthands</h3>
 
   <pre class="propdef">
   Name: padding-block-start, padding-block-end, padding-inline-start, padding-inline-end
@@ -367,9 +400,30 @@ Logical Padding and Border: the padding- and border-<var>*</var>-block-start/blo
   'padding-top', 'padding-bottom', 'padding-left', and 'padding-right' properties.
   The mapping depends on the element's 'writing-mode', 'direction', and 'text-orientation'.
 
+  <pre class="propdef shorthand">
+  Name: padding-block, padding-inline
+  Value: <<'padding-left'>>{1,2}
+  </pre>
+
+  These two <a>shorthand properties</a> set the
+  'padding-block-start' &amp; 'padding-block-end'
+  and
+  'padding-inline-start' &amp; 'padding-inline-end',
+  respectively.
+  The first value represents the <a>start</a> edge style,
+  and the second value represents the <a>end</a> edge style.
+  If only one value is given, it applies to both the <a>start</a> and <a>end</a> edges.
+
+<h3 id="border-properties">
+Flow-relative Borders</h3>
+
+<h4 id="border-width">
+Flow-relative Border Widths:
+the 'border-block-start-width', 'border-block-end-width', 'border-inline-start-width', 'border-inline-end-width' properties and 'border-block-width' and 'border-inline-width' shorthands</h4>
+
   <pre class="propdef">
   Name: border-block-start-width, border-block-end-width, border-inline-start-width, border-inline-end-width
-  Value: border-width
+  Value: <<'border-top-width'>>
   Initial: medium
   Applies to: all elements
   Inherited: no
@@ -382,9 +436,28 @@ Logical Padding and Border: the padding- and border-<var>*</var>-block-start/blo
   'border-top-width', 'border-bottom-width', 'border-left-width', and 'border-right-width' properties.
   The mapping depends on the element's 'writing-mode', 'direction', and 'text-orientation'.
 
+  <pre class="propdef shorthand">
+  Name: border-block-width, border-inline-width
+  Value: <<'border-top-width'>>{1,2}
+  </pre>
+
+  These two <a>shorthand properties</a> set the
+  'border-block-start-width' &amp; 'border-block-end-width'
+  and
+  'border-inline-start-width' &amp; 'border-inline-end-width',
+  respectively.
+  The first value represents the <a>start</a> edge width,
+  and the second value represents the <a>end</a> edge width.
+  If only one value is given, it applies to both the <a>start</a> and <a>end</a> edges.
+
+
+<h4 id="border-style">
+Flow-relative Border Styles:
+the 'border-block-start-style', 'border-block-end-style', 'border-inline-start-style', 'border-inline-end-style' properties and 'border-block-style' and 'border-inline-style' shorthands</h4>
+
   <pre class="propdef">
   Name: border-block-start-style, border-block-end-style, border-inline-start-style, border-inline-end-style
-  Value: border-style
+  Value: <<'border-top-style'>>
   Initial: none
   Applies to: all elements
   Inherited: no
@@ -397,6 +470,24 @@ Logical Padding and Border: the padding- and border-<var>*</var>-block-start/blo
   'border-top-style', 'border-bottom-style', 'border-left-style', and 'border-right-style' properties.
   The mapping depends on the element's 'writing-mode', 'direction', and 'text-orientation'.
 
+  <pre class="propdef shorthand">
+  Name: border-block-style, border-inline-style
+  Value: <<'border-top-style'>>{1,2}
+  </pre>
+
+  These two <a>shorthand properties</a> set the
+  'border-block-start-style' &amp; 'border-block-end-style'
+  and
+  'border-inline-start-style' &amp; 'border-inline-end-style',
+  respectively.
+  The first value represents the <a>start</a> edge style,
+  and the second value represents the <a>end</a> edge style.
+  If only one value is given, it applies to both the <a>start</a> and <a>end</a> edges.
+
+<h4 id="border-color">
+Flow-relative Border Colors:
+the 'border-block-start-color', 'border-block-end-color', 'border-inline-start-color', 'border-inline-end-color' properties and 'border-block-color' and 'border-inline-color' shorthands</h4>
+
   <pre class="propdef">
   Name: border-block-start-color, border-block-end-color, border-inline-start-color, border-inline-end-color
   Value: color
@@ -412,24 +503,46 @@ Logical Padding and Border: the padding- and border-<var>*</var>-block-start/blo
   'border-top-color', 'border-bottom-color', 'border-left-color', and 'border-right-color' properties.
   The mapping depends on the element's 'writing-mode', 'direction', and 'text-orientation'.
 
+  <pre class="propdef shorthand">
+  Name: border-block-color, border-inline-color
+  Value: <<'border-top-color'>>{1,2}
+  </pre>
 
-  <pre class="propdef">
+  These two <a>shorthand properties</a> set the
+  'border-block-start-color' &amp; 'border-block-end-color'
+  and
+  'border-inline-start-color' &amp; 'border-inline-end-color',
+  respectively.
+  The first value represents the <a>start</a> edge style,
+  and the second value represents the <a>end</a> edge style.
+  If only one value is given, it applies to both the <a>start</a> and <a>end</a> edges.
+
+<h4 id="border-shorthands">
+Flow-relative Border Shorthands:
+the 'border-block-start', 'border-block-end', 'border-inline-start', 'border-inline-end' properties and 'border-block' and 'border-inline' shorthands</h4>
+
+  <pre class="propdef shorthand">
   Name: border-block-start, border-block-end, border-inline-start, border-inline-end
-  Value: border-width || border-style || color
-  Initial: (see individual properties)
-  Applies to: all elements
-  Inherited: no
-  Percentages: see individual properties
-  Media: visual
-  Computed value: see individual properties
+  Value: <<'border-top-width'>> || <<'border-top-style'>> || <<color>>
   </pre>
 
   These properties correspond to the
   'border-top', 'border-bottom', 'border-left', and 'border-right' properties.
   The mapping depends on the element's 'writing-mode', 'direction', and 'text-orientation'.
 
+  <pre class="propdef shorthand">
+  Name: border-block, border-inline
+  Value: <<'border-block-start'>>
+  </pre>
+
+  These two <a>shorthand properties</a> set the
+  'border-block-start-color' &amp; 'border-block-end-color'
+  and
+  'border-inline-start-color' &amp; 'border-inline-end-color',
+  respectively.
+
 <h3 id="logical-shorthand-keyword">
-Shorthand Properties with <css>logical</css> Keyword</h3>
+Four-Directional Shorthand Properties: the 'margin', 'padding', 'border-width', 'border-style', and 'border-color' shorthands</h3>
 
   The shorthand properties for margin, padding, and border
   set values for physical properties by default.
@@ -448,9 +561,9 @@ Shorthand Properties with <css>logical</css> Keyword</h3>
   <ul>
     <li>'margin'
     <li>'padding'
-    <li>'border-color'
-    <li>'border-style'
     <li>'border-width'
+    <li>'border-style'
+    <li>'border-color'
   </ul>
 
   The syntax for these properties is effectively changed by replacing
@@ -602,10 +715,11 @@ Border Image Transform: The 'border-image-transform' property</h3>
 <h2 id="changes">
 Changes</h2>
 
-  Changes since the last Working Draft include:
+  Changes since the earler Editors Drafts include:
   <ul>
     <li>Making all properties cascade using the <a>writing mode</a> specified on the element, not on its parent.
     <li>Making the ordering of longhands within 'margin'-like shorthands put inline-start before inline-end.
+    <li>Adding the '*-inline' and '*-block' shorthand forms for margins/borders/padding.
     <li>Renaming the <css>outset-*</css> properties to 'inset-*' and marking an issue for discussion.
     <li>Adding an Introduction section.
     <li>Updating to current terminology of CSS Writing Modes.