[css2] Tantek's edits.

bert-github · bert-github · commit 8111aec1f179 · 2003-01-21T16:35:04.000Z
--HG--
extra : convert_revision : svn%3A73dc7c4b-06e6-40f3-b4f7-9ed1dbc14bfc/trunk%402020
diff --git a/css2/visuren.src b/css2/visuren.src
@@ -1,10 +1,10 @@
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 <html lang="en">
-<!-- $Id: visuren.src,v 2.91 2003-01-17 21:25:06 bbos Exp $ -->
+<!-- $Id: visuren.src,v 2.92 2003-01-21 16:35:04 bbos Exp $ -->
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
 <title>Visual formatting model</title>
-<!-- Changed by: Tantek Celik, 2002-12-16 -->
+<!-- Changed by: Tantek Celik, 2003-01-20 -->
 <style type="text/css">
 .current,.proposed { background:#feb }
 ins.proposed { background:#bfb }
@@ -897,6 +897,34 @@ either it fits or there are no more floats present.
 Any content in the current line before a floated box is reflowed 
 in the first available line on the other side of the float.
 </p>
+<div class="example">
+<p><strong>Example.</strong> 
+In the following document fragment, the containing block is too short 
+to contain the content, so the content gets moved to below the floats 
+where it is aligned in the line box according to the text-align 
+property.
+</p>
+<pre>
+p { width: 10em; border: solid aqua; }
+span { float: left; width: 5em; height: 5em; border: solid blue; }
+
+...
+
+&lt;p&gt;
+  &lt;span&gt; &lt;/span&gt;
+  Supercalifragilisticexpialidocious
+&lt;/p&gt;
+</pre>
+<p>This fragment might look like this:</p>
+<div class="figure"><p>
+<img style="display:block" src="supercal.png" 
+ alt="Image illustrating the effect of an unbreakable piece of content 
+ being reflowed to just after a float which left insufficient room next to it 
+ for the content to fit." >
+</p>
+</div>
+</div>
+
 <p>Several floats may be adjacent, and this model also applies to
 adjacent floats in the same line.
 </p>
@@ -1444,7 +1472,7 @@ text of <em>outer</em> and the body text would have overlapped.
 <p>Now consider the effect of <a href="#floats">floating</a> the
 <em>inner</em> element's text to the right by means of the following
 rules:
-
+</p>
 <pre class="example">
 #outer { color: red }
 #inner { float: right; width: 130px; color: blue }
@@ -1464,7 +1492,7 @@ document's remaining text flows into them.</p>
 <p>To show the effect of the <span
 class="propinst-clear">'clear'</span> property, we add a <em>sibling</em>
 element to the example:
-
+</p>
 <pre class="html-example">
 &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"&gt;
 &lt;HTML&gt;
@@ -1484,7 +1512,7 @@ element to the example:
 </pre>
 
 <p>The following rules:
-
+</p>
 <pre class="example">
 #inner { float: right; width: 130px; color: blue }
 #sibling { color: red }
@@ -1505,7 +1533,7 @@ property on the <em>sibling</em> element is set to 'right' (i.e., the
 generated <em>sibling</em> box will not accept a position next to
 floating boxes to its right), the <em>sibling</em> content begins to
 flow below the float:
-
+</p>
 <pre class="example">
 #inner { float: right; width: 130px; color: blue }
 #sibling { clear: right; color: red }
@@ -1557,7 +1585,7 @@ split across several lines, the first inline box's top and left edges
 (depicted by thick dashed lines in the illustration below)
 serve as references for <span class="propinst-top">'top'</span> and
 <span class="propinst-left">'left'</span> offsets.
-
+</p>
 <pre class="example">
 #outer { 
   position: relative; 
@@ -1605,7 +1633,7 @@ box would end up in this case.</p>
 <div class="html-example"><p>
 Relative and absolute positioning may be used to implement change
 bars, as shown in the following example. The following fragment:
-
+</p>
 <pre>
 &lt;P style=&quot;position: relative; margin-right: 10px; left: 10px;&quot;&gt;
 I used two red hyphens to serve as a change bar. They
@@ -1641,25 +1669,25 @@ class="propinst-z-index">'z-index'</span> property</h3>
 
 <p>For a positioned box, the <span
 class="propinst-z-index">'z-index'</span> property specifies:
-
+</p>
 <ol>
-<li>The stack level of the box in the current stacking context.
-<li>Whether the box establishes a local stacking context.
+<li>The stack level of the box in the current stacking context.</li>
+<li>Whether the box establishes a local stacking context.</li>
 </ol>
 
 <p>Values have the following meanings:</p>
 
 <dl>
 <dt><span class="index-inst" title="&lt;integer&gt;"><span
-class="value-inst-integer"><strong>&lt;integer&gt;</strong></span></span>
+class="value-inst-integer"><strong>&lt;integer&gt;</strong></span></span></dt>
 <dd>This integer is the stack level of the generated box
 in the current stacking context. The box 
 also establishes a local stacking context in which its stack
-level is '0'.
-<dt><strong>auto</strong>
+level is '0'.</dd>
+<dt><strong>auto</strong></dt>
 <dd>The stack level of the generated box in the current stacking
 context is the same as its parent's box. The
-box does not establish a new local stacking context.
+box does not establish a new local stacking context.</dd>
 </dl>
 
 <p><em>In this section, the expression "in front of" 
@@ -1670,7 +1698,7 @@ to their horizontal and vertical positions, boxes lie along a "z-axis"
 and are formatted one on top of the other.  Z-axis positions are
 particularly relevant when boxes overlap visually. This section
 discusses how boxes may be positioned along the z-axis.
-
+</p>
 
 <p>Each box belongs to one <span class="index-def" title="stacking
 context"><dfn>stacking context</dfn></span>. Each box in a given
@@ -1681,6 +1709,7 @@ stacking context.  Boxes with greater stack levels are always formatted
 in front of boxes with lower stack levels.  Boxes may have negative
 stack levels.  Boxes with the same stack level in a stacking context
 are stacked bottom-to-top according to document tree order.
+</p>
 
 <!-- Say depth-first traversal? -IJ --> 
 
@@ -1691,25 +1720,28 @@ class="index-def" title="local stacking context"><dfn>local stacking
 contexts</dfn></span>. Stacking contexts are inherited. A local
 stacking context is atomic; boxes in other stacking contexts may not
 come between any of its boxes.
+</p>
 
 <p>An element that establishes a local stacking context generates a
 box that has two stack levels: one for the stacking context it creates
 (always '0') and one for the stacking context to which it belongs
 (given by the <span class="propinst-z-index">'z-index'</span>
 property).
+</p>
 
 <p>An element's box has the same stack level as its parent's box
 unless given a different stack level with the <span
 class="propinst-z-index">'z-index'</span> property.
+</p>
 
-<div class="html-example"><p>
+<div class="html-example">
 <p>In the following example, the stack levels of
 the boxes (named with their "id" attributes) are:
 "text2"=0, "image"=1, "text3"=2, and "text1"=3. The
 "text2" stack level is inherited from the root box. The
 others are specified with the <span
 class="propinst-z-index">'z-index'</span> property.
-
+</p>
 <pre>
 &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"&gt;
 &lt;HTML&gt;
@@ -1757,6 +1789,7 @@ the example, each box transparently overlays the boxes below it. This
 behavior can be overridden by using one of the existing
 <a href="colors.html#background-properties">
 background properties</a>.
+</p>
 
 <h2><a name="direction">Text direction:</a>
 the <span class="propinst-direction">'direction'</span>
@@ -1777,7 +1810,7 @@ single (visually displayed) block may appear with mixed
 directionality. This phenomenon is called <span class="index-def"
 title="bidirectionality (bidi)"><dfn>bidirectionality</dfn></span>, or
 "bidi" for short.
-
+</p>
 <p>The Unicode standard ([[UNICODE]], section 3.11) defines a complex
 algorithm for determining the proper directionality of text. The
 algorithm consists of an implicit part based on character properties,
@@ -1787,7 +1820,7 @@ class="propinst-direction">'direction'</span> and <span
 class="propinst-unicode-bidi">'unicode-bidi'</span> properties allow
 authors to specify how the elements and attributes of a document
 language map to this algorithm.
-
+</p>
 <p>
 If a document contains right-to-left characters, and if the user
 agent displays these characters in right-to-left order, the user
@@ -1801,21 +1834,21 @@ that, although not every Hebrew or Arabic document contains
 mixed-directionality text, such documents are much more likely to
 contain left-to-right text (e.g., numbers, text from other languages)
 than are documents written in left-to-right languages.
-
+</p>
 <p>Because the directionality of a text depends on the structure and
 semantics of the document language, these properties should in most
 cases be used only by designers of document type descriptions (DTDs),
 or authors of special documents. If a default style sheet specifies
 these properties, authors and users should not specify rules to
 override them. 
-
+</p>
 <p>The HTML 4.0 specification ([HTML40], section 8.2) defines
 bidirectionality behavior for HTML elements. The style sheet
 rules that would achieve the bidi behavior specified in [[HTML40]] are
 given in <a href="sample.html#bidi">the sample style sheet</a>. The
 HTML 4.0 specification also contains more information on
 bidirectionality issues.
-
+</p>
 
 <!-- #include src=properties/direction.srb -->
 
@@ -1827,42 +1860,42 @@ href="tables.html">table</a> column layout, the direction of
 horizontal <a href="visufx.html#overflow">overflow</a>, and the
 position of an incomplete last line in a block in case of 'text-align:
 justify'.
+</p>
 
 <p>Values for this property have the following meanings:</p>
 
 <dl>
-<dt><strong>ltr</strong> 
-<dd>Left-to-right direction.
-<dt><strong>rtl</strong>
-<dd> Right-to-left direction.
+<dt><strong>ltr</strong></dt>
+<dd>Left-to-right direction.</dd>
+<dt><strong>rtl</strong></dt>
+<dd> Right-to-left direction.</dd>
 </dl>
 
 <p>For the <span class="propinst-direction">'direction'</span>
 property to have any effect on inline-level elements, the <span
 class="propinst-unicode-bidi">'unicode-bidi'</span> property's value
 must be 'embed' or 'override'.
-
+</p>
 <div class="note"><p>
 <em><strong>Note.</strong> 
 The <span class="propinst-direction">'direction'</span> property, when
 specified for table column elements, is not inherited by cells in the
 column since columns are not the ancestors of the cells in the document tree. 
 Thus, CSS cannot easily capture the "dir" attribute inheritance rules described
 in [[HTML40]], section 11.3.2.1.
-</em>
-</div>
+</em></p></div>
 
 <!-- #include src=properties/unicode-bidi.srb -->
 
 <p>Values for this property have the following meanings:</p>
 
 <dl>
-<dt><strong>normal</strong>
+<dt><strong>normal</strong></dt>
 <dd>The element does not open an additional level of embedding with
 respect to the bidirectional algorithm. For inline-level elements,
 implicit reordering works across element boundaries.
-
-<dt><strong>embed</strong>
+</dd>
+<dt><strong>embed</strong></dt>
 
 <dd>If the element is inline-level, this value
 opens an additional level of embedding with respect to the
@@ -1872,8 +1905,8 @@ property. Inside the element, reordering is done implicitly. This
 corresponds to adding a LRE (U+202A; for 'direction: ltr') or RLE
 (U+202B; for 'direction: rtl') at the start of the element and a PDF
 (U+202C) at the end of the element.
-
-<dt><strong>bidi-override</strong>
+</dd>
+<dt><strong>bidi-override</strong></dt>
 
 <dd>If the element is inline-level or a block-level element that
 contains only inline-level elements, this creates an override. This
@@ -1883,7 +1916,7 @@ property; the implicit part of the bidirectional algorithm is
 ignored. This corresponds to adding a LRO (U+202D; for 'direction:
 ltr') or RLO (U+202E; for 'direction: rtl') at the start of the
 element and a PDF (U+202C) at the end of the element.
-
+</dd>
 </dl>
 
 <p>The final order of characters in each block-level element is the
@@ -1897,13 +1930,13 @@ class="propinst-unicode-bidi">'unicode-bidi'</span> property has a
 value other than 'normal', in which case they are treated as strong
 characters in the <span class="propinst-direction">'direction'</span>
 specified for the element.
-
+</p>
 <p>Please note that in order to be able to flow inline boxes in a
 uniform direction (either entirely left-to-right or entirely
 right-to-left), more inline boxes (including anonymous inline boxes)
 may have to be created, and some inline boxes may have to be split up
 and reordered before flowing.
-
+</p>
 <p>Because the Unicode algorithm has a limit of 
 <em title="According to unicode 3.0, chapter 3, section 12, definition BD2. 
 Specifically, page 58 here: http://www.unicode.org/unicode/uni2book/ch03.pdf" 
@@ -1915,7 +1948,7 @@ should be used with extreme caution. However, for elements that are,
 in general, intended to be displayed as blocks, a setting of
 'unicode-bidi: embed' is preferred to keep the element together in
 case display is changed to inline (see example below).
-
+</p>
 <p>The following example shows an XML document with bidirectional
 text. It illustrates an important design principle: <span
 class="index-inst" title="DTD">DTD</span> designers should take bidi
@@ -1924,12 +1957,12 @@ in any accompanying style sheets. The style sheets should be designed
 so that bidi rules are separate from other style rules. The bidi rules
 should not be overridden by other style sheets so that the document
 language's or DTD's bidi behavior is preserved.
-
+</p>
 <div class="example"><p>
 In this example, 
 lowercase letters stand for inherently left-to-right characters and
 uppercase letters represent inherently right-to-left characters:
-
+</p>
 <pre class="xml-example">
 &lt;HEBREW&gt;
   &lt;PAR&gt;HEBREW1 HEBREW2 english3 HEBREW4 HEBREW5&lt;/PAR&gt;
@@ -1963,15 +1996,15 @@ right, the final three are read starting at the top left.  Please note
 that HEBREW and ENGLISH are chosen as element names for explicitness
 only; in general, element names should convey structure without
 reference to language.
-
+</p>
 <p>The EMPH element is inline-level, and since its value for <span
 class="propinst-unicode-bidi">'unicode-bidi'</span> is 'normal' (the
 initial value), it has no effect on the ordering of the text. The
 HE-QUO element, on the other hand, creates an embedding.
-
+</p>
 <p>The formatting of this text might look like this if the line length
 is long:
-
+</p>
 <pre class="ascii-art">
                5WERBEH 4WERBEH english3 2WERBEH 1WERBEH
 
@@ -1986,9 +2019,9 @@ english17 20WERBEH english19 18WERBEH
 
 <p>Note that the HE-QUO embedding causes HEBREW18 to be to the right
 of english19.
-
+</p>
 <p>If lines have to be broken, it might be more like this:
-
+</p>
 <pre class="ascii-art">
        2WERBEH 1WERBEH
   -EH 4WERBEH english3
@@ -2015,6 +2048,7 @@ from english19 might have fit on the previous line, but hyphenation of
 left-to-right words in a right-to-left context, and vice versa, is
 usually suppressed to avoid having to display a hyphen in the middle
 of a line.
+</p>
 </div><!-- example -->
 
 </body>
