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

cexbrayat · 2016-01-25T18:36:10Z

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?

The text was updated successfully, but these errors were encountered:

mojavelinux · 2016-01-25T19:35:58Z

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 · 2016-01-25T19:36:22Z

Screenshots would really help here.

mojavelinux · 2016-01-25T19:39:26Z

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 · 2016-01-25T19:40:45Z

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

clacote · 2016-01-25T21:15:04Z

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

mojavelinux · 2016-01-25T22:08:30Z

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 · 2016-01-26T17:32:22Z

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 · 2016-01-26T21:24:56Z

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 · 2016-01-26T21:28:25Z

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 · 2016-01-26T21:28:51Z

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

clacote · 2016-01-27T07:42:14Z

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

mojavelinux · 2016-01-27T07:48:34Z

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

mojavelinux · 2017-04-12T08:49:58Z

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 · 2017-05-01T16:17:33Z

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! 😉 👍

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 · 2017-05-01T16:18:49Z

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 · 2018-02-15T12:08:48Z

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;
  }
}

- detect Kindle Paperwhite using kf8 + resolution media query - force darker colors on Kindle Paperwhite

mojavelinux · 2018-02-15T12:23:22Z

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

mojavelinux · 2018-02-15T12:23:39Z

Here's the related PR: #160

cexbrayat · 2018-02-18T17:13:46Z

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

mojavelinux · 2018-02-22T06:57:02Z

The release is now available!

cexbrayat · 2018-02-22T13:48:46Z

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

mojavelinux · 2018-02-22T16:32:09Z

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" ***@***.***> 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 <#67 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAE191smJVRTtOZQS-cUd5Ncfr2B9Dfeks5tXXA-gaJpZM4HL2-s> .

PrimaryFeather · 2018-02-22T17:20:49Z

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

cexbrayat · 2018-03-20T22:14:18Z

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

mojavelinux · 2018-03-20T22:15:13Z

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 · 2018-03-20T22:19:59Z

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 · 2018-03-20T22:21:41Z

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

mojavelinux · 2018-03-20T22:22:21Z

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

mojavelinux · 2018-03-20T22:25:42Z

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

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

mojavelinux · 2018-03-20T22:26:57Z

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

Casacove · 2018-03-31T00:29:48Z

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 · 2018-03-31T01:56:59Z

@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 · 2020-02-08T22:07:53Z

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 · 2020-02-08T22:43:17Z

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.

According to Wikipedia, Kindle Oasis has a definition of 1680 × 1264 pixels, 300 ppi. And according to asciidoctor#67, we can only detect the model of kindle by its definition. We just apply the same recipe as for PaperWhite here.

According to Wikipedia, Kindle Oasis has a definition of 1680 × 1264 pixels, 300 ppi. And according to #67, we can only detect the model of kindle by its definition. We just apply the same recipe as for PaperWhite here.

mojavelinux added the improvement label Jan 25, 2016

mojavelinux added this to the v1.5.0 milestone Jan 25, 2016

mojavelinux self-assigned this Feb 13, 2016

mojavelinux modified the milestones: v1.5.0.alpha.8, v1.5.0 Apr 12, 2017

mojavelinux changed the title ~~How to customize the font (color)~~ Use darker font color on e-ink devices (Kindle Paperwhite) Apr 12, 2017

mojavelinux added a commit to mojavelinux/asciidoctor-epub3 that referenced this issue Feb 15, 2018

resolves asciidoctor#67 use darker colors on Kindle Paperwhite

2f3f0dc

- detect Kindle Paperwhite using kf8 + resolution media query - force darker colors on Kindle Paperwhite

mojavelinux closed this as completed in 718a671 Feb 16, 2018

slonopotamus added enhancement and removed improvement labels Jan 20, 2020

heckj mentioned this issue Apr 2, 2020

enable custom CSS for ePub heckj/swiftui-notes#199

Open

jnavila mentioned this issue Jun 13, 2020

