Article layout: "hanging" blocks

[jimjam-slam]

Description

Quarto's grid system supports overhanging content (eg. .column-body-outset-right or .column-screen-inset-left) that goes from partway in one of the sidebars to the opposite edge of the normal page body.

I'm not sure how feasible this is given the page body currently takes up a single grid columns (or maybe it can be done without the grid), but a nice enhancement would be columns that float and overhang — say from the page outset position to a third of the way through the body column.

The effect I'm describing is something like this illustrative image, but imagine that the second par that is currently below the grey block actually floats around that grey block (simply setting float: left does not work because everything is fitted to the grid).

I'm not 100% sure that a float like this is possible given the grid system, but I wanted to flag it as a nice enhancement for illustrations and other ancillary content that don't necessarily need to break up content entirely (but which may like to intrude more than .column-margin content).

[mcanouil]

Seems tricky considering the current grid layout with the margins.

@dragonstyle can probably shed some lights on the feasibility as he is the one working extensively on this aspect of Quarto.

[jimjam-slam]

In some ways it'd probably be easier to wrap both the overhang content and the content that is potentially exposed to the float (eg. a few pars) in a wrapper div and then apply a regular float and negative margin to the float—that way you can break out of the grid 🤔 And then make the negative margin contingent on a minimum page width. So maybe less appropriate for Quarto itself and more appropriate for just advanced authoring...

[dragonstyle]

Alternatively, could you created a div that spans the region you'd like (e.g. page-left) and then float the item itself left and limit its width? I haven't tried this, but an idea to maybe explore in the meantime.

I could see us adding other 'stops' to the grid within the body, though at some point it may actually just make the most sense for us to provide a simple escape hatch (.column-screen might already basically do this).

[jimjam-slam]

Yeah, I think wrapping the float and a couple of pars makes the most sense! No need to overengineer things 😁