W3C home > Mailing lists > Public > www-style@w3.org > October 2007

Use Cases for Rotation in CSS

From: Steve Zilles <szilles@adobe.com>
Date: Wed, 31 Oct 2007 14:41:30 -0700
Message-Id: <>
To: www-style@w3.org
This note attempts to enumerate the set of use cases that have been, to 
date, identified for providing a "rotation" (and/or "tranform") property in 
CSS. (Because the discussion of "rotation" broadened into a discussion of 
arbitrary 2D transforms, the possibility of a "transform" property instead 
of just rotation is considered in these use cases. The use cases themselves 
only require rotation, however.

This is list does not claim to be complete, and is published to elicit 
comments these and suggestions for other use cases.

Use Cases for a "rotation"/"tranform" property
1. rotate a block of text 90 degrees as for a tab on left of page.

for an example of such rotated text, in this case it is English text in a 
Thai publication.

2. rotate an image (or block of text) an arbitrary amount

This use case actually has several sub-cases. The sub-cases depend on 
whether the rotation occurs "before layout" (of the formatting context in 
which the rotated object appears) and ends up affecting that layout or 
"after layout" which, like relative positioning, does not affect the 
layout, but only the position and orientation of the rotated/transformed 
object. Rotation that occurs after layout does not affect the layout of any 
adjacent text (other than the normal layout of the rotated object).

Rotation that occurs before layout will necessarily affect the layout of 
other adjacent objects. There are at least two options for treating an 
object that is rotated prior to layout: (a) a bounding CSS box is drawn 
around the rotated object; that box is used in the layout; and adjacent 
objects position themselves with respect to the bounding CSS box or (b) The 
adjacent CSS objects are "tightly wrapped" around the rotated object. Here 
"tight wrapping" means coming within some distance of, but not touching, 
the rotated object. These two cases are illustrated below

First a "picture" of the object layed-out prior to rotation:
(in this figure, "#"s represent text, "*"s represent the border
  and the numbers on the corners are also part of the border.)

      1 * * * * * 2
      *   # # # # *
      * # # # # # *
      * # # #     *
      4 * * * * * 3

Object after rotation (by about 45 degrees):

              *  #*
            *  #  # *
          *  #  #     3
        *  #  #     *
      1     #  #  *
       *  #  #  *
         * #  *

Now suppose the original context for the above object was

    <p>Lots of text that can flow in normal flow as usual.
    Some more text that can flow in normal flow after
    the object.</p>

where the <span> is the object that is rotated.

Then sub-case (a) above would be set as follows (where "|"s are used to 
represent the left and right edges of the containing block and the left and 
right edges of the anonymous box around the rotated text box):

   |Lots of text that can flow|
   |in normal flow as usual.  |
   |1'--------2-----2'        |
   ||       *  #*   |         |
   ||     *  #  # * |         |
   ||   *  #  #     3         |
   || *  #  #     * |         |
   |1     #  #  *   |         |
   ||*  #  #  *     |         |
   ||  * #  *       |         |
   |4'---4----------3' Some   |
    more text that can flow in|
   |normal flow after the     |
   |object.                   |

Where in this sub-case the rotated object, the <span>, is treated as a 
normal inline-block object and the text flows up to and after that object 
as would normally be the case. The box labeled by 1', 2', 3', 4' is that 
bounding box for the rotated object and is set left justified in the next 
line (the line that has "Some" in it) whose line height is adjusted for 
the  rotated object.

The second sub-case, (b) above, involves "tight wrapping" or running the 
text around the rotated object. This is a special case of the general 
problem of tight wrapping which usually wraps text around an arbitrary 
outline (not just a rotated rectangle as here).

(In the example below the text that occurs before the <span> is wrapped to 
the left of the object that is tightly wrapped and the text that follows it 
is wrapped after the <span> object. This is just one of several possible 
ways to wrap the text, but a further discussion of this point is out of 
scope for this message.)

   |Lots of text  2  Some more|
   |that can    *  #*  text   |
   |flow      *  #  # *  that |
   |in      *  #  #     3  can|
   |nor-  *  #  #     *  flow |
   |mal 1     #  #  *  in nor-|
   |flow *  #  #  *  mal flow |
   |as    * #  *  after the   |
   |usual.  4  object.        |

Note that the tightly wrapping text does not collide with the rotated 
object; it is always some distance (usually two and at least one character 
cell) from the tightly wrapped object. How this distance would be specified 
is part of the discussion of "tight wrapping" because whatever scheme is 
used it must work for wrapping text around an arbitrary outline that 
surrounds the wrapped object.

(The above examples are for illustrative purpose only and do not follow a 
consistent set of layout rules which are, as yet, still in the process of 
being determined.)

If the same <span> element were used in an "after layout" context, then the 
following example shows a possible outcome:

First, the results of normal flow formatting,

   |Lots of text that can flow in normal|
   |               1 * * * * * 2        |
   |               *   # # # # *        |
   |               * # # # # # *        |
   |               * # # #     *        |
   |flow as usual. 4 * * * * * 3 Some   |
   |more text that can flow in normal   |
   |flow after the object.              |

And, then, the result of doing the rotation after the above layout where 
the rotation point is assumed to be the lower left corner,

   |                        2           |
   |                      *  #*         |
   |                   *  #  # *        |
   |Lots of text tha*  #  #     3 normal|
   |              *  #  #     *         |
   |            1     #  #  *           |
   |             *  #  #  *             |
   |              * #  *                |
   |flow as usual. 4             Some   |
   |more text that can flow in normal   |
   |flow after the object.              |

Where, above, it is assumed that the rotated <span> is in front of the text 
it rotates over and there is adequate white space before the paragraph that 
the rotated text box does not cover any other text.

Case 2., with its sub-cases ("after layout" and "before layout" with 
sub-cases (a) and (b)), probably represent the most common usage cases for 
general rotation. There are however some other cases to consider.

3. Diagonal text that "fits"
In this use case, the user has one line of text that is to be set so it 
goes diagonally from the lower left corner to the upper right corner (or, 
in a right to left world from lower right to upper left). In this case, the 
size of the text (and the rotated box that contains it) will fit; that is 
the text box is sized before it is rotated; its size is independent of the 
space into which the rotated object is to fit.

One example of such text is a watermark that appears on every page. The 
issue with this example is that it is not clear what rotation angle makes 
the text go on the diagonal. The diagonal is determined by the height to 
width ration of the container into which the diagonal text is to be put. 
Since formatting may determine the height and/or width of the container, it 
is, in general, not possible to always pre-determine the angle of the 
diagonal. This suggests that there should be a value of the 
rotation/tranform property that corresponds to the angle of the diagonal.

4. Text boxes in which the size depends on the space available
This case is similar to the previous case, but, instead of the angle of 
rotation being determined by the context, it is the size of the text box 
that is adjusted to best fit into the area. The angle of rotation must be 
specified. To see how the text box size could be adjusted, consider the 
following: If the text will fit in a single line, then one line is used. If 
it will not fit in one line then two lines of text (using normal line 
breaking) are tried. (Note that the height of this box is higher than the 
height of the one line text box so both the height and width of the 
potential text box must fit in the area available.) If two lines do not 
fit, then three are tried and so on. If, however, you get to the point 
where the text box is nearly square, then there is no point in continuing 
because no variation on the box will fit. In this case, the box overflows 
the container.

5. use rotated column headings for narrow table columns.
(This is not considered to be a realistic requirement in the near term, but 
it is included for completeness of the problem space.)

Table example
                      /  /t /d /d /    /
                     /n /s /e /e /    /
                    /o /o /i /y /    /
                   /w /l /t /a /    /
                  /  /  /  /l / s  /
                 /s /s /s /p / t  /
                /e /e /e /  / n  /
               /m /m /m /t / i  /
              /a /a /a /o / o  /
Team        /G /G /G /n / P  /
Sharks     | 9| 5| 3|23| 30 |
Canadiens  | 8| 5| 4|23| 28 |
Maple Leafs| 4| 9| 2|25| 14 |

In this example, note that the text is rotated, but the borders on the 
rotated text are skewed as well as rotated. That means that there needs to 
be more mechanism than just a rotation and that the text and the borders 
are treated differently.

Steve Zilles
115 Lansberry Court,
Los Gatos, CA 95032-4710
Steve Zilles
115 Lansberry Court,
Los Gatos, CA 95032-4710
Received on Wednesday, 31 October 2007 21:41:48 UTC

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