Re: Inline elements should be affected by 2D Transforms

Alan,

The behavior for split inline elements that I surmise most people would want
is that each "piece" behaves like its own element.  So, for all intents, its
bounding box functions as a discreetly-transformed target, and that
transform is mirrored across all targets.

*Example*
**
<span style="transform: rotate(45deg);">[The quick red fox jum-]
[ped over the lazy brown dog.]</span>

The sentence (encapsulated in a span) above has been divided into two
fragments due to a line break.  The brackets visually illustrate how the
inline content is divided into discreet transform targets.

If the span is transformed as above (at a rotation of 45 degrees), then both
fragments will rotate independently, and the transform origin specified will
be relative to the dimensions of each fragment.


This approach encompasses all existing and proposed methods of displaying
inline content.

-Brian


On Fri, Jun 3, 2011 at 1:06 AM, Alan Gresley <alan@css-class.com> wrote:

> On 3/06/2011 1:33 AM, Brad Kemper wrote:
>
>>
>> On Jun 2, 2011, at 7:56 AM, Simon Fraser wrote:
>>
>>  On Jun 2, 2011, at 6:27 AM, Brian Blakely wrote:
>>>
>>
>  Restored support for inline elements should follow an analysis of
>>>> current implementations, and either a single implementation is
>>>> chosen as the standard, or an amalgam that optimally satisfies.
>>>>
>>>
>>> The problem is that there isn't an implementation that makes
>>> sense.
>>>
>>> Consider an inline element split over 2 lines, with a rotation
>>> transform. What do you expect to happen?
>>>
>>
>> I would expect the two lines to rotate as though the transform was
>> applied to their bounding box, all without disturbing any of the
>> content outside the span.
>>
>
>
> So how many things need to be checked. Would you want transform-origin [1]
> to work with rotated inline elements split over 2 lines?
>
>
>  TL---------T---------TR
>  L----------C----------R
>  BL---------B---------BR
>
>
> Split 1:
>
>  TL---------T----
>  L----------C----
>  BL---------B----
>
>  -----TR
>  ------R
>  -----BR
>
>
> Split 2:
>
>  TL----
>  L-----
>  BL----
>
>  -----T---------TR
>  -----C----------R
>  -----B---------BR
>
>
> The wider the containing block, the more this goes crazy.
>
> Split 3:
>
>                           TL----
>                           L-----
>                           BL----
>
>  -----T---------TR
>  -----C----------R
>  -----B---------BR
>
>
>
>
> [1] http://dev.w3.org/csswg/css3-2d-transforms/#transform-origin
>
>
>
>
> --
> Alan Gresley
> http://css-3d.org/
> http://css-class.com/
>