[css-logical-props] Initial renaming pass to bring up-to-date. Still need to define midway shorthands.

--HG--
extra : rebase_source : 5ba4baad49a4f5aa3c964efc9e422f5d1b3a2b43

Author: fantasai

css-logical-props/Overview.bs

@@ -7,50 +7,80 @@ Status: ED
 Group: csswg
 ED: http://dev.w3.org/csswg/css-logical-props/
 Editor: Rossen Atanassov, Microsoft, ratan@microsoft.com
-Editor: fantasai, Mozilla, http://fantasai.inkedblade.net/contact
+Editor: fantasai, Invited Expert, http://fantasai.inkedblade.net/contact
 Abstract: This module introduces logical properties and values that provide the author with the ability to control layout through logical, rather than physical, direction and dimension mappings. The module defines logical properties and values for the features defined in [CSS21]. These properties are writing-mode relative equivalents of their corresponding physical properties.
 Ignored Terms: div, dl, dfn
+Link Defaults: css21 (property) width/height/min-width/min-height/max-width/max-height
 </pre>
 
+<h1 id="intro">
+Introduction</h1>
+
+  See [[!CSS3-WRITING-MODES]] <a href="http://www.w3.org/TR/css-writing-modes-3/#abstract-layout">Abstract Layout</a>
+  for details on how to map between logical and physical terms.
+  This mapping controls the interpretation of logical keywords and properties.
+
 <h2 id="logical-controls">
-Logical Directional Values: before, after, start, end</h2>
+Logical Directional Values: ''block-start'', ''block-end'', ''inline-start'', ''inline-end''</h2>
 
-  Properties that accept physical directional keyword values ('top', 'bottom',
-  'left', or 'right') are redefined to also accept the appropriate logical
-  directional keywords (''before'', ''after'', ''start'', or ''end''). In such cases,
+  Properties that accept physical directional keyword values
+  ('top', 'bottom', 'left', or 'right') are redefined
+  to also accept the appropriate logical directional keywords.
+  In such cases,
   the logical values can be used in place of the corresponding physical values.
   For properties that take multiple keywords, combinations of logical and
-  physical values are not allowed.
+  physical values are not allowed (unless otherwise specified in a future specification).
 
-  The following properties accept the ''start'' and ''end'' keywords where 'left'
-  and 'right' are allowed:
-  <ul>
-    <li>'caption-side', if the 'left' and 'right' values are supported in
-        horizontal writing modes (See the <a href="#caption-side">section on
-        <code>caption-side</code></a>)
-    <li>'clear'
-    <li>'background-position'
-    <li>'float'
-    <li>'text-align'
-  </ul>
+  Properties can be either 1-dimensional or 2-dimensional.
+  When contextually constrained to one dimension,
+  the logical keywords are shortened.
 
-	The following properties accept the ''before'' and ''after'' keywords where
-  'top' and 'bottom' are allowed:
-  <ul>
-    <li>'caption-side'
-  </ul>
+<h3 id="caption-side">
+Logical Values for the 'caption-side' Property</h3>
 
-  See the section on <a href="#abstract-layout">Abstract Layout</a>
-  details on how to map between logical and physical terms. This mapping
-  controls the interpretation of logical keywords.
+  <pre class="propdef">
+    Name: caption-side
+    New values: block-start | block-end | inline-start | inline-end
+  </pre>
 
-	<p class="issue">
-    float needs coordination with GCPM where it defines page floats
+  The 'caption-side' property is 1-dimensional in CSS2.1,
+  but was 2-dimensional in CSS2.0,
+  (and presumably will be 2-dimensional again in the next update to CSS tables).
+  It therefore accepts the full set of logical directions.
+  However, the ''inline-start'' and ''inline-end'' properties
+  (which correspond to the behavior of the ''left'' and ''right'' values in CSS2.0)
+  are only required to be supported by UAs that support ''left'' and ''right''.
+
+<h3 id="float-clear">
+Logical Values for the 'float' and 'clear' Properties</h3>
+
+  <pre class="propdef">
+    Name: float, clear
+    New values: inline-start | inline-end
+  </pre>
+
+  Issue: Is this a 2-directional property? Should these just be ''start''/''end''?
+
+<h3 id="text-align">
+Logical Values for the 'text-align' Property</h3>
+
+  <pre class="propdef">
+    Name: text-align
+    New values: start | end
+  </pre>
+
+  These values are normatively defined in [[!CSS3TEXT]].
 
   <p class="issue">
-    'resize' accepts ''horizontal'' and ''vertical'', and these terminologies
-    should be physical. should we add 'resize-x and resize-y' as logical
-    values?
+    float needs coordination with GCPM where it defines page floats
+
+<h3 id="resize">
+Logical Values for the 'text-align' Property</h3>
+
+  <pre class="propdef">
+    Name: resize
+    New values: block | inline
+  </pre>
 
 <h2 id="logical-page">
 Logical Page Classifications</h2>
