Titlepage CSS issues

[Wim de With]

Hi all,

Today, I was trying out some Standard Ebooks on my Kobo with KOReader
(alternative ereader software, see https://koreader.rocks), and I
noticed an issue with the title pages. The title page is still showing
the HTML elements with the text next to the image built from the SVG
with the embedded League Spartan font. See the attached screenshot.

I did some digging, and I found out the h1 and p text elements on the
titlepage.xhtml page are supposed to be rendered off-page. I assume it
is rendered off-page as opposed to not including the elements at all or
making them invisible to give screen readers and other accessibility
software access to the text which is shown as an image otherwise.

The text elements are rendered off-page through the 'position: absolute'
CSS property with a left offset of -999em. Unfortunately, KOReader does
not support the 'position' property at all. I've tried to see whether I
could just implement support for the property, but KOReader's epub
render engine is fairly simplistic and 'position' is not a trivial thing
to implement.

I'm not sure where to proceed with this. It's clearly not easy to render
text off-page without also removing it for accessibility and almost any
method I've seen on the internet seems like a hack. I've tried some of
them, but I didn't really get anything useful ('text-indent: -999em' is
the only one that worked, but it still leaves the vertical whitespace
for the text height). It might also be solved without CSS, by removing
the h1 and p elements and adding the information in an 'alt',
'aria-label' or 'aria-description' attribute on the image element
itself. I'm curious to hear if you have any thoughts on the general
problem and whether there might be other ways to solve it that I'm not
seeing. Or maybe I just need to accept that KOReader is missing this
feature.

Wim

P.S. I've also checked Plato, which is another alternative Kobo
software, and it also doesn't support 'position'.

[Alex Cabal]

This is a bug in KOreader I think. It should support `position:
absolute` which has been in the CSS spec since like 1998.

I'm not aware of a different method of preserving headings for
accessibility while still showing a prerendered image, given the
rendering constraints of most ereaders. (Note the fact that we use h1,
which is important for accessibility and replacing it with an alt
attribute is not the same.)

[Adam Stone]

I use KOReader too and had noticed this, but it never bothered me that much. Still, it's easy to fix on your own if you use KOReader by creating a user style-tweak CSS file and saving it to your device.

Create a CSS file called "standardebooks.css" with the following CSS code:

@charset "utf-8";
@namespace epub "http://www.idpf.org/2007/ops";

/* KOReader-specific fix to hide text that should be hidden on titlepages,
 * colophons, and imprints */
section[epub|type~="titlepage"] h1,
section[epub|type~="titlepage"] p,
section[epub|type~="colophon"] h2,
section[epub|type~="imprint"] h2{
visibility: hidden;
}

Just put this file in your "koreader/styletweaks" directory, which should already exist. Then, when you open up a Standard Ebooks EPUB, you just have to enable this user style tweak (Top Menu → the icon that looks like a page of text →Style tweaks → User style tweaks → select "standardebooks").

[Wim de With]

Yeah, that was about what I was expecting. I'll see if I can discuss with the KOReader people whether it is feasible to implement 'position: absolute'. If not, it's not really an issue that affects readability in any way, so I can live with it. Thanks!

[Stephen Fenwick]

The following CSS gives good results on koreader which (still) doesn't support position: absolute, and does it in a way that I think would be compatible with screen readers

section[epub|type~="titlepage"] h1,
section[epub|type~="titlepage"] p,
section[epub|type~="colophon"] h2,
section[epub|type~="imprint"] h2{

margin: 0px !important;

line-height: 0px;

color: transparent;

}

Would it be sensible to add this to the standard CSS to better support koreader?

[Alex Cabal]

Why is color:transparent necessary if the line height is set to 0? Is
that line required for koreader?

> @namespace epub "http://www.idpf.org/2007/ops <http://
> www.idpf.org/2007/ops>";

> <https://koreader.rocks>), and I

> --
> 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
> <mailto:standardebook...@googlegroups.com>.
> To view this discussion visit https://groups.google.com/d/msgid/
> standardebooks/c9c3c408-dd97-476c-abd0-b2b029a72c25n%40googlegroups.com
> <https://groups.google.com/d/msgid/standardebooks/c9c3c408-dd97-476c-
> abd0-b2b029a72c25n%40googlegroups.com?utm_medium=email&utm_source=footer>.

[Stephen Fenwick]

Without that the text is still visible even though it takes up zero size. It works on the title page - I think because the image covers up the text - but causes problems on the Imprint and Colophon pages.