Night mode in iBooks + logo/titlepage

431 views
Skip to first unread message

Geoff Coffey

unread,
Jun 25, 2017, 11:09:02 PM6/25/17
to Standard Ebooks
The logo and title page are both dark solids on a transparent background which doesn't play very well with night mode in iBooks. Here's some CSS that fixes this:

:root[__ibooks_internal_theme*="Night"] #titlepage img, 
:root[__ibooks_internal_theme*="Night"] img[epub|type~="z3998:publisher-logo"] {
filter: invert(100%);
}

All this does is invert the images when you're in night mode, making the title page text white, an the logo very light grey. These then show up properly on the black night mode background.

Might make sense to put this in core. I can submit a PR to the tools for this if you'd like.

Geoff

Alex Cabal

unread,
Jun 26, 2017, 1:19:24 AM6/26/17
to Geoff Coffey, Standard Ebooks
Hmm, that is indeed an interesting workaround!

Let me sit down and test it to make sure everything works, I'm sure it will.  So the general concept of the epub source code we produce is that we create the source code with the "ideal ereader" in mind--one that does everything in the best way possible.  Then when building the various files that come out of this ideal epub, we add a bunch of compatibility stuff to deal with real life. In my mind this "ideal ereader" would know that when it activates night mode, it should invert the colors of path-based SVGs.   Since this hack specifically targets iBooks, I think it would go best in the compatibility layer of the compatible epub.

Let me think of how to apply this and we'll make it happen.  Good thinking!


---- On Sun, 25 Jun 2017 22:09:02 -0500 Geoff Coffey <gwco...@gmail.com> wrote ----

--
You received this message because you are subscribed to the Google Groups "Standard Ebooks" group.
To unsubscribe from this group and stop receiving emails from it, send an email to standardebook...@googlegroups.com.
To post to this group, send email to standar...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Geoff Coffey

unread,
Jun 26, 2017, 1:30:04 AM6/26/17
to Standard Ebooks, gwco...@gmail.com
Understood. I think inverting in general probably wouldn't work, which is why it doesn't do it. It only works in this case because the images are solid black/grey. If they were color or photographic, inverting them would make them look like film negatives.

FWIW, the iBooks developer guide says we should avoid this by putting a background on your images. But in this case that would only defeat the night mode entirely, which seems worse... It looks like night mode just doesn't work super well with "full page of text in an image" SVGs.

Related: Do we convert to outlines because we don't have a license to embed the fonts?

Geoff

Alex Cabal

unread,
Jun 26, 2017, 1:34:35 AM6/26/17
to Geoff Coffey, Standard Ebooks
Related: Do we convert to outlines because we don't have a license to embed the fonts?
Exactly.  While the fonts are OFL-licensed anyway, we want to be able to release our entire ebook file under CC0/public domain.  So therefore we can't embed the fonts themselves, and we have to convert the text to paths.


---- On Mon, 26 Jun 2017 00:30:04 -0500 Geoff Coffey <gwco...@gmail.com> wrote ----

Geoff Coffey

unread,
Jun 26, 2017, 1:49:55 AM6/26/17
to Standard Ebooks
Now that I have the kindle version outputting correctly, I'm testing on kindle devices and these images actually have the same problem there. I'm not sure yet if there's a workaround like there is for iBooks. But right now if I have my kindle set to "Color Mode" of "Black", the title page looks empty, and the logo on the imprint page is visible, but very dim.

Hmm...

Geoff

Robin Whittleton

unread,
Jun 26, 2017, 1:52:58 AM6/26/17
to Geoff Coffey, Standard Ebooks
Not that I’ve investigated this specific problem at all, but in the past I’ve solved this sort of thing by embedding the SVGs directly into the markup rather than using an image, and setting the fills to currentColor instead of an RGB ref. Maybe we should go down that road instead?
--
You received this message because you are subscribed to the Google Groups "Standard Ebooks" group.
To unsubscribe from this group and stop receiving emails from it, send an email to standardebook...@googlegroups.com.
To post to this group, send email to standar...@googlegroups.com.
Visit this group at https://groups.google.com/group/standardebooks.

Alex Cabal

unread,
Jun 26, 2017, 1:53:02 AM6/26/17
to standar...@googlegroups.com

OK, looks like it does indeed work in iBooks!  I've gone ahead and pushed an update to the tools repo which adds it to the compatibility CSS we include in our compatible epub.