@@ -63,6 +93,7 @@ Logical Page Classifications</h2>
   or later side of a spread, rather than to the left or right side of a
   spread, this module introduces the following additional keywords for the
   'page-break-after' and 'page-break-before' properties [[!CSS21]]:
+
   <dl dfn-type="value" dfn-for="logical-page">
     <dt><dfn>recto</dfn>
       <dd>
@@ -75,15 +106,9 @@ Logical Page Classifications</h2>
         and 'right' in right-to-left page progressions.
   </dl>
 
-  <p class="issue">
-    recto/verso or even/odd or even-page/odd-page? If using odd/even, could use
-    "The page number used to determine whether a page is even or odd
-    is the physical page count starting from 1, and is sometimes different from
-    the page number printed on the page. In other words, if a page is on the
-    same side as the first page, it is an odd page." But which side would we
-    want if page-break-before changes the first page?
-
-  Logical page selectors are added to support logical page selection.
+  These values are further defined in [[!CSS3-BREAK]].
+
+  Logical page selectors are also added to support logical page selection.
   Authors typically place page numbers using physical placements,
   but the contents of headers often follows conventions depending
   on which page in the spread is earlier.
@@ -106,61 +131,61 @@ Logical Page Classifications</h2>
   and ':right' page selectors.
 
 <h3 id="logical-dimension-properties">
-Logical Height and Logical Width: the 'length' and 'measure' properties</h3>
+Logical Height and Logical Width: the 'block-size' and 'inline-size' properties</h3>
 
   <pre class="propdef">
-  Name: measure, length
-  Value: length | percentage | auto
+  Name: block-size, inline-size
+  Value: <<'width'>>
   Initial: auto
   Applies to: same as 'width' and 'height'
   Inherited: no
-  Percentages: 'measure', 'length' of containing block
+  Percentages: block-size/inline-size, respectively, of containing block
   Media: visual
-  Computed value: the percentage as specified or the absolute length or auto (see text)
+  Computed value: same as 'width' and 'height'
   </pre>
 
-  These properties correspond to the 'width' and 'height' properties. The
-  mapping depends on the element's 'writing-mode'.
+  These properties correspond to the 'width' and 'height' properties.
+  The mapping depends on the element's 'writing-mode'.
 
   <pre class="propdef">
-  Name: min-measure, min-length
-  Value: length | percentage
+  Name: min-block-size, min-inline-size
+  Value: <<'min-width'>>
   Initial: 0
   Applies to: same as 'width' and 'height'
   Inherited: no
-  Percentages: 'measure', 'length' of containing block
+  Percentages: block-size/inline-size, respectively, of containing block
   Media: visual
-  Computed value: the percentage as specified or the absolute length (see text)
+  Computed value: same as 'min-width' and 'min-height'
   </pre>
 
-  These properties correspond to the 'max-width' and 'max-height' properties.
+  These properties correspond to the 'min-width' and 'min-height' properties.
   The mapping depends on the element's 'writing-mode'.
 
   <pre class="propdef">
-  Name: max-measure, max-length
-  Value: length | percentage | none
+  Name: max-block-size, max-inline-size
+  Value: <<'max-width'>>
   Initial: none
   Applies to: same as 'width' and 'height'
   Inherited: no
-  Percentages: 'measure', 'length' of containing block
+  Percentages: block-size/inline-size, respectively, of containing block
   Media: visual
-  Computed value: the percentage as specified or the absolute length or none (see text)
+  Computed value: same as 'max-width' and 'max-height'
   </pre>
 
-  These properties correspond to the 'min-width' and 'min-height' properties.
+  These properties correspond to the 'max-width' and 'max-height' properties.
   The mapping depends on the element's 'writing-mode'.
 
 <h3 id="logical-prop">
-	Logical Margins and Offsets: : the margin- and offset- before/after/start/end
-	properties</h3>
+Logical Margins and Offsets:
+the margin- and offset- block-start/block-end/inline-start/inline-end properties</h3>
 
   <pre class="propdef">
-  Name: margin-before, margin-after, margin-start, margin-end
-  Value: length | percentage | auto
+  Name: margin-block-start, margin-block-end, margin-inline-start, margin-inline-end
+  Value: <<'margin-left'>>
   Initial: 0
   Applies to: same as 'margin'
   Inherited: no
-  Percentages: logical-width of containing block
+  Percentages: depends on layout model
   Media: visual
   Computed value: the percentage as specified or the absolute length or auto (see text)
   </pre>
@@ -171,8 +196,8 @@ Logical Height and Logical Width: the 'length' and 'measure' properties</h3>
   'direction', and 'text-orientation'.
 
   <pre class="propdef">
