Thinking about page floats, figures, regions and grids

Grid and Regions

Back to my original thinking around using CSS Regions along with Grid to solve the problem. The goal image is described as being something for print output not the web, so although the aim is to avoid “dummy structural elements” which will be a result of using Regions, I wanted to try this out. Here is the result – this time you’ll need Safari Technology Preview or Webkit Nightlies.

There are obvious issues with this, we have the empty div issue, and it is on those elements that I have created my grid. I then use Regions to flow the content into the relevant areas of the grid, this enables placing of the images exactly where I want them without them needing to be carefully placed in the article source. However I’m having to create a fairly convoluted grid to enable the appearance of balanced columns, even for the two column version. While I probably could get some approximation of the 4 column layout with enough messing around, it wouldn’t be a very scalable solution.

We would need some capability to do column balancing in order to get this working with Grid. We would also still need to use Exclusions for the Pull Quote.

Grid and Exclusions and Multi-column Layout

It occurred to me that I could create a grid to place the items that needed positioning, and then put the article content into the same grid spanning all of the columns – bar the first one which I’m using for the pullquote. With the article in place, I could then use multi-col to get my reflowing columns. Once I had the placed items and article all stacked together creating the layout, I could then use Exclusions to cause the text to flow around the placed items.

This doesn’t actually work in any browser, I did have a quick go to see if I could get it to work using the old Grid syntax that is implemented in Edge, but everything blew up fairly quickly. In the code below you can see the stacking up of the article and elements in any Grid supporting browser, but the text is covering the elements as we don’t have exclusions.

Page Floats

So, what of the CSS Figures specification itself? Does it solve problems that other specifications don’t; given that none of my attempts have been particularly satisfactory. That question was what prompted this enquiry in the first place.

The CSS Figures specification builds on Multi-column layout, so we have our multiple columns that can respond to the size of the viewport (or page if we are working with Paged Media).

If we then had the ability to use column-span: 2 as defined in Level 2 of the multi-col specification that would enable the display of the heading and landscape image across two columns of four.

In the four column layout we want our portrait image to display at the top of column 4. This would be achieved by way of a new value of the float property top-corner, floating the item to the top of the last column.

The quote would be positioned using a new property called float-defer-line – the below CSS would float the quote to halfway down the column in would normally appear in.

.quote {
  float: top;
  float-defer-line: 50%;
}

Developing CSS for print is something that I do a lot of, and in a print context I can see how these additions to float and multiple column layout make sense. In print you have excellent control of the page, control we never have when working on the web. If you were carefully laying out each page by hand then something like Grid Layout could be very useful, you could carefully lay out your content on a grid the exact size of the page, placing each item and making sure that it would fit into the defined box. Most books are not laid out in this way though.

Recently I created stylesheets for SitePoint, for them to move their book publishing to HTML and CSS. In their case I needed to create a set of rules that would govern any type of content, to try and avoid too much reliance on an editor going through and adding special cases for elements. The properties and values defined in CSS Figures make much more sense than something like Grid when used in this context. We could create rules that dictate things like, “This class of figure should always display at the top of the right column”, “Quotes like these should display in the middle of column 2”, and then let the content flow into our pages based on those with minimal need for adding precise positioning information.