Rotation in CSS

Forwarding to www-style per
   http://www.w3.org/blog/CSS/2007/07/31/new_w3c_css_working_group_mailing_list_p

Please quote Steve Zilles, not me, thanks~
~fantasai

-------- Original Message --------
Subject: 	Rotation in CSS
Resent-Date: 	Tue, 04 Sep 2007 06:08:57 +0000
Resent-From: 	w3c-css-wg@w3.org
Date: 	Mon, 03 Sep 2007 23:08:25 -0700
From: 	Steve Zilles <szilles@adobe.com>
To: 	w3c-css-wg@w3.org



This note begins with a small set of use cases and then moves to an
algorithm for positioning boxes that have been rotated to some angle.
The note raises a number of ISSUEs and questions.

Use Cases of "rotation"
=======================
There are three use cases that come to mind:
1. rotate a block of text 90 degrees as for a tab on left of page.
2. rotate an image (or block of text) an arbitrary amount
3. use rotated column headings for narrow table columns.

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


There are multiple contexts of use of a rotated object:
A. in normal flow where the boxes generated from objects are stacked
B. in absolute positioning where a given point on the object (today the
upper lefthand corner of one of the rectangles) is placed at a specified
position.
C. in relative positioning where the rotated object is first positioned
in the normal flow and then relatively offset from that positioning
D. in floats where the rotated object is floated to left or right.

A positioning algorithm (that deals with the above four contexts).
===========================================================
Below, the steps in the algorithm are specified and character graphic
figures are used to illustrate a typical example of each of the steps.

Step 1: layout the box as if no rotation were applied to it.

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

The block as layed out in normal orientation (without rotation)
The stars, "*", represent the "border" and the "content" is represented
by the three lines of hash signs, "#" in which "text-indent" and "justify"
are used on those "text" lines. The margins are not shown.
The corner labelled "1" is the "top" "left" corner of the box.
The "top" edge is the edge from "1" to "2".

ISSUE: what width should be used for the unrotated box. Depending
on the rotation, the result may be either barely constrained or
unconstrained by the width of the containing block.

Step 2. Rotate the box layed out in step 1.

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

The box of step 1. rotated about 45 degrees

Step 3. Create an anonymous box (in normal orientation) the shrink-wraps
the rotated border rectangle from Step 2.

      1'--------2-----|
      |       *  #*   |
      |     *  #  # * |
      |   *  #  #     3
      | *  #  #     * |
      1     #  #  *   |
      |*  #  #  *     |
      |  * #  *       |
      |----4----------|

The normal orientation anonymous box that is shrink-wrapped
to the extremities of the rotated box of step 2. The "top"
"left" corner of this anonymous box is labelled "1'".

This is actually the content rectangle of the anonymous box.

Although it is not shown, the margin rectangle of the anonymous box
would shrink wrap the rotated margin rectangle of the rotated box, also
not shown in the figure.

For the anonymous box, the "border" and "padding" are of zero width so
those rectangles of the anonymous box coincide with the "content"
rectangle of the that box.

Step 4. Position the anonymous box according to the positioning mode
that is in effect:

   for normal flow, stack the box according to the formatting context.
    (The anonymous box might be narrower than the width of the containing
    block, but that can happen when a length is specified for the width
    of the block that is being stacked.)

   for absolute positioning, the appropriate edges of the anonymous box
     are positioned using the "top", "left", "bottom", and "right"
     properties.

   for relative positioning, the box is positioned as for normal flow
     above and the anonymous box is then offset using the "top", "left",
     "bottom", and "right" properties.

   for float, the anonymous box is what is floated.

ISSUE: for the rotated box, the can be a lot of white space inside
the anonymous box. Should line that abut the rotated object have
their lengths adjusted to closely wrap the rotated box? Within
this proposal, the anonymous (not the rotated) box is used to
determine line lengths where floats intrude on line boxes.

The anonymous box is a "block box" in a block formatting context and is
a "inline box" in an inline formatting context.

With the above approach, there is no need for a rotation point nor is
there direct need for explicit translation, scaling of skewing
transformation. Just because that are not necessarily needed here does
not mean that they might not be useful.

Things to think about:
=====================
Would it be useful to have at least "translate" as well as "rotate" in
in absolute positioning? That would allow adjustments to the default
positioning, but could these adjustments be equally well handled by
margins (which can be negative). If "translate" is added, what about
"scaling" and "skewing" or, in other words, a general 2x3 transformation
matrix?

Do inherited properties behave sensibly when, as in Step 2., the box is
rotated?

What about "auto" valued heights and widths? For example, how is rotated
text supposed to wrap? It does not really make sense to use the
horizontal width for text that will, after rotation, be unconstrained by
the horizontal width.

What about shrink wrapping? This is related to the previous paragraph.

Note that nothing in this proposal really deals with the third use case,
that where the table headings are rotated when the column content needs
much less space than the heading text. Solving this use case requires
more work.

*         Steve
=====================================
Steve Zilles

Received on Friday, 7 September 2007 01:29:52 UTC