[css2] Text improvements. Collapsed -top-, -right-, etc. properties into

bert-github · bert-github · commit a7aef1386bba · 1998-03-23T02:39:56.000Z
a single table.

--HG--
extra : convert_revision : svn%3A73dc7c4b-06e6-40f3-b4f7-9ed1dbc14bfc/trunk%401345
diff --git a/css2/box.src b/css2/box.src
@@ -1,6 +1,6 @@
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 <html lang="en">
-<!-- $Id: box.src,v 1.7 1998-03-22 02:02:16 ijacobs Exp $ -->
+<!-- $Id: box.src,v 1.8 1998-03-23 02:39:56 bbos Exp $ -->
 <HEAD>
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
 <TITLE>Box model</TITLE>
@@ -12,7 +12,7 @@
 generated for elements in the <a href="conform.html#doctree">document
 tree</a> and formatted by the <a href="visuren.html">visual rendering
 model</a>.  The <A href="page.html">page box</A> is a special kind of
-box that is described in detail on the section on <A
+box that is described in detail in the section on <A
 href="page.html">paged media</a>.
 
 <H2><a name="box-dimensions">Box dimensions</a></H2> 
@@ -52,7 +52,7 @@ has 0 width, the padding edge is the same as the content edge.
 The padding edge of a box defines the edges of the
 <a href="visuren.html#containing-block">containing block</a> established by the box.
 <dt><span class="index-def" title="border edge"><a name="border-edge"><strong>border edge</strong></a></span>
-<dd>The border edge surrounds the box border. If the border
+<dd>The border edge surrounds the box's border. If the border
 has 0 width, the border edge is the same as the padding edge.
 <dt><span class="index-def" title="margin edge"><a name="margin-edge"><strong>margin edge</strong></a></span>
 or <span class="index-def" title="outer edge"><a name="outer-edge"><strong>outer
@@ -151,7 +151,7 @@ and padding relate."></p>
 
 <li>The <a href="#content-width">content width</a> for each LI box is
 calculated top-down; the <a href="visuren.html#containing-block">containing
-block</a> for the each LI box is the box generated by the UL element.
+block</a> for each LI box is the box generated by the UL element.
 
 <li>The height of each LI box is given by its <a
 href="#content-height">content height</a>, plus padding, borders, and
@@ -187,7 +187,7 @@ href="#box-margin-area">margin area</a> of a box.  The
 <span class="propinst-margin">'margin'</span> shorthand property sets
 the margin for all four sides while the other margin properties only
 set their respective side. These properties apply to all elements
-generating <a href="visuren.html#block-box">block</a> boxes for which
+generating <a href="visuren.html#block-box">block</a> boxes and also if
 <span class="propinst-display">'display'</span> is set to 'caption'.
 
 <P>The properties defined in this section refer to the <span
@@ -211,41 +211,12 @@ implementation-specific limits.
 
 <!-- #include src=properties/margin-top.srb -->
 
-<P>This property sets the top margin of a generated box.
+<P>These properties set the top, right, bottom, resp. left margin of a
+box.
 
 <div class="example"><P>
 <PRE>
-  H1 { margin-top: 2em }
-</PRE>
-</div>
-
-<!-- #include src=properties/margin-right.srb -->
-
-<P>This property sets the right margin of a generated box.
-
-<div class="example"><p>
-<PRE>
-  H1 { margin-right: 12.3% }
-</PRE>
-</div>
-
-<!-- #include src=properties/margin-bottom.srb -->
-
-<P> This property sets the bottom margin of a generated box. 
-
-<div class="example"><P>
-<PRE>
-  H1 { margin-bottom: 3px }
-</PRE>
-</div>
-
-<!-- #include src=properties/margin-left.srb -->
-
-<P> This property sets the left margin of a generated box.
-
-<div class="example"><P>
-<PRE>
-  H1 { margin-left: 2em }
+H1 { margin-top: 2em }
 </PRE>
 </div>
 
@@ -275,21 +246,21 @@ respectively.
 
 <div class="example"><P>
 <PRE>
