Don’t judge a book by its cover

When I webbed my Goodreads library last month, I used URLs like /books/${ISBN} for each book’s page. I didn’t do anything special for the index page in that directory, though. It was just a flat list of titles in reverse-chronological order. Not ideal, especially with hundreds of books.

So I spent some time over the last couple of weekends making a long list of books look like, well, books.

Here’s what they look like:

The markup is about as simple as it could be:

<div class=book>
<h3><a href=/books/0060935464>To Kill a Mockingbird</a></h3>
<p>Harper Lee
</div>

The book above probably appears brown in your browser. However, in browsers that support CSS’s random() and contrast-color() functions, each book gets a random color, with legible cover text. In such a browser? Go ahead, reload this page a few times and watch the colors change.

Here’s how it works:

@supports (width: random(1px, 1px, 1px)) and (color: contrast-color(white)) {
    .book {
        --r: random(--r, 0, 1);
        --g: random(--g, 0, 1);
        --b: random(--b, 0, 1);
        background-color: color(srgb var(--r) var(--g) var(--b));
        color: contrast-color(color(srgb var(--r) var(--g) var(--b)));
    }
}

I’ve passed dashed idents to random() as its first argument, so that the color passed to contrast-color() is the same as the color used as the background color. See Values and Units Level 5 § 9.4. Caching Random Values for an explanation.

Many of the books in my library are tagged with their genre and other such metadata. I’ve applied all of those tags as classes on the books, so that I can customize the layout of books appropriately:

All books also get tagged with their own titles and authors, so you can even do custom styling for specific books if they have a particularly distinctive or memorable cover. I wouldn’t claim to have accurately recreated any specific cover, but I did come up with some ways to evoke the real cover with fairly straightforward CSS. Some examples:

I recommend all of the above books, by the way.