Re: Floating a figure next to the preceding paragraph

On Fri, Jan 13, 2012 at 3:55 AM, Christoph Päper
<christoph.paeper@crissov.de> wrote:
> "Tab Atkins Jr." <jackalmage@gmail.com>:
>> I'm not sure about float-based methods, but this can be done with <figure> and Flexbox:
>>
>> <figure>
>> <figcaption>Foo</figcaption>
>> <img>
>> </figure>
>>
>> figure { display: flexbox; }
>
> That’s not dealing with the usecase I tried to demonstrate, let me retry:
[snip examples]

Ah, I see.  Okay, yeah, Flexbox doesn't help here.

It appears, in your specific example, that you don't actually need
floats at all.  You're explicitly carving out a right column that is
normally empty, so you can fill it with the occasional figure.  This
is easy to address: add a wrapper div that starts at "In this most
important..." and ends after the figure, make it relpos, and abspos
the figure.

If you don't have a carved-out right area, such that you actually do
want the figure to push some text around, then the same strategy will
work if you mix in some Exclusions magic.  We're not fully settled on
how Exclusions will work yet, but they'll definitely be able to solve
this case.

In the future, the Positioning spec should define a way to abspos an
element relative to an arbitrary other element.  This is present in
the proposal on my blog <http://www.xanthir.com/b48H0>.  This would
remove the need for a wrapper div, since you could simply position it
relative to "prev" or "parent", depending on the markup structure (or
by an explicit ID or something, if it was more complicated).

Christoph's approach using Regions to reorder the content should also
work, though it's seems like it's more complicated than will usually
be necessary.  However, it doesn't require a wrapper div to work, and
still lets you use floats, which may be a plus.

~TJ

Received on Friday, 13 January 2012 19:29:11 UTC