Re: Rotated Content

Ian Hickson wrote:
>
>Yes, this is exactly what is being suggested.


It certainly is. Perhaps I need remedial reading courses or treatment
for attention deficit disorder.

>> with the rotation point being the same point used for positioning.
>
>...which is? There is no single point used in positioning.

0,0 is the logical point from which to do a transformation. We use a
left->right, top->down coordinate system. Within the box being
rotated, 0,0 is upper left.

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

The containing block, "whose edges serve as references for the layout
of descendant boxes".

> ), then you would also have to offset the box to get it to
>stay in the same place!

True. And I don't see how the necessary translation could be done by
an author/designer if the dimensions of the box to be rotated aren't
known until render time. But confining center of rotation to the
center of the containing block imposes serious limitations also.

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

Will that markup always produce the desired result? Seems to me that
different sans-serif fonts will produce differently positioned text.
Consider:


  .topleft

     position: fixed; height: 1em; width: 18em;
     top: 18em; left: 0; margin: 0; rotate: 90deg;
     font-size: 1em; line-height: 1em;
     text-align: right;
  }

If the rotation point is 0,0 of the containing block, the above rule
would guarantee that an 18-character-or-less text string would be
positioned vertically at the top left of the viewport, whatever the
font-family. And this:

  .botright

     position: fixed; height: 1em; width: 18em;
     bottom: -1em; right: 1em; margin: 0; rotate: 90deg;
     font-size: 1em; line-height: 1em;
     text-align: left;
  }

would guarantee the text string be positioned bottom right.

Of course, the text could also be positioned bottom right if rotated
around the lower right corner. And positioned bottom left if rotated
around the lower left corner. Etc.

I agree that rotation around center is desirable. I disagree that it
should be the only rotation allowed. So what are some alternatives?

Rotation point could be determined by box offset. If box offsets are
all 'auto', then rotation is around center. As each offset is given a
value, roation point is adjusted accordingly. For example,

  .justrotate

     position: relative; rotate: 45deg;
  }

would rotate around center, while

  .nudgeleftnrot

     position: relative; left: -2em; rotate: 45deg;
  }

would have a rotation point at the center of the left edge of the
translated containing block.

More versatile than before, but still limited. Might not there be some
situation where a specific rotation point is critical? Must rotation
be specified with a single property?

I suggest taking a cue from the background property and breaking
rotation into two sub-properties with 'rotation' as shorthand. This
gives us:

   'rotation-angle'

     Value:       <angle> | none | inherit
     Initial:     none
     Applies to:  elements with a position property other than normal
     Inherited:   no
     Percentages: N/A
     Media:       visual

   This property specifies the angle of rotation of the content of a
   positioned element.

   'none' is equivalent to '0deg'.

   Angles are measured anti-clockwise from the positive x direction.
   The content is rotated about a point specified by the
   rotation-position property.

   'rotation-position'

     Value:       [ [<percentage> | <length> ]{1,2} | [top | center |
bottom] || [left | center | right] ] | inherit
     Initial:     50% 50%
     Applies to:  elements with a position property other than normal
     Inherited:   no
     Percentages: refer to the size of the containing block
     Media:       visual

   If a rotation-angle has been specified, this property specifies
   the position of the center of rotation for rotating the content
   of a positioned element.

   When two values are given, the first value specifies the offset
   of the center of rotation from the left edge of the element's
   containing block and the second value specifies the offset of
   the center of rotation from the top edge of the element's
   containing block. Percentage values refer to the width and
   height of the element's containing block, respectively.
   A single value applies to both horizontal and vertical offset.
   'Top' and 'left' are equivalent to 0. 'Center' is equivalent to
   50%. 'Bottom' and 'right' are equivalent to 100%.

   'rotation'

   Value:   [<'rotation-angle'> || <'rotation-position'>] | inherit
   Initial:   not defined for shorthand properties
   Applies to:  elements with a position property other than normal
   Inherited:   no
   Percentage values:  allowed on 'rotation-position'
   Media groups:   visual

   The 'rotation' property is a shorthand property for setting the
   individual rotation properties (i.e., 'rotation-angle',
   'rotation-position') at the same place in the style sheet.

Seems to me this would satisfy most spin-cravings. Since default
center of rotation is centered on the containing block, 'rotation' is
functionally equivalent to 'rotate' as proposed. (Why 'rotation'?
Seems to me that visual properties are typically nouns.)

David Perrell

Received on Sunday, 4 July 1999 15:39:42 UTC