-  BODY { margin: 2em } /* all margins set to 2em */
-  BODY { margin: 1em 2em } /* top &amp; bottom = 1em, right &amp; left = 2em */
-  BODY { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */
+BODY { margin: 2em } /* all margins set to 2em */
+BODY { margin: 1em 2em } /* top &amp; bottom = 1em, right &amp; left = 2em */
+BODY { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */
 </PRE>
 
 <P> The last rule of the example above is equivalent to the example
 below:
 
 <PRE>
-  BODY {
-    margin-top: 1em;
-    margin-right: 2em;
-    margin-bottom: 3em;
-    margin-left: 2em;        /* copied from opposite side (right) */
-  }
+BODY {
+  margin-top: 1em;
+  margin-right: 2em;
+  margin-bottom: 3em;
+  margin-left: 2em;        /* copied from opposite side (right) */
+}
 </PRE>
 </div>
 
@@ -338,7 +309,7 @@ borders</a> for an illustration of collapsed margins.
 </H2> 
 
 <P>The padding properties specify the width of the <a
-href="#box-content-area">content area</a> of a box. The <span
+href="#box-padding-area">padding area</a> of a box. The <span
 class="propinst-padding">'padding'</span> shorthand property sets the
 padding for all four sides while the other padding properties only set
 their respective side. These properties apply to all elements.
@@ -363,41 +334,12 @@ properties refer to the width of the generated box's containing block.
 
 <!-- #include src=properties/padding-top.srb -->
 
-<P> This property sets the top padding of a generated box.
-
-<div class="example"><P>
-<PRE>
-  BLOCKQUOTE { padding-top: 0.3em }
-</PRE>
-</div>
-
-<!-- #include src=properties/padding-right.srb -->
-
-<P> This property sets the right padding of a generated box.
-
-<div class="example"><P>
-<PRE>
-  BLOCKQUOTE { padding-right: 10px }
-</PRE>
-</div>
-
-<!-- #include src=properties/padding-bottom.srb -->
-
-<P> This property sets the bottom padding of a generated box.
-
-<div class="example"><P>
-<PRE>
-  BLOCKQUOTE { padding-bottom: 2em }
-</PRE>
-</div>
-
-<!-- #include src=properties/padding-left.srb -->
-
-<P> This property sets the left padding of a generated box.
+<P>These properties set the top, right, bottom, resp. left padding of
+a box.
 
 <div class="example"><P>
 <PRE>
-  BLOCKQUOTE { padding-left: 20% }
+BLOCKQUOTE { padding-top: 0.3em }
 </PRE>
 </div>
 
@@ -425,10 +367,10 @@ the <span class="propinst-background">'background'</span> property:
 
 <div class="example"><P>
 <PRE>
-  H1 { 
-    background: white; 
-    padding: 1em 2em;
-  } 
+H1 { 
+  background: white; 
+  padding: 1em 2em;
+} 
 </PRE>
 
 <P> The example above specifies a '1em' vertical padding (<span
@@ -496,37 +438,8 @@ agent. The following relationships must hold, however:
 
 <!-- #include src=properties/border-top-width.srb -->
 
-<P> This property sets the width of the top border of a box.
-
-<div class="example"><P>
-<PRE>
-  H1 { border: solid thick red }
-  P  { border: solid thick blue }
-</PRE>
-
-<P> In the example above, H1 and P elements will have the same
-border width regardless of font size. To achieve relative widths, the
-'em' unit can be used:
-
-<PRE>
-  H1 { border: solid 0.5em }
-</PRE>
-</div>
-
-<!-- #include src=properties/border-right-width.srb -->
-
-<P> This property sets the width of the right
-border of a box.
-
-<!-- #include src=properties/border-bottom-width.srb -->
-
-<P> This property sets the width of the bottom border of
-a box.
-
-<!-- #include src=properties/border-left-width.srb -->
-
-<P> This property sets the width of the left border 
-of a box.
+<P>These properties set the width of the top, right, bottom,
+resp. left border of a box.
 
 <!-- #include src=properties/border-width.srb -->
 
@@ -552,9 +465,9 @@ In the examples below, the comments indicate the resulting widths
 of the top, right, bottom and left borders:
 
 <PRE>
-  H1 { border-width: thin }                   /* thin thin thin thin */
-  H1 { border-width: thin thick }             /* thin thick thin thick */
-  H1 { border-width: thin thick medium }      /* thin thick medium thick */
+H1 { border-width: thin }                   /* thin thin thin thin */
+H1 { border-width: thin thick }             /* thin thick thin thick */
+H1 { border-width: thin thick medium }      /* thin thick medium thick */
 </PRE>
 </div>
 
@@ -569,9 +482,6 @@ of the top, right, bottom and left borders:
 <P>The border color properties specify the color of a box's border.
 
 <!-- #include src=properties/border-top-color.srb -->
-<!-- #include src=properties/border-right-color.srb -->
-<!-- #include src=properties/border-bottom-color.srb -->
-<!-- #include src=properties/border-left-color.srb -->
 <!-- #include src=properties/border-color.srb -->
 
 <P>The <span class="propinst-border-color">'border-color'</span>
@@ -602,11 +512,11 @@ for the border color.
 <div class="example">
 <P>In this  example, the border will be a solid black line.
 <PRE>
-  P { 
-    color: black; 
-    background: white; 
-    border: solid;
-  }
+P { 
+  color: black; 
+  background: white; 
+  border: solid;
+}
 </PRE>
 </div>
 
@@ -670,9 +580,6 @@ interpret 'dotted', 'dashed', 'double', 'groove', 'ridge',
 'inset', and 'outset' to be 'solid'. 
 
 <!-- #include src=properties/border-top-style.srb -->
-<!-- #include src=properties/border-right-style.srb -->
-<!-- #include src=properties/border-bottom-style.srb -->
-<!-- #include src=properties/border-left-style.srb -->
 <!-- #include src=properties/border-style.srb -->
 
 <P> The <span class="propinst-border-style">'border-style'</span>
@@ -682,7 +589,7 @@ four values, and the values are set on the different sides as for
 
 <div class="example"><P>
 <PRE>
-  #xy34 { border-style: solid dotted }
+#xy34 { border-style: solid dotted }
 </PRE>
 <P> In the above example, the horizontal borders will be 'solid' and
 the vertical borders will be 'dotted'.
@@ -701,19 +608,19 @@ will be visible unless the border style is set.
 <!-- #include src=properties/border-top.srb -->
 
 <P> This is a shorthand property for setting the width, style, and
-color of the top border of a box.
+color of the top, right, bottom, resp. left border of a box.
 
 <div class="example"><P>
 <PRE>
-  H1 { border-bottom: thick solid red }
+H1 { border-bottom: thick solid red }
 </PRE>
 
 <P> The above rule will set the width, style, and color of the border
 <strong>below</strong> the H1 element. Omitted values will be set to
 their <a href="cascade.html#initial-value">initial values</a>:
 
 <PRE>
-  H1 { border-bottom: thick solid }
+H1 { border-bottom: thick solid }
 </PRE>
 <P> Since the color value is omitted in the above example, the border
 color will be the same as the <span class="propinst-color">
@@ -724,24 +631,6 @@ color will be the same as the <span class="propinst-color">
 class="propinst-border-style">'border-style'</span> property accepts
 up to four values, this property only accepts one style value.
 
-<!-- #include src=properties/border-bottom.srb -->
-
-<P> This is a shorthand property for setting the width, style, and
-color of the bottom border of a box. Otherwise, it behaves like <span
-class="propinst-border-top">'border-top'</span>.
-
-<!-- #include src=properties/border-right.srb -->
-
-<P> This is a shorthand property for setting the width, style, and
-color of the right border of a box. Otherwise, it behaves like <span
-class="propinst-border-top">'border-top'</span>.
-
-<!-- #include src=properties/border-left.srb -->
-
-<P> This is a shorthand property for setting the width, style, and
-color of the left border of a box. Otherwise, it behaves like <span
-class="propinst-border-top">'border-top'</span>.
-
 <!-- #include src=properties/border.srb -->
 
 <P> The <span class="propinst-border">'border'</span> property is a
@@ -751,22 +640,20 @@ class="propinst-margin">'margin'</span> and <span
 class="propinst-padding">'padding'</span> properties, the <span
 class="propinst-border">'border'</span> property cannot set different
 values on the four borders. To do so, one or more of the other border
-properties must be used. Note that while the <span
-class="propinst-border-width">'border-width'</span> property accepts
-up to four length values, this property only accepts one.
+properties must be used.
 
 <div class="example"><P>
 For example, the first rule below is
 equivalent to the set of four rules shown after it:
 
 <PRE>
-  P { border: solid red }
-  P {
-    border-top: solid red;
-    border-right: solid red;
-    border-bottom: solid red;
-    border-left: solid red
-  }
+P { border: solid red }
+P {
+  border-top: solid red;
+  border-right: solid red;
+  border-bottom: solid red;
+  border-left: solid red
+}
 </PRE>
 </div>
 
@@ -777,11 +664,11 @@ important.
 <div class="example"><P>
 Consider this example:
 <PRE>
-  BLOCKQUOTE {
-    border-color: red;
-    border-left: double;
-    color: black
-  }
+BLOCKQUOTE {
+  border-color: red;
+  border-left: double;
+  color: black
+}
 </PRE>
 
 <P> In the above example, the color of the left border is black,
