Jiminy Panoz is a freelancer who has been helping French publishers make the transition to digital for the last five years. In addition to ebook conversion, he has conducted QA audits, managed interactive projects, built custom tools, and designed tailored workflows for his clients. He’s also the creator and maintainer of open-source projects dedicated to ebooks, including the blitz framework. Visit his website for more: chapalpanoz.com
Don't miss Jiminy Panoz and Dave Cramer speaking at ebookcraft 2018 in a session titled Jiminy and Dave's Excellent CSS Adventure.
As an e-production professional, you may have had your fair share of nasty rendering bugs, weird fixes, and clever tricks. We’ve all been there, making the most out of styles that have been there, like, forever to do some more complex layouts while still providing users with good interoperability.
Old habits die hard but, with the advent of web publications, the way we style publications will undoubtedly change: Some clever tricks are going to be replaced with one-liners; responsive design will become a must-have; and some specifications, like custom properties, are likely to become essential parts of our zen gardens.
In other words, we’ll have to take the great leap forwards into modern CSS. And CSS is evolving fast! So fast, as a matter of fact, that it might be difficult to keep up-to-date. But the good news is that it can help you overcome tough challenges you’ve had to deal with so far, and you may well save a lot of time, headaches, and Twitter rants.
In case you missed it, here are some of the radical changes CSS is currently going through.
Laying out has never been that simple
Do you remember that time you had to Google “how to center vertically in CSS?” It has been such a painful thing that it turned into a CSS joke.
After all these years of suffering, struggle, and misery, it looks like the CSS Working Group finally heard the complaints and has decided to press the TURBO button. As of today, not only can you vertically center with a few lines of CSS, you can also achieve more sophisticated layouts.
CSS grid, for instance, is awesomeness incarnate. It allows you to set up a grid system in a few lines of CSS and lay out the page elements in a magical way. If you didn’t take a look at this spec yet, I strongly encourage you to check out Rachel Andrew’s Grid by Example and Jen Simmons’ Experimental Layout Lab. Their work and evangelization have inspired thousands of people to give it a try, and there are very interesting things going on in responsive galleries, posters, covers, comics, magazine layouts, and more.
The CSS Working Group is now tackling the baseline grid issue so you might want to pay attention to both the rhythmic sizing and line grid modules.
If text frames with smart reflow (a.k.a. CSS Regions) and exclusions look like a natural next step, designers must make some noise to make it clear to browser vendors that they want such layout modules. We indeed already tried and failed, but it doesn’t mean we can’t resurrect those specs in the CSS Grid context, in which they make a lot of sense.
CSS Grid brings a lot of flexibility. Here’s an example of what you can do when combining it with writing modes and transforms.
CSS is not static anymore
Since the dawn of Cascading Style Sheets, authors have had to set their styles’ value once and for all. Every time they wanted to change the appearance of an element, styles had to be duplicated and changed.
Enter custom properties, a.k.a. CSS variables. Custom properties allow an author to assign arbitrary values to a property with an author-chosen name. Those values can then be overridden in CSS, or changed dynamically using JavaScript. Although this doesn’t sound like much, it makes CSS variables a game changer.
Theming is one of the major use cases for custom properties, and it's actually becoming so easy that we decided to use them for Readium CSS, a styling library for EPUB Reading Systems.
While we're on the subject of JavaScript, functions are no longer reserved to this language — CSS has some to offer, too!
Mike Riethmuller has done a lot of research and experiments on responsive and fluid typography. Thanks to the CSS calc() function, you can now use a modular scale to size elements automagically, adapt the font size and line height to the screen size, enforce vertical rhythm, etc.
Thanks to CSS custom properties and the calc() function, you can use a modular scale to compute your elements’ font size automatically.
Sure, the calc() function might not be the easiest CSS value to work with at first, but once you understand the math powering it, the possibilities are endless.
Typesetting that can adapt to its environment in order to improve readability. How cool is that?
Typography is becoming a first-class citizen of the web
Typography is the medium for the visual representation of language. It is the craft that brings harmony into documents, the aspect that can make or break the reading experience, and the heart of written communication. Now, the web is finally getting better at making that heart beat.
The first browsers supported online and embedded fonts. Then they started supporting OpenType features. Finally, they introduced variable fonts.
Variable fonts can be interpolated on several axes. For instance, you can change their width and weight on demand with no need to load extra font files.
All in all, we’ll get a lot of flexibility: We’ll be able to use discretionary ligatures and alternate style sets, condense typefaces on narrow screens, adjust the weight whenever needed, and so on and so forth. Like CSS itself, (at least some) typefaces won’t be static anymore. Just take a look at the Spectral typeface and imagine the possibilities.
But it’s not just about fonts — it’s about text in general. Writing modes (vertical writing), text decoration, hyphenation, and justification will benefit from the latest specifications as well.
And needless to say, Dave Cramer, with whom I’ll have the honour to make my presentation, has been super active on this front.
The future is now and you have a say
All those specifications are at least partly implemented in some web browsers. You don’t even have to wait!
What’s very important (and I can’t emphasize this enough) is that you take a look at them, experiment a little bit, and then offer your feedback to the CSS Working Group or W3C Publishing Group. Your expertise in those fields is invaluable. It can help spec editors get it right so that the entire web platform can benefit.
So start your browsers, try those new properties and values in your stylesheets, and be prepared to have your mind blown. CSS has come a long way; there’s never been a better time to learn and use it.
If you'd like to hear more from Jiminy Panoz, register for ebookcraft, March 21-22, 2018 in Toronto. You can find more details about the conference here, or sign up for our mailing list to get all of the conference updates.