I'm actually super happy about this because I always read in night mode and this problem has plagued me since day 1 :)

I think Kindle may have wishy-washy support for various media queries but unfortunately Kindle is a junk platform, so chances that the selector we need being equally supported across all of their apps/devices is probably slim.  But if you want to look in to it, please feel free.  Kindle gets its own compatibility CSS file inserted during the build process, which is at templates/kindle.css

--

Alex Cabal

unread,
Jun 26, 2017, 1:56:33 AM6/26/17
to standar...@googlegroups.com
Problem is that ereader support for SVG is really poor to begin with anyway.  All SVGs get converted to PNGs in the compatible epub for that reason.  I would be shocked if today's crop of ereaders managed to be able to understand currentColor in an embedded SVG.  But if you want, give it a shot to see...

Robin Whittleton

unread,
Jun 26, 2017, 2:04:50 AM6/26/17
to Alex Cabal, standar...@googlegroups.com
Ah yes, of course that’s the case.

Geoff Coffey

unread,
Jun 26, 2017, 2:04:55 AM6/26/17
to Standard Ebooks
I just tried (brilliant idea btw...) Works in iBooks but not in Kindle Mac App and not in the Kindle Fire simulator.

It is actually pretty great when it works because the title page text matches the font text for other color modes like Sepia. But alas, not in kindle.

Geoff

Alex Cabal

unread,
Jun 26, 2017, 6:56:26 PM6/26/17
to standar...@googlegroups.com

I just had a thought.  If we can invert the colors of images, what about inverting colors for images within books where we know it's a black-and-white illustration?  For example, see the floor plan in Mysterious Affair at Styles: https://github.com/standardebooks/agatha-christie_the-mysterious-affair-at-styles/blob/master/src/epub/text/chapter-3.xhtml

If we can mark images like that with a special class, then we could invert that too when night mode turns on...

Thoughts?

Geoff Coffey

