Why I prefer the Kindle over physical books

Smaller, lighter, brighter—and with a built-in dictionary. In my opinion, a Kindle is better than a “real” book.


I created this article for two reasons: I wanted to highlight some Kindle benefits that are often overlooked (probably because they are specific to me), and I wanted to attempt some CSS that was a bit more adventurous than my usual tweaks to type and paragraph styles.

My aim was to try and reproduce the Kindle Oasis reading experience as best I could (given my limited knowledge of CSS). The article is contained within the Kindle below. Use the Kindle’s navigation buttons (on the right of the device) to page through the article. At the bottom of this page I’ve described what I learnt while creating my "mock-Kindle".

Why I prefer the Kindle

To navigate the pages of this "book", please use the Kindle’s Next/Previous buttons, which can be found to the right of the device.

What I learnt

It’s time to go back to formula

My CSS “skills” are far worse than I thought. I’m comfortable enough with the typical CSS required for defining the style of an article body (which is one of the main reasons why I started this blog), but when it comes to using CSS for layout, I really don’t know what I’m doing. Creating the Kindle above with CSS was more the result of trial and error, than it was me actually knowing what I was doing. So I’ll be looking out for some CSS layout tutorials in the near future.

Tabular numerals are not just for tables

Tabular (as opposed to proportional) numerals are numerals where each figure takes up the same width. i.e. 1111 takes up the same with as 0000. This is important in tables, where users are comparing values that are stacked vertically. Basically, you want the hundreds, tens, units etc. to all be aligned vertically (for more details see this article).

While creating the Kindle above, it occurred to me that tabular numerals should be used within body text when the numerical value can change dynamically. If tabular numerals are not used, then as the number changes value (and therefore also width), the proceeding content can shift horizontally, potentially leading to a word slipping onto the next line (OMG THE HORROR!!!). My case was a little less dramatic, and was related to the page number and percentage read indicators in the footer. Without tabular numerals, moving from page 1 to page 2 resulted in a small shift of the percentage read indicator. Not a big deal, but it taught me that tabular numerals are not just for tables. You can see this in action below:

An animated gif showing the text ‘page 1’ change to the text ‘page 2’, and the text shifting due to the numbers being of different widths. An animated gif showing the text ‘page 1’ change to the text ‘page 2’, and the text not shifting due to the numbers being of equal widths.
The top example uses non-tabular numerals (i.e. proportional), the bottom example uses tabular numerals. You can see the top example shift to the right as the value changes.

This article made me think about how paragraphs are visually distinguished from one another. I’m a fan of some extra padding between paragraphs, but, while trying to make the Kindle text look as authentic as possible, I realised that most of the Kindle books I’ve read have no extra vertical space between paragraphs, but rather, they indent the first line of each paragraph (which makes sense I guess, as it doesn’t waste any vertical space, which is important on devices such as eReaders.) This is how paragraphs are separated in the “book” above.

This wasn’t new to me obviously, but what I hadn’t noticed was that when indentation is used, it’s usually omitted for the first paragraph in a section/chapter (this also makes sense, there’s no paragraph directly above from which to be separated, and if the chapter heading is left-aligned, then both heading and the start of the paragraph are nicely aligned along the left margin, and we humans like stuff that is nicely aligned.)

At first I thought I would have to create a new paragraph class in CSS specifically for the first paragraph of each section (that removed the default paragraph indent), and then add the class manually, but it turns out that CSS has an easy solution for this.

 p + p { text-indent: 1.5em; }

The "+" above means that the style (the text-indent in this example) is only applied to paragraphs directly proceeding other paragraphs.

Conversely, if you wanted to apply a specific style to the first paragraph only, i.e. the paragraph directly proceeding a heading e.g. Heading 1, then the CSS selector would be:

h1 + p { ... }

Using the :target selector to show hidden content

I haven’t started to learn JavaScript (JS) yet, and as the purpose of this blog is for me to learn some basic web dev, it shouldn’t (yet) include any JS. Unfortunately, the page navigation used above for the Kindle requires JS… sort of.

I did manage to create a version of the Kindle with working navigation that didn’t require any JS, instead it took advantage of the :target pseudo selector in CSS, usually this is used to move the user to a specific section of a page after clicking on a link or button (e.g. creating a clickable Table of Contents). But, it can be used to selectively show page elements that are otherwise hidden.

My non-JS version does work, but, it suffers from an unwanted “side-effect” (well, unwanted for my specific use case) i.e. it moves the page to the specific section (which is what it’s meant to do!). You can see this in action when you select one of the nav buttons in the CodePen below (you also have to click on the start link first). So in the end I decided to create this page using JS, even though I had to ask a friend to provide the required JS.

My non-JS implementation can be seen in the following CodePen. But you’ll find a better description of how to use the :target selector to show hidden contents here.