Thinking about page floats, figures, regions and grids

A few days ago my friend Jen Simmons pointed me to some images demonstrating the goals of the CSS Figures specification, asking if this could be built using Grid. Off the top of my head I said I thought it could be built using a currently impossible (given browser support) combination of Regions, Grid and Exclusions, however I tend to figure stuff out by writing code, and as I worked through the ideas I made some notes. What follows is really those notes. Make of them what you will!

Reading through the CSS Figures specification reminded me of some of the questions raised by attendees at my CSS Workshop earlier this week. They were very interested in the limitations of Multiple Column Layout, and whether more advanced features might ever come to that spec. I’d love for people to play with these ideas and come up with their own thoughts. If you do – add a comment.

Multi-Column Layout

The multi-column layout specification Level 1, allows the splitting of content into multiple, equal width columns. The columns can be separated by a column gap, which can also have a rule. It is possible to span an element across columns but we are limited to spanning all columns or none.

When I show the module to people in a workshop, and demonstrate the spanning their first question will always be, “can we span just some of the columns?” The answer to that question in level 1 of the specification is, no.

The Level 2 Editor’s Draft (very much a Work in Progress) does include mention of an integer as a valid value for the column-span property. This would enable a heading, quote or image to span only some of our columns.

So this would get us some of the way to the examples in the CSS Figures specification. If we look at the four column example in Figure 1, just having column-span: 2 would enable the heading and the landscape image to span two columns. We would need to place that image fairly carefully in the source, and so it might not work as well in the narrow viewport layout. Crucially, what it wouldn’t give us is the inset quote on the left which is halfway across a column, nor would it enable the placing of the subhead at the top of the second column.


I would love Exclusions to be implemented in more browsers. This tiny specification started life along with CSS Shapes, was separated from that spec and seems not to have had a lot of interest since. It would enable some of the display we need. We can position the quote with CSS Grid Layout, or even just absolute positioning, then make it an exclusion at which point our multi-column text will flow around it. So perhaps a combination of Exclusions and Multi-column is a solution to this problem. I tried this out – you’ll need Edge to see it working, but in the image below you can see the text flowing around the quote.


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.

CSS Layout News

CSS Layout News

A weekly collection of tutorials, news and information on all things CSS Layout.

The CSS Layout Online Workshop

If you are ever baffled by floats, puzzled by collapsing margins or want to understand what is happening under the hood of a framework, this course is for you.

♡ Likes

↺ Reposts

Posted a response? Enter the URL

This site uses Webmention. If you post a response to this post on your own site, and you also support Webmention I'll be notified automatically. If not you can add a link here.