unread,
Jun 26, 2017, 7:40:12 PM6/26/17
to Standard Ebooks
I had the same thought. Right now the CSS targets two specific images, but you could definitely add a class. (I have a secret desire to do Euclid's Elements some day, which would be a case where this would be great -- flatland too). 

As for the semantic naming of the class, maybe "line-art" or something would be more accurate. You wouldn't want to encourage producers to enable this for a black and white photograph, for instance...

Aside: I spent some time last night trying to find a way to do this on kindle, but came up short. It doesn't do filter so it can't invert images, and I can't find any kind of media query, class, etc... that tells me when the user's in "black" color mode...

Geoff

Geoff Coffey

unread,
Jun 27, 2017, 11:59:39 AM6/27/17
to Standard Ebooks
Thinking about this a little more, in the spirit of your "idealized" epub that can then be processed down to different formats/platforms, maybe it would make sense to define a few classes for images/figures in general:

Type: photograph, line-art, text ...
Color depth: black-and-white, monochrome, color

It would then be possible in the future to make more determined decisions about presenting these. For now, for instance, we would invert black-and-white line-art in night mode. In the future we might do selective color replacement on line art, enable different kinds of interactive zoom on photographs vs. line art, etc...

That said I have a terrible habit of over-engineering things so take this as thinking out loud...

Geoff

Alex Cabal

unread,
Jun 27, 2017, 12:17:33 PM6/27/17
to standar...@googlegroups.com

Interesting idea.  Right now I don't think there are semantics for color depth  in either the epub vocabulary or the z3998 vocabulary. 

z3998 can differentiate between "illustration" and "photograph" but that's as far as it goes.

So maybe we need to add to the special se vocabulary for this stuff.

For color depth, we could add `se:color-depth.black-and-white`. If an image lacks that semantic then we assume it's in color.

Then, the CSS selector to invert images would select against images that are both `se:line-art` and `se:black-and-white`.

How does that sound?

Geoff Coffey

unread,
Jun 27, 2017, 2:08:56 PM6/27/17
to Standard Ebooks
+1

jim...@chapalpanoz.com

unread,
Jul 6, 2017, 2:25:50 PM7/6/17
to Standard Ebooks
Hi, 

This is a follow-up on a conversation I’ve had with Alex Cabal and Daniel Weck by mail.

A quick introduction. I’ll be working on the Readium CSS project for the next three months (full time) then I’ll do maintenance. I started monday so we’re still discussing how we will manage CSS in readium 2 but we’ve already made a call for participation to gather feedback and samples. Although we’ll make an Readium 2 implementation, the scope of the project is pretty large: we’ll document a lot of stuff, write best practices (some of which could be useful for authors as well), make the entire work free to use for other Reading Systems, etc. Actually, I’ve just committed a User Agent reference to the Readium-css Repo (UA Stylesheets + validation against HTML5 suggested rendering).

We’re doing everything in the open because transparency and communication are values we’re willing to defend. So you can request an invite at http://readium-slack.herokuapp.com and the #readium-2-css channel is public. It’s a little bit casual but you can see updates in real-time, and we’ll also probably discuss some issues and design choices.

First, if I may, you probably want to check the values iBooks is using (getComputedStyle for :root, getPropertyValue background-color). Last time I check, they used different colors on iOS and MacOS, which could make your filter a little bit off depending on the platform. 

Then, this issue actually was the first one I opened on the Readium CSS repo. This is something I’d like to discuss amongst other things but we have extra issues to deal with at the reading system level. In any case, I’d like to prevent such CSS hacks if possible, because that could bite us and our users in the a*** at some point. 

To sum things up, managing images in inverted modes is not trivial at the RS level because you need to invert some graphics but not others. And I’m not even mentioning SVG, for which the author has to give clues to the RS (like using currentColor if s/he wants to have black outlines/shapes/etc. inverted in night mode). Chromium is currently implementing high contrast mode but they basically use an invert filter, then invert images again to go back to their original state.

We have other issues to take into account: 
  1. we’re making a baseline, which means implementers will be able to customize it. Consequently the colors used in the baseline will not necessarily be the same in each Reading System using the CSS;
  2. people have been trying to hack their way to invert images in night modes for a while (using reserved attributes for the Reading System, gaiji metadata in iBooks, etc.) so there’s clearly an urgent need but hacks can have severe impacts at the reading system level;
  3. alternate stylesheets have been discussed but there’s millions of books who won’t have an alt stylesheet (that’s some kind of debt we must take into account and see how we can manage that at the Readium 2 level);
  4. if Kindle, iBooks, etc. don’t support alt stylesheets, I would most definitely not bet money on 100% of CSS authors providing an alt stylesheet for night mode;
  5. Night mode is plural, it’s night modes (cf. gray background in iBooks) and you can’t necessarily have the same styles for each night mode, especially when it comes to filters. A Reading System might ship with one night mode (white on black) then add another one (white on gray), etc., and this is definitely something we’d better take into account from the start.
I’m willing to discuss this and see if we can find informed solutions but at first sight, it looks like authors and implementers will probably have to make some compromises if we want to make it happen. A lightweight mechanism for inverting specific images could be a start but, for various reasons, it would be a lot simpler for everyone if the RS implementer had to deal with it on her/his side (several night modes, customized background-color, etc.).

I know there’s an alternate stylesheets spec, which could be a perfect fit, but they’ve been an issue as soon as they were born on the web, and some browser vendors are not willing to support them so it will depend on Reading Systems, some of them giving no positive signal for implementation.

Anyway, it’s super important we collect feedback from authors ASAP. A listing of things which are currently complex to manage on the authors’ side would help us make informed decisions. If the web is any clue, we’ll have to find pragmatic solutions which are not necessarily standards.

Please be assured one of our main goals is to provide authors with a reliable environment, which is why I’ve been validating UA Stylesheets against HTML5 suggested rendering for the last two days. I must admit it’s a little bit painful but it will probably help authors as well as implementers so that’s worth it. 

Please let me know if you have any question. 

Jiminy

Alex Cabal

unread,
Jul 6, 2017, 4:10:07 PM7/6/17
to standar...@googlegroups.com

Thanks Jiminy!

As I mentioned a little upthread, I think the best approach is one where epub authors use semantics to describe the content, and then reading systems style the content based on that description.

This switch to semantics-based development has been brewing in the general web for quite some time, and HTML5 and CSS give us all the tools we need to make it happen today.  We should all keep in mind that HTML was originally designed to mark up documents for reading just like a book.  That's why we've had elements like <h#> and <p> and <blockquote> since the stone age--the tools are already there.

So with that in mind, going back to night mode, I think the best approach would be to leave night mode styling to the reading system, just like we do today.  Today, you can turn on night mode and reading systems know to invert the text color and background color, because that's how the document is laid out.  They don't invert text color because we included a (for example) `class="night-mode-ok"` attribute on every <p> tag.

How could we add semantics to images that a smart reading system would understand as being able to be inverted for night mode?  Well, just about the only kinds of images we would want to invert in the general case are black-on-transparent line-art images. (Note that you could have, for example, a monochrome green image, and inverting that would not be correct; and you can also have rich greyscale images, which we also would not want to invert.)

So obviously invertible images are things like images of text, line art, maybe some subclass of etchings.  We can mark those images with `epub:type` semantics, like `epub:type="black-on-transparent line-art"`.  That would be an explicit OK from the ebook author that those images are invertible, and we add rich semantic information instead of saying something unsemantic like `epub:type="invert-me-please"`.

SVGs are another great candidate, and I think it would be really excellent if the reader knew how to invert them if their color was set to `currentColor`.  That would be an explicit OK from the ebook author to allow the reading system to set a readable color for the image.  At the very minimum I think that would be one almost unambiguous win.

jim...@chapalpanoz.com

unread,
Jul 7, 2017, 3:47:19 AM7/7/17
to Standard Ebooks
Hum OK, let me think on that a little bit longer. 

Quick remarks.

The good news there is that it could be useful to browsers vendors too, for their Reader Mode. Thinking about Pocket (Mozilla), Safari’s (Apple) and Edge’s (Microsoft) reader modes, in which they offer settings like night mode. So if we can have that spec’d for the entire web and supported at the browser level, it would be a huge win for everyone, i.e. you wouldn’t have to wait for Reading Systems to implement that on their own. 

We’re also moving away from epub:type and created aria-doc roles. Don’t know if such a feature would be considered ARIA material or not but it could be used for high-contrast-modes, which is accessibility-related. 

I’ll try to find someone as Apple, Microsoft, etc. to discuss such a feature and see if they could be interested. They’ll probably come up with the technical challenges it implies, edge cases, what could be the the best solution so that the maximum amount of authors use it, etc.

In any case, the reader and high-contrast modes, and Reading Systems have to know the author’s intent to manage that well.

Same for SVG. At least there’s currentColor, which can be seen as an intent from the author. It’s like a variable which value is set to the element’s color (which can be inherited from :root) but I can think of cases for which it might be problematic, say, text with color rectangles in the background. That would not be solved by an invert filter though (red would become cyan for instance).

I’ll try involving browser vendors in some specs since we may have a common interest there. Will let you know how it’s going. 

Geoff Coffey

unread,
Jul 11, 2017, 11:19:21 PM7/11/17
to Standard Ebooks, jim...@chapalpanoz.com
All good points. I'd just like to add that to me at least, the very real and most pressing issue is simply that the title page looks completely broken in night/dark mode, which is a pretty lousy out of box experience. There may be awesome long term standards based ideas to handle night mode in general and I'm all for it. But today I'd love it if books weren't broken on the first page.

The invert code seems to fix that in iBooks (but maybe there are issues with that). I was not able to find a fix for Kindle.

Of course if all this CSS hackery is undesirable, another fix is simply to put a white background in the title page SVG. It'll make the title page a little gross in night mode, but at least it won't look broken.

A third option would be to use a public domain font that can be embedded and render the title page in HTML. In theory the logo could be a font glyph too, which would solve the same problem on the colophon page. But obviously there are more than just technical concerns with all that.

Geoff

Jared Updike

unread,
Jul 12, 2017, 10:34:03 AM7/12/17
to Standard Ebooks, jim...@chapalpanoz.com

A fourth option is to stroke the SVG for the titlepage (not the cover) in white so it works on black or white backgrounds. On light, non-white backgrounds (off-white) it would be barely noticeable, and on black backgrounds, it would at least be readable.

I'm not sure if this breaks iBooks or not, which actually looks great in dark mode (either uses the currentColor fix or just does black on white and inverts everything). It is easy to implement a (1.5px stroke-width) in the SVG style tag for each <text> tag (as long as Inkscape doesn't butcher it).

  Jared.