Text is hard to read on Kindle Oasis progit/progit2#1438

Closed

jnavila mentioned this issue Jun 13, 2020

Add darker font color recipe to kindle oasis too. #337

Merged

slonopotamus mentioned this issue Jul 4, 2020

Default colors need improvement #338

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

cexbrayat commented Jan 25, 2016

mojavelinux commented Jan 25, 2016 •

edited by slonopotamus

Loading

mojavelinux commented Jan 25, 2016

mojavelinux commented Jan 25, 2016

mojavelinux commented Jan 25, 2016

clacote commented Jan 25, 2016

mojavelinux commented Jan 25, 2016 via email

cexbrayat commented Jan 26, 2016

mojavelinux commented Jan 26, 2016

mojavelinux commented Jan 26, 2016

mojavelinux commented Jan 26, 2016

clacote commented Jan 27, 2016

mojavelinux commented Jan 27, 2016

mojavelinux commented Apr 12, 2017

PrimaryFeather commented May 1, 2017 •

edited

Loading

PrimaryFeather commented May 1, 2017

mojavelinux commented Feb 15, 2018 •

edited

Loading

mojavelinux commented Feb 15, 2018

mojavelinux commented Feb 15, 2018

cexbrayat commented Feb 18, 2018

mojavelinux commented Feb 22, 2018

cexbrayat commented Feb 22, 2018

mojavelinux commented Feb 22, 2018 via email

PrimaryFeather commented Feb 22, 2018

cexbrayat commented Mar 20, 2018

mojavelinux commented Mar 20, 2018 •

edited

Loading

cexbrayat commented Mar 20, 2018

mojavelinux commented Mar 20, 2018

mojavelinux commented Mar 20, 2018

mojavelinux commented Mar 20, 2018

mojavelinux commented Mar 20, 2018

Casacove commented Mar 31, 2018

mojavelinux commented Mar 31, 2018

pmartycz commented Feb 8, 2020

mojavelinux commented Feb 8, 2020

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

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

Comments

cexbrayat commented Jan 25, 2016

mojavelinux commented Jan 25, 2016 • edited by slonopotamus Loading

mojavelinux commented Jan 25, 2016

mojavelinux commented Jan 25, 2016

mojavelinux commented Jan 25, 2016

clacote commented Jan 25, 2016

mojavelinux commented Jan 25, 2016 via email

cexbrayat commented Jan 26, 2016

mojavelinux commented Jan 26, 2016

mojavelinux commented Jan 26, 2016

mojavelinux commented Jan 26, 2016

clacote commented Jan 27, 2016

mojavelinux commented Jan 27, 2016

mojavelinux commented Apr 12, 2017

PrimaryFeather commented May 1, 2017 • edited Loading

PrimaryFeather commented May 1, 2017

mojavelinux commented Feb 15, 2018 • edited Loading

mojavelinux commented Feb 15, 2018

mojavelinux commented Feb 15, 2018

cexbrayat commented Feb 18, 2018

mojavelinux commented Feb 22, 2018

cexbrayat commented Feb 22, 2018

mojavelinux commented Feb 22, 2018 via email

PrimaryFeather commented Feb 22, 2018

cexbrayat commented Mar 20, 2018

mojavelinux commented Mar 20, 2018 • edited Loading

cexbrayat commented Mar 20, 2018

mojavelinux commented Mar 20, 2018

mojavelinux commented Mar 20, 2018

mojavelinux commented Mar 20, 2018

mojavelinux commented Mar 20, 2018

Casacove commented Mar 31, 2018

mojavelinux commented Mar 31, 2018

pmartycz commented Feb 8, 2020

mojavelinux commented Feb 8, 2020

mojavelinux commented Jan 25, 2016 •

edited by slonopotamus

Loading

PrimaryFeather commented May 1, 2017 •

edited

Loading

mojavelinux commented Feb 15, 2018 •

edited

Loading

mojavelinux commented Mar 20, 2018 •

edited

Loading