Viewer not respecting book CSS

[Simons Mith]

To make my book a little less white I have set it up with a body style as follows:

body {
background-color: #EEEEEE;
color: #222222;
min-width: 200mm; }

The Calibre viewer does not respect these colour settings, even though the Calibre editor does, and so does Sigil.

Override all book colors: is set to Never. There's no custom CSS set up inside Calibre. This is on a fresh new install of Calibre (and Sigil) on a different computer (clean Win10 laptop), so I suspect this may be a legit bug?

[BTW I would be delighted to cooperate with a user who wanted, say, a sepia background color but there's more than one place I'd need to adjust the book CSS to cope. Can that be done?]

[kovidgoyal]

You cannot control body colors in the calibre viewer. That is entirely in user control. If you really, really, want to force your color choices on your readers, enclose your body content in a div and set the background on that.

[Simons Mith]

I don't want to enforce my colour choices on the reader, but I do have a couple of element colours in my document which need to match the body background colour. The easy way to do that was to set the CSS for the body style, then I could simply set those elements to match. That took the least braining.

But now, what would be the most graceful way to set the border-bottom of a span, previously implemented as
span.right {
border-bottom: 1mm solid #EEEEEE;
float: right; }
to match the user-chosen body-background colour?

[If this query is no longer on-topic for the Calibre Viewer sub-forum I'd be grateful if it was moved. Thanks. ]

[Sirtel]

Many people will be reading your book on black-and-white eink readers. What's the point of specifying a color in the css in that case? They're just going to see grey instead of red, sepia or whatever. The same goes for font color.

Unless it's a picture book or something else that absolutely requires color, I would leave the colors alone. Don't put them in the css at all.

I'm speaking from personal experience. Have had to delete colors from the css more than once, because they're of no use on my ereaders.

[theducks]

IF you do use color anyplace, be absolutely sure they render distinctively (contrast to regular) on Grey Scale readers. Older readers were 4 and 8 level, I think some newer ones are 16. So don't shoot for 16, because that leaves out a whole bunch of devices that are still being used.

[Simons Mith]

Well, I have, for example, text in inset boxes, and overlapping the edge of the inset box, a drop cap with a decorative border div around it. See attachment. The decorative box must have the same background colour as the body text so that a) the lines behind it do not show through and b) ideally, the drop cap box is the same colour as the document 'paper'. The border-bottom on the span (which is used in a form) has the same purpose

That is the point of specifying the colour. I'd like to act in a way that respects user preferences as far as possible, but I'm also emulating the layout of an A4-ish print book that uses this style of inset box and drop caps widely.

The book also has megabytes of colour images and is primarily expected to be viewed on tablets, and desktop PCs and Macs running Calibre, Atril document viewer, things like that, so a splash of colour is a legitimate thing to put in.

But I'm not even trying to get /colour/ here, I'm just trying to match the user's choice of document paper! If I can do it gracefully, that is.

[JSWolf]

But there is no way you can guarantee it won't be read on an eInk Reader with just gray-scale. So ditch the color.

[kovidgoyal]

If you are generating a book for desktop viewers, simply use a bit of JS to change the border color of your spans on load. I dont know of any pure CSS way to match border color to background color of a parent element.

[kovidgoyal]

ANd specifically for the calibre viewer, I have made the bg and fg colors available via CSS variables so no need to use JS. https://github.com/kovidgoyal/calibr...b715a0c561b635

[Simons Mith]

I made the necessary CSS amends, downloaded the latest Calibre, tried the new bg and fg colours, and everything worked first time. Thank you very much!