Geoff Coffey

unread,
Jul 12, 2017, 11:31:12 AM7/12/17
to Standard Ebooks, jim...@chapalpanoz.com
That seems like a great solution to me. It even kind of honors night mode by minimizing how many pixels we light up. That would fix Kindle as well, right? 

I can get screenshots in all of iBooks and Kindle's various color modes and post back if that would be helpful.

Geoff

Alex Cabal

unread,
Jul 12, 2017, 1:27:27 PM7/12/17
to standar...@googlegroups.com

That's pretty clever, I like that as a workaround until some kind of night mode standard gets finalized.

Let me play around with it and see.

Alex Cabal

unread,
Jul 12, 2017, 5:28:38 PM7/12/17
to standar...@googlegroups.com

OK, I've done a test build for some of these concepts.  See the attached epubs (the compatible .epub in particular).

This build features a few things:

- In the pure source (.epub3):

    - We've denoted invertible images with `epub:type="se:color-depth.black-on-transparent"` as a signal to ereaders to invert such images.

    - SVGs no longer define a fill color, leaving it to the default.  For most systems this should just be #000, and an ereader that supports SVG and is smart enough to change the default fill/stroke color for the SVG when night mode turns on can change it to #FFF.  The hanging power cord in the SE logo is defined using stroke, and that stroke is set to `currentColor` which has spotty support in some SVG renderers.  (Gnome image viewer doesn't render it, but Firefox does for example.)

