Re: Inline elements should be affected by 2D Transforms

Hi Brian,

If you're on a mac, try modifying the div's width between 102px and 103px in
the attached example.  "some" clearly shifts as a unit from the first line
to the second (Chrome 11, Chrome 13 Canary, Safari 5, WebKit nightly @
86836). Do you have a counterexample where this technique fails?

Cheers,
    -Shane

On Sat, Jun 4, 2011 at 12:09 PM, Brian Blakely <anewpage.media@gmail.com>wrote:

> Shane, your technique does break "some" into "so" and "me" in Webkit.
>
> On Fri, Jun 3, 2011 at 9:56 PM, Shane Stephens <shans@google.com> wrote:
>
>> 1. The desired behavior is very dependent upon your application.   If you
>> want to rotate an entire paragraph, then it's inappropriate to transform
>> line-by-line.  On the other hand, for blocks of text that reflow across
>> region or page boundaries, transforming line-by-line is the only sensible
>> approach.
>>
>> Clearly authors need to be able to describe a block of text that flows in
>> the correct manner but that is kept together.  This, of course, is one of
>> the purposes of inline-block. Hence restricting transforms to situations in
>> which author intent is clear (e.g. when they have explicitly marked text as
>> a single unit by placing it in a display:inline-block span) is very
>> sensible.
>>
>> 2. It is true that some artifacts are introduced when using inline-block
>> on single characters.  These artifacts are:
>>   a. space characters are collapsed when isolated in a span
>>   b. word boundaries are not respected when words are split across
>> multiple spans with different display settings.
>> It is possible that one or both of these could be considered bugs - I
>> don't know enough of the specifics of word boundary detection to be
>> sure. Nevertheless it is completely possible to work around these issues,
>> e.g. for the purpose of slightly transforming individual characters in a
>> word.  For example:
>>
>> .word {
>>   display: inline-block;
>> }
>>
>> .transformMe {
>>   display: inline-block;
>>   transform: ...;
>> }
>>
>> This is <span class="word">s<span class="transformMe">o</span>me</span>
>> text
>>
>> Reflows exactly as you would expect and works very nicely.
>>
>> Cheers,
>>     -Shane
>>
>