Re: Rotated Content

Summary of updated suggestion:
 
   'rotate'

     Value:       <angle> | none | inherit
     Initial:     none
     Applies to:  all elements (with position other than static)
     Inherited:   no
     Percentages: N/A
     Media:       visual

   This property specifies how a box's content is rotated from the
   content of the box's containing block.

   'none' is equivalent to '0deg'.

   Angles are measured anti-clockwise from the positive x direction,
   and rotations are based on the center of the box. So a 180 degree
   rotation would have the same effect as mirroring and flipping the
   box (position and size would be left unchanged).

Naturally, there should also be examples of this, and what is now
section 4.3.7, Angles [3], should also be updated to note that angles
apply visually as well as aurally.


On Tue, 29 Jun 1999, Daniel Glazman wrote:

> What are the reference line and direction?

Anti-clockwise from the positive x direction (left).


> Mention of bidi is needed. What happens in case of vertical text? I
> guess that the non inheritance is here to partially solve the
> problem.

Since we are moving the entire box, no mention of bidi is needed. In
fact, no mention of text is needed at all.

The 'rotate' property is similar to the 'top' and 'right' properties:
it applies a transformation to the box, *after* it has been put in the
document.


> 2. does it really apply to all elements? If it applies to inline
> elements, how will it affect the size of the containing box (CSS has
> only rectangular and non rotated boxes for the moment) and line
> height? How does it affect background and borders of block-level
> elements? Relation with clip and overflow properties?

Again, because we are applying a transformation to the box after flow,
these issues are neatly sidestepped.


> 3. I don't think it should apply to a table sub-element TR TD or TH !

Why not? If 'position:absolute' or 'position:fixed' is applied to TR,
TD or TH, the element just becomes a block box and is taken out of
flow. If 'position:relative' is applied, then the rotation occurs
AFTER the flow, so the rotation has no effect on the surrounding
elements. (Just like relative positioning has no effect now).


> 4. what is rotated? the box or the inline data inside the box ?

The box.


On Tue, 29 Jun 1999, Rasmus Kaj wrote:
> Rotating THs and TDs sounds more useful (but the same effect would
> be possible to get by including another element inside the TD/TH).

And in fact, that would probably be the best of way of rotating headers:

   <TH class="rotated">  <SPAN>Long Header</SPAN> </TH>

...with these styles:

   TH.rotated { 
      height: 10em; width: 2em; position: relative; 
      empty-cells: show;
   }
   TH.rotated SPAN {
      height: 2em; width: 10em; margin: auto;
      position: absolute; rotate: 90deg; left: -4em; top: 4em;
   }

...would result in a header which had its Long Header drawn in the
typical fashion of densely packed tables.


> Is it possible (legal / implemented) to use non-static position on
> those elements now?

Yes, it just makes them display:block (absolute, fixed) or simply
moves the box with no effect to anything else (relative).


On Tue, 29 Jun 1999, John Buell wrote:
> Okay, so to summarize you're talking about not rotating the fonts
> themselves, but rotating "boxes" containing the font and text
> content? Wouldn't it be simpler to just rotate the font?

No, not by a long way, because you have all the internationalization
issues to worry about if you rotate the text itself. Rotating the box
is a much simpler operation in comparison.


> This is what I've been looking for to simply rotate in fixed
> intervals (by 45 or 90 degree angles).

See the example above. 


On Wed, 30 Jun 1999, Benjamin Hardcastle wrote:
> One thing, if you have an item that is say, floated left and rotated
> 30 degrees, how would text flow around it? Would the left margin of
> text have a vertical margin, or would the margin be rotated too?

The text would act as if the float was not rotated. This is just like
happens now, if you float an element, and then move it using the top,
left, right or bottom properties.

-- 
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 Saturday, 3 July 1999 16:22:53 UTC