- In the compatible build (.epub):

    - CSS is injected to target iBooks and use a filter to invert images with the type `se:color-depth.black-on-transparent`

    - The titlepage SVG is given a 1px #FFF stroke before being converted to SVG; so while it should invert fine in iBooks, other ereaders will display a white border like Jared suggested.

    - The logo SVG doesn't get that treatment because the power cord itself is rendered using stroke.  (So we can't add a stroke to a stroke.)  If anyone has suggestions on that front please let me know.

Can you guys open up the .epub file and take a look?

Specific things to review:

- Titlepage in day mode and night mode, in iBooks and a different reading system

- Chapter 4, which includes several invertible illustrations: day and night mode in iBooks (CSS can't target other reading systems at the moment and we can't add stroke to these kinds of  scanned JPG)

agatha-christie_the-mysterious-affair-at-styles.epub
agatha-christie_the-mysterious-affair-at-styles.epub3

Jared Updike

unread,
Jul 12, 2017, 6:24:16 PM7/12/17
to Standard Ebooks


All images look readable in iBooks for macOS 10.12 (Sierra) with all four themes: white, off-white (sepia on khaki?), gray, and black. I am more convinced that the darkest (black) theme is implemented by drawing in Black fg on White bg and inverting (even link colors are blue (on black bg) v. orange (on white bg theme)). All images look like that is how they are drawn, when I switch between white bg and black bg.

The gray background, however, does show the sketches/drawings with black lines on white fill/bg, and the logo SVG (titlepage) shows a too-thin white stroke with black fill on the text. (2px might be better? 1px stroke is a little anemic even on my 4K screen -- the SVG is 1400px wide, after all, and the stroke seems to get scaled down)

(Google Groups is butchering/downsampling the gray bg image I attached.)

  Jared.

Alex Cabal

unread,
Jul 12, 2017, 6:39:23 PM7/12/17
to standar...@googlegroups.com

When you say logo SVG, do you mean the SE publisher logo on the imprint page? (the page after the titlepage)

That logo doesn't get a stroke, because as I mentioned the power cord is drawn using stroke so we can't stroke on top of stroke.  So I just didn't put stroke on it at all.  I'm not sure how to proceed here.

I see the white stroke on the titlepage with the gray bg, that's unfortunately going to be unavoidable with the current method where we convert all pngs to svgs for the compatible build.  It's going to be a tradeoff--ereaders that we can't target for night mode get a readable white outline, at the expense of having the white outline visible when using non-white bgs in the general case.

Jared Updike

unread,
Jul 12, 2017, 8:08:41 PM7/12/17
to Standard Ebooks
Meant to say titlepage SVG, not the SE logo SVG.

You can try stroking the SVG I sent. I expanded the stroke of the plug and combined the pieces of the book outline and plug, so they can be stroked as a unbroken single outline. (Affinity Designer butchered the SVG and lost some of your clean markup. With a text editor, you might try starting with the original logo.svg and adding that <path id="book-and-plug" d="..."/> chunk from my attachment to the original SVG and removing the individual pieces of the plug+book.)

Could that work?

  Jared.
se-logo-stroke-expanded.svg

Geoff Coffey

