Side-Positioned Table Captions

• From: fantasai <fantasai@escape.com>
• Date: Tue, 17 Dec 2002 15:41:24 -0500
• To: www-style@w3.org
• Message-ID: <3DFF8BF4.60309@escape.com>

         There are, however, problems with the CSS2 model:

     The table cannot be centered.

         Suppose we try specifying auto margins on the table and
       caption:

         If the auto margins are calculated for both the caption and
       the table before moving the caption to the side of the table,
       the box on the starting side will be centered and the other
       will be hanging outside the content area by its auto margin.

         http://bugzilla.mozilla.org/attachment.cgi?id=98261&action=view

         This makes centering the table easy: just set both table
     margins and the outer caption margin to auto. Caption auto width
     can be defined by using the margin as a constraint, and the table
     remains centered with respect ot the block no matter how much the
     caption moves around.

         It is not possible to center the table and its caption
     together as a unit in this model. However, since its also not
     possible in the CSS2 model to center the table itself when it has
     a side-positioned caption, they are equal in this respect. Thus,
     the other advantages tip the balance in favor of this model, and
     we both feel that having the caption not influence table
     centering is more aesthetically pleasing anyway.


-Proposed Calculations of Side-Positioned Caption Dimensions-

       Since Mozilla aims to implement the CSS2 specification as
   accurately as possible, its actual caption implementation is not as
   described here. Ignoring bugs in the implementation, however, it
   behaves pretty much as specified except vertical-align, if it's not
   set to middle or bottom, is always treated as top.

       The caption's box properties are calculated according to the
   principle that the caption's dimensions must completely fill the
   table's side margin, where the table's side margin is defined as
   the box formed by the table's top and bottom border edges and its
   margin and border edge on the side to which the caption box has
   been assigned.

     

         The caption fits inside the margin, and the table's still
     centered.

   Why is This a Robust Model?

       p {
          margin: 0;
          text-indent: 2em;
       }
       table {
          margin: 0.7em auto;
       }
       caption {
          caption-side: left;
          margin: 0.3em 0.2em;
          verical-align: -3em;
       }

       

         You might notice, too, that in this example the table with
     the caption has shifted slightly to the right of absolute center.
     This is because the long word 'Multiplication' has made caption's
     minimum width larger than the table's left margin. Instead of
     overwriting the first few columns, however, the caption has
     caused the table's margin to increase enough to accomodate its
     entire width, preserving the readability of the rendered table.

   What Next?

         Perhaps you've heard that CSS3 provides for vertical text...

       

   What Can't Be Done With This?

         Negative bottom table margins won't have an effect even with
     short captions because the auto margin stretches to the border
     edge, not the margin edge. This can probably be resolved by
     adding another calculation rule or two that accounts for the
     difference.

-Discussion-

   should preferably take place on the www-style mailing list. (We're
   both subscribed.) You can also contact us directly, via email.