Super Hero Layouts

Modern CSS layout techniques opened a world of possibilities. Layouts previously thought impossible become possible. A great way of mastering techniques is through play, so I turned to one of my favourite hobbies – comic books.

Taking well known layouts, how could they be built in a browser? There’s uneven shapes, ever changing layouts and compositions? This talk is going to dive into modern CSS layout techniques to recreate elements of comic books with CSS Grid, writing mode, CSS shapes and more. Come along to see CSS layouts at play.

(Lots of code demos: https://codepen.io/collection/DjwRaP/)

Comic books had ages that lasted for many years, going through gold, silver, bronze and modern over a total of 70 years.

Layout on the web has gone through many ages very rapidly:

  1. HTML only, including abuse of tables
  2. Flash – while there were issues it did allow a lot of creativity
  3. CSS with float and absolute layouts
  4. We are now heading into the intrinsic layout era with flexbox and grid

…all of that in just 26 years.

Anton has built a lot of websites and read a lot of comic books…

Action Comics #1 is an important book in comic history as it introduced Superman. The layouts of comics through this era were very much rows of rectangles. Each row would have 1-3 panels and reasonably consistent space between them. For CSS grid this derives a 16 column grid.

Moving forward in comic book history to Spider-man #121, the layout changed to use vertical panels to convey the drama of a fall from a bridge. This broke away from the row-based model.

Watchmen #7 is considered to kick off the modern era. Until that point they had stuck to the nine panel grid, but in this issue they started using tricks like an image that spanned full width, with panel gaps overlaid.

We can use subgrid for this and use pseudo elements on the overlay element to create the visible gaps. News websites can use this a lot to display a set of tiles with equal-height elements even when the text length changes a lot.

Subgrid is awesome! But it’s only in Firefox nightly at this point. But it should come through quickly in the other evergreens.

We can create the same effect with display:contents, but beware of accessibility impacts.

Spider-man 2018 #9 introduces a very detailed, layered design. This is more complicated in Grid but is still derived by the basic process of working out how many rows you need, then calculating the base pixel size within the overall space, then you can derive fractions from that. There can be a bit of work to figure it out but if you are methodical it will work out.

Firefox has an excellent grid inspector that reveals the rows and columns; and the positive and negative references.

The modern era of comics did a lot with layering and it gives rich design opportunities, but you do need to be very careful to set up a logical source order so it doesn’t become a confusing jumble for users with assistive tech. The tab order of the page is a good way to test the basics of this, people will expect to tab to things in a logical order.

Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility

There is a lot of criticism that web layout is still putting everything in boxes. Comics also broke out of their boxes in the golden age, using geometric and curved shapes to really get away from boxes.

CSS can use clip-path for this. IE11 won’t ever get this; and we have to wait for Edge to move to chromium. Grid lines can only run straight, so we have to layer the images to get them into the page. Then rotate the panel container to add angles. Finally we use clip-path to create the irregular shapes. You can do this manually by setting the x/y coordinates of polygons; or use Firefox which includes a visual tool. To add the border, use a transform to scale the image down; and nudge the transform-origin to align correctly – this reveals the white background beneath.

Detective Comics #876 has a spiralling fall illustrated with a sequence of rotated panels. In CSS we use transform and clip-path. But clip-path isn’t just for polygons, it can create curves as well with ellipse.

CSS Shapes are useful to layer text into these layouts – again IE11 and Edge are gone at the moment… and again Firefox dev tools has a visual tool to visually adjust values and see the effects. You can also use shape-outside and a masking image to set irregularly-shaped text.

What about non-western comics/manga that read right to left and top to bottom? Grid can be sorted out with dir="rtl" (right-to-left) and writing-mode.

Our layouts have been stuck in boxes for a long time, so it’s exciting to have so many options to break out of that while still being able to maintain a11y and i18n.

With great power comes great responsibility. – Uncle Ben

Use your powers for good. Excelsior!

Resources

@antonjb