Hiding in the margins

An interim post about cascading style sheets, box models and good typography.

Okay, okay… I know I said in my last epistle that the next one would be more of a comms-focused affair. But then the PM got poorly, so I thought it best to wait until and if he recovered before hitting the keyboard.

In the meantime I’ve also ignored my resolution to stop fiddling afresh with the new site template.

To all intents and purposes the template is now ready for deployment. It’s a variation of the current theme, works on all screen sizes (all that I can test on, at least), has a single, centred column of content, drop-capped initial paragraphs and a new ‘callout’ style so I can insert mini tables or quotations or information boxes floated left or right.

And yet…

It just reminds me of lots of other websites.

Look at this page from WP Tavern, one of the WordPress-related sites I visit often. The approach is basically the same: top menu bar (mine’s fixed), wide margins (although wider than mine), large-ish point size. We’re even using the same Google Font, Lora1. Everything you’ve ever read on Medium has the same layout as well.

I’ve grown quite fond of the offset content in this theme, but WordPress has a new thing called alignwide and alignfull. As they suggest, they allow you to have images that are wider than the content around it, or the full width of the screen (see the WP Tavern page for an example). That works fine if you have a centred column of text but your margins are offset… well.

I’ve spent at least 12 hours over the last two days trying to work out that one!

It’s all to do with how stylesheets work on the web. You have something called the box model. You can set margins around the content ‘box’ which specify how far away other content boxes should be. You can add padding, which specifies how far away from the edges of the box the content should be. You can float content left or right so that other content flows around.

And if you’re not paying attention it all goes horribly wrong.

I’ve scoured the Interweb using lots of variations of “setting offset margins” but the only useful thing I found was Butterick’s Practical Typography (2nd Edition), which is a very interesting and distracting read. I shall also be using it to beat people around the head with next time I proof anything that has two spaces at the end of sentences. It also have some nice fonts… to buy.

What to do, what to do?

You know I don’t like to be beat, so I remain confident that the answer is out there, if only I can phrase the question correctly (that’s what we librarians do). On the other hand… the PM’s back on his feet so I can write that diatribe now. Hope your week will be as busy / productive.

Update. Holy Heavens, I worked out how to do those margins. It’s an Easter miracle! Broke everything else, obviously, but still…

  1. Update: have found a different font. []