- From: Steve Zilles <szilles@adobe.com>
- Date: Wed, 31 Oct 2007 14:41:30 -0700
- To: www-style@w3.org
- Message-Id: <6.2.1.2.2.20071031072406.10192af0@namailhost.corp.adobe.com>
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.
See
http://lists.w3.org/Archives/Member/w3c-archive/2007Oct/att-0249/Thai-VertEnglish-BtoT-Elle-2452-no58-1999.jpg
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):
2
* #*
* # # *
* # # 3
* # # *
1 # # *
* # # *
* # *
4
Now suppose the original context for the above object was
<p>Lots of text that can flow in normal flow as usual.
<span>############</span.
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
=====================================
Steve Zilles
115 Lansberry Court,
Los Gatos, CA 95032-4710
steve@zilles.org
Steve
=====================================
Steve Zilles
115 Lansberry Court,
Los Gatos, CA 95032-4710
steve@zilles.org
Received on Wednesday, 31 October 2007 21:41:48 UTC