[css2] Added mention of 'text-align', and some small details.

--HG--
extra : convert_revision : svn%3A73dc7c4b-06e6-40f3-b4f7-9ed1dbc14bfc/trunk%401223

Author: bert-github

css2/generate.src

@@ -641,8 +641,8 @@ set to 'hidden', on the other hand, <em>do</em> increment counters.
 generation of more than one box. The most common case occurs for
 elements with 'display: list-item' (see the section on <a
 href="lists.html">lists</a>). The two generated boxes are the
-principle box (the list item content) and the list item marker (to the
-side of the principle box). Authors have very limited control of the
+principal box (the list item content) and the list item marker (to the
+side of the principal box). Authors have very limited control of the
 style or position of the list item marker through the <a
 href="lists.html#list-props">list style properties.</a> 
 
@@ -664,6 +664,7 @@ may be used to align entire blocks horizontally.
 
 <!-- Do they have margins? I would say no except that
 abs. positioned boxes now have margins, too -IJ -->
+<!-- I'd say no, too. BB -->
 
 <P>To create a marker box for :before or :after content, the <span
 class="propinst-display">'display'</span> property must be given the
@@ -686,23 +687,33 @@ principal box.
 <P>The vertical alignment of content within the marker box may be
 specified with the <span
 class="propinst-vertical-align">'vertical-align'</span> property.
-Thus, a series of markers may all be left-justified, right-justified,
-etc.
+
+<p>The height of the :before marker and of the first line box of the
+principal box is computed as if they were a single line
+box. Analogously for the :after marker and the last line box.
 
 <P>The width of a marker box defaults to the natural width of its
 content, but may be specified with the <span
 class="propinst-width">'width'</span> property. If the width of a
-marker box's content is greater than a specified width, the <span
+marker box's content is greater than the specified width, the <span
 class="propinst-overflow">'overflow'</span> property specifies
 overflow behavior. Marker boxes may overlap principal boxes.
 
+<p>If the 'width' is not 'auto', and is larger than the natural width,
+the <span class="propinst-text-align">'text-align'</span> property
+determines the alignment of the text in the marker box.
+
 <P>The <span class="propinst-marker-offset">'marker-offset'</span>
 property specifies the horizontal offset between a marker box and the
-associated principal box.
+associated principal box. The distance is measured between their <a
+href="visuren.html#border-edge">border edges</a>.
+
+<p class="note">[Is this offset kept constant, even if
+'overflow:visible'? I would say it gets smaller. BB]
 
 <P>When the <span class="propinst-marker">'marker'</span> property is
 set for content generated by an element with 'display: list-item', a
-marker box generated for :before replaces the normal list item marker.
+marker box generated for ':before' replaces the normal list item marker.
 
 <div class="example"><P>
 The following example illustrates how markers may
@@ -740,7 +751,7 @@ This HTML program and style sheet:</p>
 </div>
 
 <div class="example"><P>
-This example shows different marker horizontal
+This example shows a different horizontal
 alignment: the content is centered within a 
 box of a fixed width. This document:</p>
 
@@ -769,12 +780,12 @@ box of a fixed width. This document:</p>
 <p>should produce something like this: </P>
 
 <PRE>
- (1)   This is the 
-       first item.
- (2)   This is the 
-       second item.
- (3)   This is the 
-       third item.
+  (1)    This is the 
+         first item.
+  (2)    This is the 
+         second item.
+  (3)    This is the 
+         third item.
 </PRE>
 </div>
 
@@ -783,13 +794,13 @@ The next example creates markers before and after
 list items. This document:</p>
 
 <PRE class="html-example">
- &lt;HTML&gt;
+&lt;HTML&gt;
   &lt;HEAD&gt;
     &lt;STYLE type="text/css"&gt;
-      LI:before         { 
+      LI:before { 
 	   display: marker;
 	   content: url(smiley.gif);
-      LI:after
+      LI:after {
 	   display: marker;
 	   content: url(sad.gif);
       }
@@ -809,9 +820,9 @@ smiley gif images here):</p>
 
 <PRE>
   :-) first list
-      item comes first    )-:
+      item comes first    :-(
   :-) second list
-      items comes second  )-:
+      item comes second  :-(
 </PRE>
 </div>