Media type / alternative css for pop-up footnotes

[PhoenixIV]

Having worked on my first ebook, I came in touch with the inconsistencies in handling epub:type="footnote" . Honourable mention being Kindle, which only shows the first paragraph of a footnote in a pop-up and is therefore incompatible with e.g. putting a header / back link as first element in the note.

I wonder if it would help if there was e.g. a @media type that would allow to re-style elements in context of pop-ups. This would of course solidify the existence of those.

[iherman]

I presume what you mean is to define a new CSS media type for pop-ups marked with a specific epub:type, so that you could use CSS media queries.

As far as I know, there is a possibility to define custom media types in CSS via @custom-media footnote features which then makes it possible to use @media (--footnote) { ... }. But whether it is possible to assign a custom media based on the value of an attribute: I do not know.

However, are we sure that this is the way to go to solve the underlying problem? After all, it is perfectly possible to set CSS statement on an element having a specific attribute value using CSS selectors; indeed:

p[epub:type~="footnote"] {
    …
}

should do the trick. It is a matter of adding such statements to your publication. Of course, the question is whether all reading systems use the full power of CSS.

[PhoenixIV]

I presume what you mean is to define a new CSS media type for pop-ups marked with a specific epub:type, so that you could use CSS media queries.

Nearly. I do not care about it being marked with a specific epub:type.

The idea is: It is becoming common that devices display epub:type="footnote" elements linked via <a epub:type="noteref" href=... as a pop-up instead of jumping to a different page. This could induce the need of styling that only applies in this case. This fits the use of @media.

This would be omitted if there was a way to enforce "display as a pop-up". But I doubt this will happen.

See: https://help.apple.com/itc/booksassetguide/en.lproj/itccf8ecf5c8.html

_

p[epub:type~="footnote"] {

This would apply styling to footnotes in all cases, whether or not they are displayed in a pop-up. This does not fit the idea I try to convey.

_

_

To make it most vivid - Backstory:

I created a book with footnotes. They are referenced using the appropriate epub:type="noteref" and epub:type="footnote" tags. Some readers display those automatically in a pop-up instead of jumping to the page the footnote is on. I like that. However, this creates a problem:

<aside id="myNote2" epub:type="footnote">
    <h2 style="text-align: center; margin-bottom: 4em">Note 2</h2>
    <p>Text</p>
    <a>Backlink</a>
</aside>

The example above looks good when jumping to the page old-fashioned. But not as a pop up, because there is an disproportionate gap and the heading does not need to be displayed at all, because usually devices that show it as a pop up already display the name of the footnote with it, derived from the text that linked to it. (See image at https://help.apple.com/itc/booksassetguide/en.lproj/itccf8ecf5c8.html)

On top of that, Kindle, as mentioned, just displays "Note 2" in a pop-up, without the text (Only the first element in the footnote). This is of course a quirk/error with the device, not with the spec, but as an author it creates incredible headache.

My solution has been:

<h2 style="text-align: center; margin-bottom: 4em">Note 2</h2>
<aside id="myNote2" epub:type="footnote">
    <p>Text</p>
</aside>

However this causes readers that do not use pop-ups and jump to the anchor in the "old-fashioned" way to jump over the heading straight to the text, which does not look as intended.

So to make use of pop ups, make Kindle happy and be compatible with non-pop-up devices my final hack looks like this:

<h2 style="text-align: center; margin-bottom: 2em">Note 2</h2>
<aside id="myNote2" epub:type="footnote" style="padding-top: 3em; margin-top: -3em">
    <p>Text</p>
</aside>

What I would like for the future:

<aside id="myNote2" class="footnote" epub:type="footnote">
    <h2>Note 2</h2>
    <p>Text</p>
    <a>Backlink</a>
</aside>

.footnote h2 {
    text-align: center;
    margin-bottom: 4em;
}
@media pop-up {
    .footnote h2 {
        display: none;
    }
    .footnote a {
        display: none;
    }
}