Re: Rotation in CSS

>
> from Steve Zilles
>
>
> Use Cases of "rotation"
> =======================
Almost anything might be rotated. I can see times when images might  
be rotated. The cases of rotating text you listed were interesting,  
but might also be improved with the ability to rotate the individual  
letters, as well.

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

I think this feature would be improved by making it a general purpose  
'transform' as in SVG. This would provide translation (x, y offsets),  
rotation (including rotation around a user-defined point, defaulting  
to the origin), Scaling (the x and y directions either separately or  
equally), and skewing (providing an angle other than 90 degrees for  
the corners of the box). Because the origination of SVG was from  
graphics experts, this seems to be a useful and fairly complete set  
of tools. It can also be implemented as a single matrix operation,  
even with multiple transforms.

>
> A positioning algorithm (that deals with the above four contexts).
> ===========================================================


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

If a general transformation (ala SVG) is allowed, it will affect  
positioned (relative, absolute, float) blocks by (possibly)  
translating them from their positioned location. Some general rules  
need to be formulated. Maybe 'relative' can be deprecated and  
'translate' used instead.

You have given a good overview of the process, and some of the  
possible problems. Thank you.

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

Check the SVG specifications. The authors have provided primitives  
for most of these problems. (Or if you ask me specific questions, I  
will try and research answers for you from the SVG specs. At one  
time, I knew them fairly well.)

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

Good job, Thanks again.

James Elmore

Received on Saturday, 8 September 2007 16:22:43 UTC