Re: Rotated Content

On Sun, 4 Jul 1999, David Perrell wrote:

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

Hmm. A better version would be:

   .document.type { 
      position: fixed; height: 0; width: 0; overflow: visible;
      top: 0em; left: 0em; margin: auto; rotate: 90deg;
      text-align: right; font: light 1em sans-serif;
   }
   .document.type span {
      color: white; background: blue; white-space: nowrap;
      padding: 0 1em;
   }

...with:

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

Of course, the <span> element would be inserted by an XSL preprocessor.
(Much of the cool stuff you can do with CSS needs extra elements in the
document tree, and XSL is the tool to add them.)

This would make the blue background grow to fit the text. Yes, a much
better way of doing it.



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

This is functionally equivalent to my first suggestion (except for the
different text alignment). It has the same problem of different fonts
being positioned differently.

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

No, it wouldn't. 18em does not imply 18 characters, it implies 18 * the
_height_ of a character. 

For example, 

   font-size: 10px; width: 10em;

...makes for a 100px box.

But it would put a box in the top left corner, yes.

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

No, it wouldn't, because the value of 'right' would be ignored. See CSS2,
section 10.3.7.7.

However, assuming you meant "margin: auto", then it would work.


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

Sounds good. The definition of 'rotation-position' when applied to
relatively positoned inline elements (i.e., non-rectangular boxes) would
presumably have the same meaning as when 'background-position' is applied
to the same situation (currently not allowed, but ways to fix this have
been suggested in the past).

-- 
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 17:53:03 UTC