CSS: Detection & Style (Day vs Sepia vs Night)

Bryce Otis

13/11/14 12:25

This post is somewhat duplicated on Apple's Forums

The behavior may be different, but the questions are the same

Results are based on iBooks 4.1, iOS 8.1, iPhone 5

Sorry, don't have an Android device to test with...

I'm having difficulty locating instructions on how to modify CSS for the three viewing modes.

The only example I could find used @media, but either I don't have the correct element names,

or I have some other syntax error, or I should be using some other mechanism to change styles?

Is it even possible for an ePub to detect these modes since it may be at the application level?

Is it possible to do this within one CSS file or would it require:

Day.css
Sepia.css
Night.css

If so, what mechanism would be used to switch between them?

I notice that iBooks has the same feature except Day is called White,

would the calls/tags be the same, or would I need to also make a White.css?

Using the CSS file below:

Everything behaves as expected in White mode (except @media of course)
All the colors work in Sepia mode, except the body "background-color" is changed
It would be nice to change the body font "color" to #704214 to match the theme...
Night mode seems to set ALL "color" to #ffffff and "background-color" to #000000
I lose color on headings, equations, tables, and horizontal rules (Color = Information)
I had to use "border-color: #666666;" to make <hr> and <table> visible...
iBooks still renders color from an SVG file: (fill=#666666) (fill=#cc0000) (fill=#0000cc)

Would it be possible to use something akin to a light mask to auto adjust color levels?

i.e. #003300 on a White background would switch to #ffccff on a Black background?

equation: (#000000 + 003300) ≈ (#ffffff − 003300) is the same Relative % Green

I realize this 'Black & White' night mode may be a feature and not a bug, but this reminds me of IE vs FF all over again...

<!DOCTYPE html>

<html>
<head>
<style>
@media white { /* Day */
* { color: #000000; }
body { background-color: #ffffff; }
}
@media black { /* Night */
* { color: #ffffff; }
body { background-color: #000000; }
}
@media sepia { /* Sepia */
* { color: #704214; }
body { background-color: #eae4d3; }
}
body {
    font-family: sans-serif;
    font-size: 0.75em;
    font-weight: normal;
}
code { /* Equations */
    color: #990000;
    font-family: monospace;
    font-weight: bold;
    line-height: normal;
}
h1 { /* Title */
    color: #0000ff;
    font-family: serif;
    font-size: 2.0em;
    font-weight: bold;
    margin-top: 0.25em;
    margin-bottom: 0.25em;
    text-align: center;
    text-shadow: 1px 1px #999999;
}
h2, h3, h4, h5, th { /* Headings */
    font-family: sans-serif;
    font-weight: bold;
}
h2 {
    color: #0000cc;
    font-size: 1.25em;
    margin-top: 0.75em;
    margin-bottom: 0.75em;
    text-align: center;
}
h3 {
    color: #000099;
    font-size: 1.125em;
    margin-top: 0.8em;
    margin-bottom: 0.4em;
}
h4 {
    color: #000066;
    font-size: 1.0em;
    margin-top: 0.6em;
    margin-bottom: 0.3em;
}
h5 {
    color: #000033;
    font-size: 0.875em;
    margin-top: 0.4em;
    margin-bottom: 0.2em;
}
hr { /* Gecko - WebKit\Blink - Trident */
    clear: both;
    color: #cc0000;
    background-color: #cc0000;
    border-color: #666666; /* Night */
    border-style: solid;
    border-width: 1px;
    display: block;
    height: 1px;
    margin-top: 1px;
    margin-bottom: 1px;
    text-align: center;
    width: 75%;
}
i {
    color: #666666;
}
li {
    margin-top: 0.1em;
    margin-bottom: 0.1em;
}
ol, ul {
    margin-top: 0.2em;
    margin-bottom: 0.2em;
}
p {
    text-indent: 2.5em;
    text-align: justify;
}
table {
    border-collapse: collapse;
    text-align: center;
}
table, th, td {
    border-color: #666666; /* Night */
    border-style: solid;
    border-width: 1px;
    padding: 0.5em;
}
th {
    color: #ffffff;
    background-color: #999999;
}
</style>
</head>
</html>

Re: CSS: Detection & Style (Day vs Sepia vs Night)

Bryce Otis

13/11/14 15:01

Ugh, logic kicks in:

Would it be possible to use something akin to an inverse light mask to auto adjust color levels?
i.e. #003300 on a White background would switch to #ccffcc on a Black background
formula: (#000000 + 003300) ≈ (#ffffff − 330033) ≈ the same Relative % Green

Re: CSS: Detection & Style (Day vs Sepia vs Night)

Garth Conboy

14/11/14 07:39

Hello Bryce,

That is, indeed, an interesting idea.

Do note that there is a nod to styling for various presentation modes in the EPUB 3 standard:

http://www.idpf.org/epub/301/spec/epub-contentdocs.html#sec-xhtml-alternate-style-tags

It likely this direction will gain popularity when more widely supported. Google Play Books currently supports horizontal/vertical, not yet day/night. But, hopefully that won't always be the case.

Best,
Garth

Re: CSS: Detection & Style (Day vs Sepia vs Night)

Bryce Otis

26/11/14 12:53

The goal is to write one ePUB that behaves the same regardless of UA

This is how I currently understand Stylesheet mechanics:

The W3C method: (ePaper devices & non-Color printers may have their own Grayscale conversion, but this allows Filters to be matched to Themes)

<head><!--Media Queries can occur outside Stylesheets (Device Validation)-->
<title>W3C Matrix</title><!--PERSISTANT: Output Layer (Formating & Layout) PREFERED: Theme Layers (Color Selection)-->
<link class="speech" href="url/Speaker.css" rel="pronunciation" type="text/css" /><!--Alternate Stylesheet for Media-Type: Speech-->
<link class="print" href="url/Printer.css" media="print and (color), print and (monochrome)" rel="alternate stylesheet" type="text/css" />
<link class="horizontal" href="url/Horizontal.css" media="all and (orientation: landscape)" rel="alternate stylesheet" type="text/css" />
<link class="vertical" href="url/Vertical.css" media="all and (orientation: portrait)" rel="alternate stylesheet" type="text/css" />
<link class="screen" href="url/PERSISTANT.css" media="screen and (color), screen and (monochrome)" rel="stylesheet" type="text/css" />
<link class="sepia" href="url/Color-Sepia.css" media="screen and (color)" rel="stylesheet" title="Color: Sepia" type="text/css" />
<link class="day" href="url/PREFERED.css" media="all and (color)" rel="stylesheet" title="Color: Day" type="text/css" />
<link class="night" href="url/Color-Night.css" media="all and (color)" rel="stylesheet" title="Color: Night" type="text/css" />
<link class="day" href="url/Gray-Day.css" media="all and (monochrome)" rel="stylesheet" title="Gray: Day" type="text/css" />
<link class="night" href="url/Gray-Night.css" media="all and (monochrome)" rel="stylesheet" title="Gray: Night" type="text/css" />
</head><!--PERSISTANT: [Browser] ALTERNATE: [Speaker] or [Orientation (Print/Screen)] PREFERED: [Color (Sepia)] or [Color/Gray (Day/Night)]-->

Observation: Trident shows all five PREFERED choices, while Gecko seems to validate screen="color" so it only shows three.

The WebKit method:

<head><!--Media Queries only occur inside Stylesheets (WebKit Validation)-->
<title>WebKit Matrix</title><!--Default: Android & iOS Devices-->
<link href="url/PERSISTANT.css" rel="stylesheet" type="text/css" /><!--@media imports Speech/Print/Orientation-->
<link href="url/PREFERED.css" rel="stylesheet" title="Themes" type="text/css" /><!--? @webkit and/or @import ?-->
</head><!--No ALTERNATE Stylesheets-->

The vast majority of mobile eReading devices are: Android (B&N Nook, Kindle Fire, etc.), or iOS (iPad, iPhone, iPod Touch)

The part I am fuzzy on is, how to match Themes with WebKit's Validation model, if I'm even using the correct terminology...

An analogy would be how Filters load from CSS:

img.desaturate { /* Grayscale Filter */ 
  -webkit-filter: grayscale(100%); /* WebKit */
  -moz-filter: grayscale(100%); /* Gecko */
  filter: grayscale(100%); /* W3C */
  filter: gray; /* v6-9 Trident (v10-11 ≡ JavaScript) */
}

Where: (iBooks) Validator [adaptivegarage's example]

:root[__ibooks_internal_theme*="|White|Sepia|Night|"] /* elements */ {
   /* ... override your CSS here ... */
}

What would be the validator for Google (Play Books)?
What would be the validator for generic (WebKit)?
We know the validator for Gecko & Trident = (W3C)

Google Product Forums > Google Books API >

Catégories : General discussion :

CSS: Detection & Style (Day vs Sepia vs Night)