Re: Rotated Content

On Sat, 3 Jul 1999, David Perrell wrote:

>>   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).
> Section 9.3.2 of the CSS2 spec states that "An element is said to be
> positioned if its 'position' property has a value other than 'static'.
> Positioned elements generate positioned boxes, laid out according to
> four properties..." Perhaps the simplest means for rotation would be
> to add a fifth property "angle" or "rotation",

Yes, this is exactly what is being suggested.


> with the rotation point being the same point used for positioning.

...which is? There is no single point used in positioning.

The reason I suggested that the rotation be based on the center of the box
is that it is the easiest to imagine. For example, if you want to rotate
something so that it was upside down, then 

   .upside-down { position:relative; rotate: 180deg; }

...would be enough. If you put the rotation's fulcrum somewhere else, e.g.
at the top left hand corner (of what, though? The content, padding, border
or margin edge?), then you would also have to offset the box to get it to
stay in the same place!


Here is another example, this one puts the text "W3C Recommendation" along
the left edge of the viewport, like is currently done in W3C
Recommendations (but currently a graphic is used):

   .document.type { 
      position: fixed; height: 1em; width: 10em;
      top: 4em; left: -4em; margin: auto; rotate: 90deg;
      background: blue; color: white; text-align: center;
      font: light 1em sans-serif;
   }

...with this markup:

   <p class="document type">
      W3C Recommendation
   </p>

This rotates a square 1em inline graphic so that its bottom edge becomes
its left edge:

   img.symbol {
      position: relative; rotate: -100grad; display: inline;
      height: 1em; width: 1em; vertical-align: text-bottom;
   }

It could be used like this:

   <p> As is described <a href="css.html"> in the document </a>
       <img class="symbol" src="/icons/css.gif" alt="[CSS]" 
       title="A CSS Document">, this is very good.
   </p>

All the "symbol"s in the document would get rotated.

-- 
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 Sunday, 4 July 1999 10:33:09 UTC