

[CSS3] Box Model Terminology

From: fantasai <fantasai.lists@inkedblade.net>
Date: Wed, 27 Feb 2008 00:33:08 -0800
Message-ID: <47C52044.8090309@inkedblade.net>
To: www-style@w3.org

Steve, Paul, and I had an informal meeting today to discuss vertical text issues,
and one of the things we discussed was consistent terminology for writing-mode-
independent layout descriptions (so we don't have to keep writing "if writing-mode
is this, ... ; if writing-mode is that, ...").

Here's the proposed mapping from current terminology to writing-mode-generic:


   width                                              logical width
   height                                             logical height

   * The distinction between "width" and "logical width" can be more explicit
     by using the term "physical width", and likewise for height.
   * An alternative set of terms would be "relative width" vs "absolute width".
     (Comments on relative/absolute vs logical/physical?)


   n/a (refer to 'direction' property)                 inline direction
   n/a (refer to 'direction' property)                 block direction

Sides (from LTR reference)

   top                                                 before
   left                                                start
   right                                               end
   bottom                                              after

Layout Modes

   "in vertical text", "in vertical layout",
   "when writing-mode is vertical", etc.               in vertical writing mode

   "in horizontal text", "in horizontal layout",
   "when writing-mode is horizontal", etc.             in horizontal writing mode


   an English (LTR-TB) block:

                  <---- width / logical width --->

                             top side/
                            before side
      left side/  |   ---inline direction --->   |  right side/     |
      start side  |  |                           |  end side        |
                  |  | block      * horizontal * |                height/
                  |  | direction  *writing mode* |            logical height
                  |  V                           |                  |
                             bottom side/
                              after side

   a vertical Japanese block (TTB-RL):

                  <--- width / logical height --->

                             top side/
                            start side
      left side/  |    <---block direction---    |  right side/     |
      after side  |                           |  |  before side     |
                  |  *  vertical  *     inline|  |                height/
                  |  *writing mode*  direction|  |             logical width
                  |                           V  |                  |
                            bottom side/
                             end side

We hope that by adopting and defining such terms, we will make modules like
the Box Module, MultiCol, Paged Media, Text Layout, and others defining CSS3
box layout easier to write in a way that works well with the vertical layout
feature and is less likely to contain errors. :)

Received on Wednesday, 27 February 2008 08:32:54 GMT
