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.

Introduction

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.

Background

I didn’t used to read. Don’t get me wrong, I had books, almost enough to fill a shelf (it was a mix of physics text books and a small but treasured collection of Calvin & Hobbes) but I wasn’t "a reader". I didn’t go to bed with a book, and picking up a book during the day was not part of my routine.

This all changed about 7 years ago when I made a deal with a colleague, if she watched the TV show Firefly, then I’d read a book that she had recommended. I read that book on a Kindle, and I have barely put the Kindle down since. I’m not saying that I only kept up the habit of reading because of the Kindle, but I’m not sure I would have carried on if I had to order books, wait for them to arrive, and then struggle to read them in the dark while the wife tried to go to sleep next to me.

The first device I bought was the Paperwhite, then I passed that onto the wife and I got a newer version of the Paperwhite, and a while later I bought an even newer generation Paperwhite, more recently I treated myself and upgraded to a Kindle Oasis.

benefits

1 - The dictionary

Unlike Donald Trump, I don’t know all the words, so being able to press my fingertip on a word and see the definition is great. Even more useful than the dictionary is the etymology, I find that learning how a word came to be helps me to remember its definition.

2 - The backlight

I mostly read in bed, and unlike my wife, I don’t fall asleep as soon as my head hits the pillow, so the backlight on the Kindle is essential for me. On the Oasis you have the added benefit of adjusting the colour temperature, and switching to dark mode.

3 - The clock!

Ok, this one might seem a bit silly, but as I read when I go to bed, it’s useful for me to keep an eye on the time, otherwise I might find myself reading well into the small hours. Like many people these days I don’t have a clock in the bedroom as I rely on my phone. Having the clock on the Kindle stops me periodically reaching for my phone.

4 - Saving quotes

Not so important when reading fiction (which represents about 80% of what I read), but when I do venture into the world of non-fiction, I often like to save quotes or other useful sections of text so I can easily find them again later. This is a feature of the Kindle that often gets overlooked.

5 - Kindle Unlimited

Kindle Unlimited in the UK costs £7.99 pm and includes more than 650,000 books that can be borrowed (up to 20 at a time). Of the 4 books I read per month, probably 2-3 of those I’ve borrowed via Kindle Unlimited, so for me it easily makes financial sense.

6 - Whisper sync

This is Amazon’s name for the feature that lets you sync your reading progress across Kindle devices and Kindle apps. When I find myself in the car waiting for one of my kids to finish [insert name of activity that seems really important to them now but they will quit once they become a teenager here], then I’ll often fire up the Kindle app on my phone, and start reading where I’d finished off the night before.

7 - Font size

Being a man of a “certain age”, I’d recently noticed that my arms were no longer long enough to allow my eyes to focus on objects held in my hands. For a little while, increasing the font size on the Kindle allowed me to put off the inevitable purchase of reading glasses.

8 - Time left in chapter

You have some options when it comes to what’s displayed in the page footer on the Kindle, you can choose from the following: nothing, page number, time left in chapter, time left in book, and loc (like page number, but is independent of your style choices e.g. font-size etc.). As I don’t like to stop reading mid-chapter, the length of a chapter is a metric I use when determining whether or not I’ll start a chapter.

9 - Ergonomics

You can only read one page at a time, but with physical books you are forced to always have 2 pages on display, so you’re always holding something that is twice the size it actually needs to be.

There’s also no distortion due to the page curving in towards the spine of the book (there’s also no spine to break!).

10 - Dark mode

When it comes to dark mode on my PC and mobile apps I tend to leave it off. But, when it comes to the Kindle, I do prefer to turn dark mode on. As I read at night I always use the Kindle’s backlight, and in dark mode, there’s just less light being emitted. At the end of the day, it’s the letters I want illuminated, not the background.

the end

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. — 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.

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.