Use darker font color on e-ink devices (Kindle Paperwhite)

[cexbrayat]

We just released our ebook, and some readers have been complaining about our font (on Kindle and Kobo) that is too light.

It is indeed a light gray, and we were wondering if there is an easy way to customize the font color for something a bit darker. Going over the docs, I did not find what would be the best way and my attempt has not yield any result.

Do we need to have a custom epub3.css file? Can I just overwrite the font color, or do I need to take the whole existing epub3.css content?

[mojavelinux]

I've also heard several complaints that the text color is too light, so I'm definitely willing to change the default. It's currently set to #333332. Perhaps we should switch to the value used in the default Asciidoctor stylesheet, which is #262626. I'd even consider going to #222222. The key will be nailing down the right color.

The way to override the styles at the moment is to provide a custom epub3.css file, which I realize is a bit heavy.

[mojavelinux]

Screenshots would really help here.

[mojavelinux]

The real problem seems to be non-color devices (which don't show gray the same). We could set the color to an even dark black on those devices by using a CSS3 media query. See https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features

[mojavelinux]

Black is just horrible when displayed on a LCD with a fluorescent backlight (any color device).

[clacote]

@mojavelinux You were asking for picture. One of the reader complaining of the too light grey on his Kindle provided a picture:

[mojavelinux]

Yep, I saw that after I posted. Hopefully the reader will be willing to post an "after" picture as well so we can see the difference.

[cexbrayat]

For the record, the workaround is:

• adding the epub3.css and epub3-css3-only.css files to the project (for example in a directory styles)
• including them in the document with :epub3-stylesdir: styles
• override the font color to be pure black #000000

With this it should display fine on Paperwhite for example.

[mojavelinux]

The Paperwhite already solves the problem at the hardware level of pure black being hard/harsh to read. We don't need to help it (because then the text becomes too dim). The reason we use the dark gray is to fix over-saturation on color devices (like the Kindle Fire). We should use a media query to detect this scenario and apply the appropriate styles.

[mojavelinux]

We'll need to run a test like the one described in this article to see what matches for the Paperwhite so we know what media query to use.

http://epubsecrets.com/media-queries-in-epubs.php

[mojavelinux]

(when I say Paperwhite, I'm referring to all devices like it, including the Kobo).

[clacote]

The same user who was complaining of low contrast is now happy with the pure black workaround. He sent a new capture:

[mojavelinux]

Very nice! Thanks for the follow-up @clacote. I have a solid understanding of the issue at hand now.

[mojavelinux]

I keep wanting to fix this issue by using a monochrome media query. Sadly, the device that media query doesn't work on is the Kindle Paperwhite :(

It looks like to fix this in core (and still use dark gray for color devices) we have to use media queries based on screen sizes. (Honestly, what is this world coming to?)

For details, see https://medium.com/@sandersk/responsive-ebook-design-a-primer-8bba01328219#7be5.

Something like:

/* Use dark fonts on Kindle Paperwhite */
@media amzn-kf8 and (device-height: 1024px) and (device-width: 758px) {
  body p,
  body a:link,
  ul, ol, li, dl, dt, dd, footer,
  div.verse .attribution, table.table th, table.table td,
  figcaption, caption,
  h1, h2, h3, h4, h5 {
    color: #000000;
  }

  body a:link {
    -webkit-text-fill-color: #000000;
  }

  .chapter-header {
    background-color: #191918;
  }
}

I don't have a Kindle Paperwhite, so I'd need someone to verify this proposal works both in portrait and landscape mode.

[PrimaryFeather]

I just tested this on two Kindle Paperwhites from 2012 and 2014, and it works just fine in portrait mode. To get it to work in landscape, as well, I had to change the query like this:

@media amzn-kf8 and (device-height: 1024px) and (device-width:  758px),
       amzn-kf8 and (device-height:  758px) and (device-width: 1024px) {
    /* ... */
}

Furthermore, I also included div.abstract > p in the list of elements that need to use pure black. With these changes, the output looked really great on the display.

(Before, the gray looked kind of washed out, like a bleached photocopy. Not pleasant to read!)

So, in my opinion, a must-have for the current style sheet! :wink: 👍

EDIT: Here is another useful website where media queries for the Kindle are being discussed, for reference. http://epubsecrets.com/media-queries-for-kindle-devices.php

[PrimaryFeather]

If you want, I can send you a pull request — but it's really just a matter of copying the code from above into the style sheet. Just let me know how you'd like to do it! 😄

[mojavelinux]

I'll go ahead and apply these changes for alpha.8 so you can test.

Here's what I'm going to add:

/* Use darker font colors on Kindle Paperwhite */
@media amzn-kf8 and (device-height: 1024px) and (device-width: 758px),
    amzn-kf8 and (device-height:  758px) and (device-width: 1024px) {
  body p,
  div.abstract > p,
  ul, ol, li, dl, dt, dd, footer,
  div.verse .attribution, table.table th, table.table td,
  figcaption, caption,
  h1, h2, h3, h4, h5 {
    color: #000000;
  }

  body a:link,
  div.abstract > p a:link {
    color: #000000;
    -webkit-text-fill-color: #000000;
  }

  body a:visited {
    color: #333332;
    -webkit-text-fill-color: #333332;
  }

  .chapter-header {
    color: #191918;
    border-bottom-color: #191918;
  }

  h1.chapter-title .subtitle {
    color: #000000;
  }

  .chapter-header p.byline {
    color: #191918;
  }
}

[mojavelinux]

Even if we miss something on this update, it will be easy to add additional overrides in the future.

[mojavelinux]

Here's the related PR: #160

[cexbrayat]

@mojavelinux Great! I'm ready to give it a try as soon the release is out.

[mojavelinux]

The release is now available!

[cexbrayat]

@mojavelinux I tested it, and it fixes the issue on Kindle \o/ But I still have the problem on a Kobo...

[mojavelinux]

We just need a way to identify Kobo monochrome using a media query and we can apply the same rules.

On Feb 22, 2018 06:48, "Cédric Exbrayat" notifications@github.com wrote:

@mojavelinux https://github.com/mojavelinux I tested it, and it fixes the issue on Kindle \o/ But I still have the problem on a Kobo...

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/asciidoctor/asciidoctor-epub3/issues/67#issuecomment-367685943, or mute the thread https://github.com/notifications/unsubscribe-auth/AAE191smJVRTtOZQS-cUd5Ncfr2B9Dfeks5tXXA-gaJpZM4HL2-s .

[PrimaryFeather]

Just tried it out on a Kindle, and it works great! Thanks a lot for all your efforts, Dan!

[cexbrayat]

@mojavelinux Do you have any idea about what we could use to identify Kobo monochrome?

[mojavelinux]

No idea. I don't have one, so I have no way to check. Perhaps we can crowd source it to see if we can find someone willing to experiment/test.

[cexbrayat]

I've got one, but I don't know what to test :) I was hoping you would know about a @media amzn-kf8 equivalent

[mojavelinux]

Welcome to epub development. There are no specs for any of this, so it's usually Google + trial and error.

[mojavelinux]

Sometimes the epub test suite is helpful. http://www.epubtest.org/testsuite/epub3/

[mojavelinux]

Kobo provides a pretty useful guide, but no mention of media queries.

https://github.com/kobolabs/epub-spec

[mojavelinux]

You could file an issue there and see if they respond.

[Casacove]

Any ideas on this? The lettering is very pixelated too. The battery doesn't keep charged. Should I try changing the battery. The Kindle is almost 10 yrs old.

[mojavelinux]

@Casacove Is there a specific question you have regarding Asciidoctor EPUB3? This is not a support forum for Kindle devices. All we can control is what content is included and to a certain degree the layout and styling of text.

[pmartycz]

Unfortunately, newer Paperwhite models (possibly others) are still affected by this due to their higher resolution screen not being covered by the media query.

[mojavelinux]

Since ebook readers refuse to honor the CSS properly, we can't have nice things. At this point, I would support just going to full black. Simpler is better. Please file a new issue and I'm sure @slonopotamus will consider it.