-  Name: offset-before, offset-after, offset-start, offset-end
-  Value: length | percentage | auto
+  Name: offset-block-start, offset-block-end, offset-inline-start, offset-inline-end
+  Value: <<'left'>>
   Initial: auto
   Applies to: positioned elements
   Inherited: no
@@ -186,12 +211,12 @@ Logical Height and Logical Width: the 'length' and 'measure' properties</h3>
   'writing-mode', 'direction', and 'text-orientation'.
 
 <h3 id="border-padding">
-	Logical Padding and Border: the padding- and border-<var>*</var>-
-  before/after/start/end properties</h3>
+  Logical Padding and Border: the padding- and border-<var>*</var>-
+  block-start/block-end/inline-start/inline-end properties</h3>
 
   <pre class="propdef">
-  Name: padding-before, padding-after, padding-start, padding-end
-  Value: length | percentage
+  Name: padding-block-start, padding-block-end, padding-inline-start, padding-inline-end
+  Value: <<'padding-left'>>
   Initial: 0
   Applies to: all elements
   Inherited: no
@@ -205,7 +230,7 @@ Logical Height and Logical Width: the 'length' and 'measure' properties</h3>
   element's 'writing-mode', 'direction', and 'text-orientation'.
 
   <pre class="propdef">
-  Name: border-before-width, border-after-width, border-start-width, border-end-width
+  Name: border-block-start-width, border-block-end-width, border-inline-start-width, border-inline-end-width
   Value: border-width
   Initial: medium
   Applies to: all elements
@@ -220,7 +245,7 @@ Logical Height and Logical Width: the 'length' and 'measure' properties</h3>
   on the element's 'writing-mode', 'direction', and 'text-orientation'.
 
   <pre class="propdef">
-  Name: border-before-style, border-after-style, border-start-style, border-end-style
+  Name: border-block-start-style, border-block-end-style, border-inline-start-style, border-inline-end-style
   Value: border-style
   Initial: none
   Applies to: all elements
@@ -235,7 +260,7 @@ Logical Height and Logical Width: the 'length' and 'measure' properties</h3>
   on the element's 'writing-mode', 'direction', and 'text-orientation'.
 
   <pre class="propdef">
-  Name: border-before-color, border-after-color, border-start-color, border-end-color
+  Name: border-block-start-color, border-block-end-color, border-inline-start-color, border-inline-end-color
   Value: color
   Initial: currentcolor
   Applies to: all elements
@@ -250,7 +275,7 @@ Logical Height and Logical Width: the 'length' and 'measure' properties</h3>
   on the element's 'writing-mode', 'direction', and 'text-orientation'.
 
   <pre class="propdef">
-  Name: border-before, border-after, border-start, border-end
+  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
@@ -265,7 +290,7 @@ Logical Height and Logical Width: the 'length' and 'measure' properties</h3>
   element's 'writing-mode', 'direction', and 'text-orientation'.
 
 <h3 id="logical-shorthand-keyword">
-	Shorthand Properties with ''logical'' Keyword</h3>
+Shorthand Properties with ''logical'' Keyword</h3>
 
   The shorthand properties for margin, padding, and border set values
   for physical properties by default. But authors can specify the ''logical''
@@ -295,12 +320,12 @@ Logical Height and Logical Width: the 'length' and 'measure' properties</h3>
   assigned to the logical properties as follows:
   <ul>
     <li>If only one value is set, the value applies to all four logical sides.</li>
-    <li>If two values are set, the first is for before and after,
-      the second is for start and end.</li>
-    <li>If three values are set, the first is for before,
-      the second is for start and end,
-      and the third is for after.</li>
-    <li>If four values are set, they apply to the before, end, after, and start
+    <li>If two values are set, the first is for block-start and block-end,
+      the second is for inline-start and inline-end.</li>
+    <li>If three values are set, the first is for block-start,
+      the second is for inline-start and inline-end,
+      and the third is for block-end.</li>
+    <li>If four values are set, they apply to the block-start, inline-end, block-end, and inline-start
       sides in that order.</li>
   </ul>
 
@@ -315,10 +340,10 @@ Logical Height and Logical Width: the 'length' and 'measure' properties</h3>
 <!-- -->  margin: logical 1em 2em 3em 4em;
 <!-- -->}
 <!-- -->blockquote {
-<!-- -->  margin-before: 1em;
-<!-- -->  margin-end:    2em;
-<!-- -->  margin-after:  3em;
-<!-- -->  margin-start:  4em;
+<!-- -->  margin-block-start:  1em;
+<!-- -->  margin-inline-end:   2em;
+<!-- -->  margin-block-end:    3em;
+<!-- -->  margin-inline-start: 4em;
 <!-- -->}
 <!----></code></pre>
   </div>
@@ -424,4 +449,4 @@ Logical Height and Logical Width: the 'length' and 'measure' properties</h3>
     <li>'border-image-outset'</li>
     <li>'border-image-repeat'</li>
     <li>'border-image'</li>
-  </ul>
+  </ul>