CSS Selectors for eBooks

Do you know Jonathan Kulp? If you don't, you're missing out. He is a cool dude.

Jon did a HPR episode about hacking Gutenberg eBooks which was highly informative. If you use eBooks, you might want to go give it a listen and learn how much you could be improving your reading experience.

There were a pair of tricks that Jon used that I thought could be simplified with the application of some advanced CSS selectors. I'll post them here, because I have decent syntax highlighting set up.

Removing the indent on the first paragraph

Jon mentioned that the 1st paragraph of text following a header is not supposed to be indented, and fixed this by applying a "no-indent" CSS class to each first paragraph. That works fine, but there is a CSS selector called an "adjacent sibling combinator" that can find these paragraphs without altering the HTML of the eBook. The following CSS is only going to be applied to a paragraph immediately following a corresponding heading tag:

h2 + p {
    text-indent: 0;
}

Fancy initial at the beginning of a chapter

An initial is a big fancy letter at the beginning of a chapter. Jon wrapped the initial in a span element, but there is a CSS pseudo-selector that can do that: the :first-letter pseudo-selector.

If we take the last trick, and use it in conjunction with the new pseudo-selector, you get a CSS selector that only applies to the first letter of the first paragraph:

h2 + p::first-letter {
    font-size: 2em;
    font-weight: bold;
}

I haven't tested this out in an e-reader, but hopefully they support these kinds of advanced CSS features. After all, they are perfect for this type of application!

Tags: css

Add Your Comment