W3C home > Mailing lists > Public > www-style@w3.org > June 2011

Re: Inline elements should be affected by 2D Transforms

From: Brian Blakely <anewpage.media@gmail.com>
Date: Tue, 7 Jun 2011 16:16:25 -0400
Message-ID: <BANLkTikHk5PMiOpND=u6ETvSPFj_T86gMg@mail.gmail.com>
To: Shane Stephens <shans@google.com>
Cc: Brad Kemper <brad.kemper@gmail.com>, Boris Zbarsky <bzbarsky@mit.edu>, "www-style@w3.org" <www-style@w3.org>
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.


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 20:17:13 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:38:46 UTC