unread,
Jul 12, 2017, 8:54:03 PM7/12/17
to Standard Ebooks
I concur that these all look decent in iBooks on both Mac and iOS. I converted to AZW3 and MOBI using Calibre (is that equivalent to what your tools do?) and the AZW3 looked fine on kindle Mac with the stroke and the white backgrounds. But on the MOBI version (which is apparently the only version you can get onto an iOS device) all images ended up with a solid white background. Still readable at least.

I put screenshots here if it is useful: https://github.com/gwcoffey/screenshots

Geoff

Alex Cabal

unread,
Jul 13, 2017, 4:54:57 PM7/13/17
to standar...@googlegroups.com

Jared that SVG is great, thanks!  I've put those changes into the new logo so now we can add stroke to the whole thing.

I think it looks pretty good, with the minor complaint that in the upper portion of the laurels the stalk becomes invisible because the white stroke overwhelms the black fill.  Does anyone have suggestions on how to solve that?

I've updated the test epub if you all want to take a look.  Note the logo on the imprint should now work in night mode using the SVG white stroke method; and I've also tried giving the PNGs in chapter 4 a transparent background.  I like this for storing in our "perfect epub" source, because that perfect reader should invert these images; but I think in practice it would make them unreadable on night mode in any reader besides iBooks. 

Let me know how it looks. I think what we'll probably do is add a step to the build process to swap transparent BG in PNGs for white, when building the compatible epub.

--
You received this message because you are subscribed to the Google Groups "Standard Ebooks" group.
To unsubscribe from this group and stop receiving emails from it, send an email to standardebook...@googlegroups.com.
To post to this group, send email to standar...@googlegroups.com.
Visit this group at https://groups.google.com/group/standardebooks.
agatha-christie_the-mysterious-affair-at-styles.epub

Jared Updike

unread,
Jul 13, 2017, 6:48:10 PM7/13/17
to Standard Ebooks
1. Here is what it looks like in iBooks and Calibre with white text on black bg:

- https://www.dropbox.com/sh/vd2a676vqjijaxa/AAAK1nGImeol8MF3cDkIAGhBa?dl=0

I think the real logic for iBooks drawing on black bg and off-white gb is: render all non-text in black on white mode, then write text on top of that in custom color (then black bg invert for darkest mode).

I think the stroke could be 1.5px - 2px (or double whatever it is) on the titlepage to match the "weight" of the stroke on SE logo. (See 2 below for more on this.)

In calibre, the black on transparent in-line images (part of the story) are AWOL; as you mentioned they will probably need white bgs during build to work on all ereaders.

2. Laurel taper/vanishing fix (if the image below is not rendering the full 1900+px then open the Dropbox link above.)


Fancy vector editors allow you to set the Stroke Alignment Style to 'outside' so the inside (fill) part of the shapes looks exactly the same w/ and w/o the stroke. AFAIK the SVG spec does not support this but you can achieve the same effect manually by duplicating shapes. Here, the original on the left is your 1px stroke, stroke-aligned-centered-on-the-shape SVG, rendered in iBooks. On the right is the 'Outside Stroke Alignment' effect, achieved using standard centered stroke style, at 1.5px stroke (on the layer below) with duplicate 0-px stroke, dark-filled shapes on top. The effect is subtle but looks great on Retina screens. (I would recommend applying this approach for the titlepage text / <path /> tags spit out by Inkscape. That way the shapes will look identical to how they did before this whole odyssey, on light backgrounds.)

If you send me the SVG you have, I can do this for you with clean, hand-written SVG markup, cleaner than any pro or free SVG editor could do, using the <defs> and <use> tags, with no copy-paste code duplication, if you care about that sort of thing. (Or you can have a go at this, armed with this knowledge :-). In addition, there is some clipping of the outlines at the top and bottom, in the hacked up version I have since the filled shapes touch the bounding box, which might require adjusting the bounds by a few pixels (assuming your version has not corrected this).

The logo is really elegant and deserves to look its best.

  Jared.

Jared Updike

unread,
Jul 13, 2017, 6:49:34 PM7/13/17
to Standard Ebooks
1. above should have read:

I think the real logic for iBooks drawing on black bg and off-white bg is: render all non-text in black on white mode, then invert or tint, then write text on top of that in the custom, final text color.

Alex Cabal

unread,
Jul 14, 2017, 12:54:18 AM7/14/17
to standar...@googlegroups.com

Sure, here's the draft logo SVG I'm working on.

