Re: Floating a figure next to the preceding paragraph

Tab Atkins Jr. (2012-01-13 20:28):
> 
> You're explicitly carving out a right column that is normally empty, so you can fill it with the occasional figure.

That’s basically what this kind of layout does, yes.

  HHHH
  PPPP
  PPPP FFF
  PPPP 

If you have two consecutive figures, you might want to position them horizontally or vertically, depending on space available:

  HHHH
  PPPP
  PPPP FFF FFF
  PPPP 

  HHHH
  PPPP
  PPPP FFF
  PPPP FFF

You may actually not want to right-float figures, but shove them into the right pseudo-column and align them left there:

  HHHH
  PPPP FFF
  PPPP 
  PPPP FF

not

  HHHH
  PPPP FFF
  PPPP 
  PPPP  FF

Is there some magic trick to do that with floats?

  figure::after {
    display: block;
    float: right;
    min-width: 0;
    max-width: 100%;
    width: /*?*/;
  }

> This is easy to address: add a wrapper div

Like I said, adding extra markup be not or hardly possible. A new pseudo-element that spanned a figure and a paragraph preceding it might work, though. (It’s the one necessary for simulating ‘di’, i.e. to box ‘dt’ and ‘dd’ together.)

> make it relpos, and abspos the figure.

That may work for some cases, but what …
a) if the figure is taller than the paragraph?

  HHHH
   PP1 FFF
  PP1  FFF
   PP2 FFF
  PPP2 FFF
  PPP2
  P2

b) there are two consecutive figures?

  HHHH
   PP1 FF1
  PPP1 FF1
  PPP1 FF2
  PPP1 FF2
  PPP1
  PP1
   PP2
  P2

  HHHH
   PP1 FF1
  PP1  FF1
   PP2 FF2
  PPP2 FF2
  PPP2
  P2

> In the future, the Positioning spec should define a way to abspos an element relative to an arbitrary other element.

Sure, but one day there should also be a Float module and it should deal with vertical floats and clears, combinations thereof and arbitrary float barriers.

I’m also not sure whether the following iOS-inspired, loosely related usecase “hanging list labels” should be dealt with in Positioning or in Float:

  --------    --------    --------    --------    -------- edge
  A      ^    A      ^    A      ^    B      ^    B      ^
  ABBA        AC-DC       B           Beatles     Beck
  AC-DC       B           Beatles     Beck        Blur
  B           Beatles     Beck        Blur        C
  Beatles     Beck        Blur        C           Corrs
  --------    --------    --------    --------    -------- edge

> Christoph's approach

That’s me, too.

> using Regions to reorder the content should also work, though it's seems like it's more complicated than will usually be necessary.

It would work without adding markup or dealing with every single figure on its own.

Getting back to thinking about the figure area as a second, right-hand column, this code could kind of work (figures taller than their paragraph are not handled well):

  article   {
    column-count: 2;
  }
  h2, /* headings may protrude into the figure column */
  p::before {
    column-span: all; /* works like a vertical float barrier */
    display: block;
    height: 0; /* not sure the latter 2 rules are necessary */
  }
  p+figure, /* trying to treat consecutive figures */
  figure+p  {
    break-before: column;/* column-break-before: always; */
  }

In conclusion, this usecase may be solved to varying degrees with additions to either Regions, Columns, Floats, Positioning + Selectors or the markup, hence I wasn’t sure how to tag the thread in Subject.

Received on Monday, 16 January 2012 13:08:42 UTC