Re: Inline elements should be affected by 2D Transforms

Brian,

No, both spans in my attached example are styled as inline-block.  Try
(e.g.) inspecting the elements in a WebKit-based browser.

Your fiddle illustrates a difference in behavior when the containing
element is too small to contain even a single word of the content (try
changing the width to 55px for example). Yes, this results in
differences when using inline-block over inline. No, it's not
particularly relevant to the discussion as there is a trivial
workaround.

Cheers,
    -Shane

On Wed, Jun 8, 2011 at 6:16 AM, Brian Blakely <anewpage.media@gmail.com> wrote:
> Shane, you aren't applying any CSS in your attached example.  All the spans
> are inline.
> You can see here ( http://jsfiddle.net/brianblakely/byXcg/ ) that using
> inline-block is by no means an adequate substitute for transformations on
> actual inline content.
> -Brian
>
> On Fri, Jun 3, 2011 at 10:30 PM, Shane Stephens <shans@google.com> wrote:
>>
>> 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
>
>

Received on Tuesday, 7 June 2011 22:49:55 UTC