I did some research and `stroke-align` is just a draft property with zero support so far.

Give your method a shot and let's see what we can come up with.  Clean code is important even in the SVG I think.

The big problem is going to be automating it during the build process.  The SVG we keep in the repos should be the "perfect" one, which means no stroke at all (on the assumption that the "perfect ereader" will know to invert colors without further prompting).  Then we tweak it during build, and right now we have it easy, because all we have to do is a simple string replace to inject a `style="stroke: #fff"` attribute into every path in the SVG and boom, we're done--instant white stroke applied in the interest of broad ereader compatibility.

But now if we're talking about duplicating paths, positioning them and styling them differently, well that becomes way more complicated right away, maybe even too complicated to easily script.  But no reason not to give it a shot if you think you can pull it off.

I'm not sure why the stroke on the logo seems thicker than the stroke on the titlepage text, since both are just 1px white.

--
You received this message because you are subscribed to the Google Groups "Standard Ebooks" group.
To unsubscribe from this group and stop receiving emails from it, send an email to standardebook...@googlegroups.com.
To post to this group, send email to standar...@googlegroups.com.
Visit this group at https://groups.google.com/group/standardebooks.
logo.svg

Alex Cabal

unread,
Jul 14, 2017, 2:04:29 AM7/14/17
to standar...@googlegroups.com

You know what, never mind... I think I got it :)

I set up the build script to duplicate the paths in the SVG, add a 2px stroke for the logo and 4px stroke for the titlepage, and lay the duplicate under the original paths.  This achieves the effect you're describing Jared.  You're right, it does look much better.  Simpler than I thought, too.

Attached is the new test epub using this method.  This epub also has transparent PNGs converted to white backgrounds, also part of the build script.  Give chapter 4 a quick look to confirm it's working.  (In night mode, images should be black-on-white in all ereaders except ibooks, where they should be white on black thanks to the targeted CSS)


On 7/13/17 5:48 PM, Jared Updike wrote:
--
You received this message because you are subscribed to the Google Groups "Standard Ebooks" group.
To unsubscribe from this group and stop receiving emails from it, send an email to standardebook...@googlegroups.com.
To post to this group, send email to standar...@googlegroups.com.
Visit this group at https://groups.google.com/group/standardebooks.
agatha-christie_the-mysterious-affair-at-styles.epub

Alex Cabal

unread,
Jul 14, 2017, 2:18:42 AM7/14/17
to standar...@googlegroups.com

Ya know what, let me throw out another crazy experiment here.

Here's one more test epub file.

This one contains the stroke adjustments from the previous file I sent.

But this one differs from the last one in this way:

- PNGs remain transparent

- Compatibility CSS is injected to target the <img> tag and give all such PNGs a CSS background-color of white.  (This is perfectly valid CSS but it's questionable how well-supported it is in ereaders)

- iBooks is specifically targeted to reset the white background to transparent.

The result should be:

- In iBooks, PNGs do not have a background color in the white/sepia/gray modes, and yet still are inverted in black/night mode

- In all other ereaders, PNGs have a solid white background at all times.

So the question is, does this actually work?  Can someone test on iBooks and some other apps to see what the result is?  (Chapter 4 is the chapter of interest here)

You can unzip the epub and inspect core.css (at the bottom) to see exactly what I'm talking about in more detail.

I'm not sure how well the general ereader supports background colors on <img> tags, and I'm also not sure if I targeted iBooks correctly.


On 7/13/17 5:48 PM, Jared Updike wrote:
--
You received this message because you are subscribed to the Google Groups "Standard Ebooks" group.
To unsubscribe from this group and stop receiving emails from it, send an email to standardebook...@googlegroups.com.
To post to this group, send email to standar...@googlegroups.com.
Visit this group at https://groups.google.com/group/standardebooks.
agatha-christie_the-mysterious-affair-at-styles.epub

Alex Cabal

unread,
Jul 14, 2017, 3:54:14 AM7/14/17
to standar...@googlegroups.com

Oops, I screwed up the styling a little in the last example.  This should be the correct one, attached, that is experimenting with transparent PNGs in night mode / outside stroke on SVGs.


On 7/13/17 5:48 PM, Jared Updike wrote:
--
You received this message because you are subscribed to the Google Groups "Standard Ebooks" group.
To unsubscribe from this group and stop receiving emails from it, send an email to standardebook...@googlegroups.com.
To post to this group, send email to standar...@googlegroups.com.
Visit this group at https://groups.google.com/group/standardebooks.
agatha-christie_the-mysterious-affair-at-styles.epub

Jared Updike

unread,
Jul 14, 2017, 12:50:09 PM7/14/17
to Standard Ebooks
Screenshots here:

- https://www.dropbox.com/sh/vd2a676vqjijaxa/AAAK1nGImeol8MF3cDkIAGhBa?dl=0

Looks pretty good -- iBooks and Calibre. Maybe the titlepage SVG could be a hair heavier/thicker, but that is debatable and may look different on different devices. Good work.

  Jared.

Geoff Coffey

unread,
Jul 14, 2017, 12:53:27 PM7/14/17
to Standard Ebooks
These look great. Only thing I noticed is that in night mode on iBooks, the figures in chapter 4 have a very faint lighter background. Is the transparent background being applied in night mode? Otherwise maybe this is color space related although I'm not sure if a transparent layer would cause that.

This may not show up depending on your screen, the difference is very subtle, but here are screen shots including the color sampling:




In white/sepia/gray there's no background at all and they look gorgeous. Logo and title page look great everywhere for me.

Geoff

Alex Cabal

unread,
Jul 14, 2017, 12:59:22 PM7/14/17
to standar...@googlegroups.com

Yeah I see what you mean.  I used Gimp's "color to alpha" function so maybe it didn't do a great job with making the white BG totally transparent.  I'm open to suggestions on how to fix this too.  (You can access the originals in the Styles repo, I haven't pushed the transparent PNGs yet)

