W3C home > Mailing lists > Public > www-style@w3.org > December 2002

Side-Positioned Table Captions

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


Text reproduced below for discussion purposes:

        ---========Refinement of CSS2 Table Captions========---

                                 Proposal by Bernd Mielke and fantasai
                                                   Writeup by fantasai
                                      Sanity checking by Chris Karnaze

Bernd Mielke has recently implemented support for CSS2 side-
positioned captions in Mozilla, extending the work Chris Karnaze has
done for top and bottom captions. In doing so, he has discovered
some deficiencies in the spec's definition of caption layout. Most of
these are simply the result of having very vaguely defined model.
However, Bernd noticed some significant problems with placing the
caption box alongside the table box, and so he decided to implement a
slightly different model in which the caption box is placed within
the table's margin. This document explains Mozilla's current table
caption model and specifies an improved CSS table caption model we
hope will be incorporated into a future revision of CSS.

-Inside vs. Alongside the Table Margin-

   Problems with the CSS2 Model

         Section 17.4 of CSS2 specifies that a side-positioned caption
     is placed alongside the table proper, thus:


         There are, however, problems with the CSS2 model:

     The table cannot be centered.

         Suppose we try specifying auto margins on the table and

         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.


         If the margins are calculated after side positioning,
       horizontal margins will equalize to take up the remaining
       space, leaving the table and caption separated from each other
       by a wide auto margin.

         It may be possible to center the table and its caption as one
       unit if the joining margins were lengths and the outer ones
       are auto. However, what this really does in CSS2 is not clear.
       Also, it wouldn't degrade nicely in UAs without caption-side
       support: the table and the caption would be aligned to opposite

     Auto width is undefined

         and discouraged. This means that caption widths must be
       explicitly specified, which does not allow for very fluid

     Caption position influences table's centering.

         Moving the caption from one side to the other will cause the
       table to shift, and adding a caption moves a centered table
       off-center. As Bernd says,

           I would like to keep the table centered on the
           containing block and let the caption, which is only
           a small description, not influence the position.

   Mozilla's Caption Model

         In Mozilla's caption model, the table caption is placed
     within the table's margin, thus:


         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.


   Horizontal Dimensions

         Percentage widths and horizontal margins are calculated as
     for top- and bottom-positioned captions. auto widths and
     horizontal margins are calculated as if the caption were a
     regular non-replaced block whose containing block was the table's
     side margin. However, an auto-width caption must always be large
     enough to hold its contents. The minimum caption width is
     computed the same way as MCW for table cells. (See CSS2 Section

     If the table's margin is not wide enough to hold the caption, it

   Vertical Dimensions

       Heights are calculated similarly to widths:

         offset + 'margin-top' + 'border-top-width' + 'padding-top'
          + 'height' + 'padding-bottom' + 'border-bottom-width'
          + 'margin-bottom' >= height of table's border box
         offset = vertical distance from table's top border edge
                  to caption's top margin edge, due to vertical-align
                  (down is positive)

     * Vertical percentages are calculated with respect to the
        table's border box height.
     * If both margins are auto, they equalize.
     * If either margin is auto and the height is auto, the height
        is the intrinsic height and the auto margin(s) calculate
        from the above restraints.
     * If both margins are given and vertical-align is not effective
        (see section on vertical-align), an auto height calculates
        to the greater of:
           o the height computed by making the above inequality
              an equation and solving for height
           o the intrinsic height
     * If the caption's dimensions are overconstrained, the bottom
        margin is treated as auto. Note that because the constraint
        is an inequality, this only happens when the expression's
        value is less than the table's border-box height.

-Vertical Alignment-

   The effects of vertical-align values are as follows:

       Same as 0%
       Same as 50%
       Same as 100%
       Aligns the point x% of the way down the border box of the
       caption with the point x% down the border box of the table
       Vertically offsets the top border edge of the caption box
       <length> down from the top border edge of the table

   Setting the vertical-align property to any of these values
   causes auto height to always use the instrinsic height value.

       All other values have no effect on caption position or size;
   offset due to vertical-align is zero and height is calculated as
   specified for when vertical-align is not effective.

-Capabilities of This Model-

       So what kinds of cool stuff can we do with this expanded
   caption model? Take a look:

   Basic Centered Table with Caption


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

   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;


     Here's something that can't be done gracefully with CSS2's
     model. The caption is positioned so that it begins 3em above the
     table. It's spaced from the end of the preceding paragraph (which
     doesn't have any margins) by its 0.3em top margin.

         In CSS2, a -3em margin would offset the caption correctly,
     but it would also place the caption 2.3em on top of the preceding
     paragraph. Of course, one could compensate by adding 3em to the
     top table margin:

       table { margin: 3.7em auto 0.7em; }

     But then, what happens if there is no caption? The table would be
     spaced an unwanted 3em from the end of the paragraph.

         The model described here, however, suffers no such
     consequence. The table's margin is still only 0.7em.


         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...


         With a few small tweaks to recognize horizontal flow, this
     model can handle even extra-wordy vertical text captions without
     having a ridiculously long caption on small tables. And if you
     want long captions...

       caption {
         margin: 1.5em .1em 1.5em auto;
         white-space: nowrap;
         vertical-align: middle;


   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


   should preferably take place on the www-style mailing list. (We're
   both subscribed.) You can also contact us directly, via email.
Received on Tuesday, 17 December 2002 15:40:37 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:27:04 UTC