RE: Rotated Content

On Fri, 16 Jul 1999, Benjamin Hardcastle wrote:

>> Yes - the box is first flowed (if position:relative or static), and then
>> the box is positioned (if position is not static) and then the box is
>> rotated. The rotation is the _last_ transformation to be applied. It is
>> applied to everything, in much the same way as the positoning is done in
>> the first place.

> This strikes me as being very messy. Say you have a box, say 200px
> wide and 10px high before rotation, and it floats left. Text will flow
> round it, leaving a gap for the box (assuming no border/margin/padding
> et al) of 200px wide and 10px high. *Now* the box is rotated by 90deg.
> 10px x 10px of the gap is still occupied by the gap, 190px x 10px of
> the gap is empty, and 10px by 190px of the text against the left
> margin of the page will be obscured, or at least made difficult to
> read.

This is precisely what happens when moving a float (position:relative), so
why is it a problem with rotation?

> Unless you reflow the text. Wouldn't it be best if the rotation was
> the first transformation? You'd only have to flow the text once. A
> rotation of 45deg will change the dimensions of the box, for this
> example it would become 142px by 142px.
 
If you wish to change the rotation to change the width:

   1. What happens when width and height are given?
   2. Which width is used in the margin calculations?

These are very difficult questions to answer. (Make sure you are familiar
with the current margin/padding/width calculations as they currently work,
before trying to answe question 2 above. See sections 9 and 10 in CSS2).


> I suppose with a bit of JavaScript working stuff out, you could place the
> rotated element within another box of a fixed size that would be the correct
> dimensions after rotation, but that's rather grubby.

No Javascript is needed, if the rotation is fixed, as all the dimensions
will be known at design time.

BTW, when would you want to rotate a float, anyway? I would have thought
that most of the typical uses for rotated elements would have been table
headers (for which I have already posted an example), margin notes, and
background pictures (for which I have also posted examples).

-- 
Ian Hickson
: Is your JavaScript ready for Nav5 and IE5?
: Get the latest JavaScript client sniffer at 
: http://developer.netscape.com/docs/examples/javascript/browser_type.html

Received on Friday, 16 July 1999 15:28:21 UTC