--
You received this message because you are subscribed to the Google Groups "Standard Ebooks" group.
To unsubscribe from this group and stop receiving emails from it, send an email to standardebook...@googlegroups.com.
To post to this group, send email to standar...@googlegroups.com.
Visit this group at https://groups.google.com/group/standardebooks.

Geoff Coffey

unread,
Jul 14, 2017, 1:29:10 PM7/14/17
to Standard Ebooks
Yeah looking at the source image, the background is #005500 with 255 alpha, which should in theory be totally transparent. But maybe when webkit does color space translations or something it gets off by a touch (not sure -- outside my expertise). 

I was able to fix it in my image editor, which has a filter to make a selected color transparent. I just converted #005500 to transparent, which seems to have produced #000000. Now it doesn't show the background. (This could probably be done with imagemagick too, but it probably makes more sense to avoid it in image production if possible.)

Did gimp's "color to alpha" let you configure the actual color applied? I wonder where the green came from...

Geoff

Alex Cabal

unread,
Jul 14, 2017, 2:52:59 PM7/14/17
to standar...@googlegroups.com

OK, looks like the BG for these isn't #ffffff, it's #fcfdfc which looks just about the same but I didn't use the dropper to inspect.  So when I did "color to alpha" I selected #ffffff and it left the remainder of the  blend as a very faint shadow.  My fault.

I've updated them with the correct colors set to transparent, hopefully it's improvement... attached

If things look good then I want to test a little more to ensure background colors work in most other ereaders, then we can solidify this standard and apply it to our previous ebooks

--
You received this message because you are subscribed to the Google Groups "Standard Ebooks" group.
To unsubscribe from this group and stop receiving emails from it, send an email to standardebook...@googlegroups.com.
To post to this group, send email to standar...@googlegroups.com.
Visit this group at https://groups.google.com/group/standardebooks.
agatha-christie_the-mysterious-affair-at-styles.epub

Geoff Coffey

unread,
Jul 14, 2017, 3:09:43 PM7/14/17
to Standard Ebooks
Looks fantastic on my end now. 💯

Geoff

Alex Cabal

unread,
Jul 15, 2017, 1:25:08 AM7/15/17
to standar...@googlegroups.com

Alright I'm kicking off a build on our ebook library to rebuild everything with the new titlepages/logos.  Sadly I think Styles is the only book that will benefit from the transparent PNG technique but at least we got it sorted for future use.

--
You received this message because you are subscribed to the Google Groups "Standard Ebooks" group.
To unsubscribe from this group and stop receiving emails from it, send an email to standardebook...@googlegroups.com.
To post to this group, send email to standar...@googlegroups.com.
Visit this group at https://groups.google.com/group/standardebooks.
Reply all
Reply to author
Forward
0 new messages