[css3-2d-transforms] transforming inline elements

I was thinking a bit about how to achieve certain visual effects with 
rotated letters. They only involve 90° turns, so some of them might be 
possible with the Text Layout module rather than with Transforms. Just 
brainstorming...

1) Single rotated letter

Sometimes found in books or poems, a single letter that looks like it 
has fallen over:

    m... m... m... ᴟ

(Sorry for the Unicode abuse.) One would hope it could be as simple as

    span.fallen {transform: rotate(90deg)}

Using Text Layout, it might be

    span.fallen {block-flow: rl}

but that only rotates glyphs that are sensitive to the writing mode 
(the "m" is, but CJK ideographs are not), so this is not a generally 
applicable method.

As for the alignment to the baseline: The 'block-flow' property is 
almost certainly going to specify that the element is handled like an 
inline-block, which in this case would sit on the baseline and look 
pretty much right without any further properties, such 
as 'vertical-align'.

The 'transform' property would probably need to say something similar. 
See below.

2) Rotated word

Rotating a whole word is not much different:

    After the collision, one of the cars was uʍopǝp̣ı̣sdn

With 'transform', this should be as simple as

    span.fallen {transform: rotate(180deg)}

I'm not sure it can be done with properties from the Text Layout module. 
There will certainly be combinations of 'block-flow' 
and 'glyph-orientation' (or some such property) to make letters appear 
upright, turned right and turned left, but maybe not upsidedown. 
(Upsidedown writing appears in very old inscriptions, but not in any 
current writing system.)

The correct alignment is not going to be automatic. I think the behavior 
will be as follows: an inline element with a transform is implicitly 
turned into an inline-block first, then transformed, and the bottom of 
the bounding box of the result is put on the baseline. (Splitting the 
inline element over several lines first and then rotating each box 
seems not necessary. It is already unreadable enough on a single line.)

The result then has to be aligned correctly with 'vertical-align' (or 
with relative positioning):

    span.fallen {transform: rotate(180); vertical-align: -0.25em}

A problem is that the size of a font's ascender is not available to CSS. 
If we assume a new unit 'ht' ("height") that corresponds to the 
ascender, we could align the rotated text properly:

    span.fallen
     {  transform: rotate(180)
     ;  line-height: 1em
     ;  vertical-align: calc(1ex - 1ht)
     }

3) Rotated heading

A 90° rotated header, displayed to the side of the text to which it 
applies:

    The opposite of stereo   ᴟ
    is mono.  It has fewer   ᴑ
    letters and thus needs   ᴝ
    fewer  loudspeakers as   ᴑ
    well, of course.

I expect this can be done with

    h2 {transform: rotate(270deg); float: right}

The definition of 'transform' will probably be such that the resulting 
box will have a height equal to the width it would have without 
rotation. So it may be necessary to add an explicit width:

    h2 {width: 10em}

or, if we know the heading won't be very long:

    h2 {width: max-content}

This example might also work well, if not better, with the properties 
from Text Layout, because in this case keeping ideographs upright is 
probably what you want, unlike in case 1 above.

    h2 {block-flow: rl; float: right}

In this case the heading is a block and adding a 'transform' or 
a 'block-flow' doesn't turn it into an inline-block, but keeps it a 
block. There is a question what its width and height is, but there is a 
good chance that it not necessary to use the 'width' or 'height' 
properties explicitly.



Bert
-- 
  Bert Bos                                ( W 3 C ) http://www.w3.org/
  http://www.w3.org/people/bos                               W3C/ERCIM
  bert@w3.org                             2004 Rt des Lucioles / BP 93
  +33 (0)4 92 38 76 92            06902 Sophia Antipolis Cedex, France

Received on Tuesday, 15 September 2009 19:24:28 UTC