Another newbie question: Popup/Modal windows

[JackTrade]

I have tried for a while now to get a popup box into a Sigil file. For example, something like this one or maybe this one, and countless others - I can't get them to work in Sigil.

Is there a secret to popup windows in Sigil? Can someone refer me to examples of Sigil-generated EPUBs with working popups?

Thanks.

[Doitsu]

IMHO, it'll be extremely difficult to display popups in epub3 books without JavaScript code. The JavaScript and interactivity in iBooks example file kind of works but is clunky.

BTW, if you're interested in epub3 popup footnotes, have a look at this post and if you want to create collapsible lists, check out out this post.

[JackTrade]

Originally Posted by Doitsu

IMHO, it'll be extremely difficult to display popups in epub3 books without JavaScript code.

By now even I could figure out something is wrong; but why is that the case? Is that a problem with the EPUB3 format? Many of these attemps I made to create popups, when saved as regular HTML pages and opened by any of the main browsers, displayed the popups with no problem and without any JavaScript; why can't EPUBs do the same?

[PeterT]

Maybe because an epub is not the same as a web page

[KevinH]

Exactly what errors are shown when an epub with your desired code is loaded and Sigil is first put in BookView mode (please note that the Preview Window will probably not be sufficient to test if that code works). Have you actually tested it using BookView mode? Alternatively, have to tested that code with Calibre's viewer to see if it works there?

Both Calibre and Sigil use Webkit based widgets (from Qt) to display epub code and full browsers can be made using that widget kit, so it might work.

[Doitsu]

Originally Posted by KevinH

Exactly what errors are shown when an epub with your desired code is loaded

The CSS code that the OP linked to contains many pseudo selectors (:hover, :active, :target) that QtWebkit apparently simply ignores.

QTWebkit does support some pseudo selectors, though, as you can see in this simple pseudo selector test file.

Spoiler:

At least the following selectors should work:

:after 
:before 
:first-letter
:first-line 
:first-of-type
:last-of-type
:lang(xx)
:nth-child(n) 
:nth-child(even)  
:nth-child(odd)
:nth-of-type(n)
:only-of-type
:not

I.e., there are no error messages. Also, if I'm not mistaken, :hover wouldn't work with most eInk readers anyway.

@JackTrade: If you just want to display a modal message box, you could simply use the alert() JavaScript command.

[JackTrade]

Originally Posted by Doitsu

The CSS code that the OP linked to contains many pseudo selectors (:hover, :active, :target) that QtWebkit apparently simply ignores.
...

QTWebkit does support some pseudo selectors, though, as you can see in this simple pseudo selector test file.

I.e., there are no error messages. Also, if I'm not mistaken, :hover wouldn't work with most eInk readers anyway.

Indeed, there are no error messages. With the numerous code snippets I tried (in both Sigil and Calibre), I received one of two general responses: either the popup box appears side by side with the button which is supposed to trigger it on click, or the box just does not show up after clicking the "click me" button. It's also interesting to note that in the latter case (where the "click me" button does not respond to the click), it usually does respond to the ":hover" events (such as changes in background color, cursor shape, etc.)

Originally Posted by Doitsu

@JackTrade: If you just want to display a modal message box, you could simply use the alert() JavaScript command.

Of course, with JavaScript this (and other methods) work, but the whole idea originally was (and I apologize for not making it clear) to create a pure CSS solution for presenting incidental information right over the main text, in case the reader is interested in it.

[KevinH]

FYI - I downloaded and installed QupZilla version 2.1.2 (a lightweight Web Browser based on Qt's WebEngine (Chrome's version of WebKit). It is built using Qt 5.8.0.

I then went to the first of your demo sites. It seemed to function just fine as a pop-up.

So it seems that Qt's Webkit is old enough that it will not support the newer pseudo-classes but that Qt 5.8.0 with Chrome's based QWebEngine does seem to support those css3 features.

Sigil will eventually get ported over to Qt's QWebEngine Framework since it is the future.

[JackTrade]

Originally Posted by KevinH

Sigil will eventually get ported over to Qt's QWebEngine Framework since it is the future.

The future indeed. I'm probably punching way above my weight here, but IMHO an HTML file imported into Sigil and saved as an EPUB should - when opened in any EPUB reader - perform exactly as the HTML file performs when opened in Firefox or Chrome. Otherwise, this format will not take off.

And in the interim, it would be indeed useful for Sigil to issue error messages such as ".target not recognized" or whatever. It would never have occurred to me (and I imagine a majority of the non-CSS experts) that .hover works but .target doesn't.

[KevinH]

You really seem to truly misunderstand epubs and the state of the epub reader marketplace. Neither epub 2 nor epub3 is spec'd as the web in a box. They are not HTML, they are instead xhtml docs and the current spec does not call for any specific set of css3 support. That is up to reader implementations just as support for javascript, local site storage, etc, etc.

So very very few e-readers will have support for this set of css3 features. Authors targeting epub should be very aware of the the limitations of the spec and the different degree of implementations mean that there is no guarantee that any e-reading device will show this properly. That includes some of the biggest players in the Market including Amazon Kindle and Adobe.

Second, just because Sigil can not "show it" in its preview, does not mean you can not use Sigil to edit and add that code. You just have to test it someplace else. But that is the case anyway since all e-readers only support a subset of features and they have their own quirks.

Hope this makes things clearer. There will be no "error message" added to Sigil for this very reason.

[DiapDealer]

Originally Posted by JackTrade

The future indeed. I'm probably punching way above my weight here, but IMHO an HTML file imported into Sigil and saved as an EPUB should - when opened in any EPUB reader - perform exactly as the HTML file performs when opened in Firefox or Chrome.

No. It shouldn't. Epubs are not webpages. Epub only complies with a subset of html/css. Even if Sigil dutifully previewed your code in the manner you believe it should, there is very little hope that it would do so (with any consistency) on a range of devices/apps.

If you're going to be successful at creating epubs, the first thing you're going to need completely forget about is "how it looks in a browser." It's just not very relevant to ebook-making. Because there will never be (universal) full-support for html/css in the epub specifications (let alone universal compliance with those epub specifications and how they are interpreted and rendered in ereaders and ereading apps).

[Doitsu]

@JackTrade: You might want to download and install Adobe Digital Editions 4.5.4 and/or the Readium Chrome/Chromium extension for testing purposes, because both are based on the official IDPF Readium SDK.

You also might want to take into consideration that very few eInk readers and only a handful of iOS/Android apps actually support ePub3 books.

[JackTrade]

With all due respect to you sorcerers and wizards (seriously), I believe that the technical discussion of what eBooks can or cannot do, and the extent to which they should or should not behave like browsers in terms of supporting the latest in CSS/HTML standards neglects the other side of the equation – and one I feel much more comfortable with – and that’s the point of view of the eBook’s consumer.

Not to bore people unnecessarily with war stories, but I’m basically a consumer who became frustrated because he couldn’t find an eBook he was interested in and decided to do it himself. The main problem I encountered is that while the current state of eBooks is good enough for text documents (say, War and Peace) it doesn’t work as well for media-heavy books. To clarify, take a look at this Web page about the first movement of Mahler’s Symphony no.1. It contains, besides text, images (snippets of the score) and audio clips (snippets from the movement). I wanted to create an eBook which would be able to replicate that and more. It doesn’t have to “look like the web page”, but it does have to be able to, in addition to viewing the images and listening to the audio, give the reader the ability, if he so chooses, to view additional information either briefly (as in a tooltip), or more permanently (in the form of a popup box which can be later closed). And this additional information itself may contain, in addition to text (in more than one language), images and audio/video clips. All this in a self-contained book which may be read on a train or plane, with no internet connection.

As far as I know, Kindle doesn’t support this wish list; neither does EPUB2. So I tried to create numerous mini-versions of this kind of eBook in EPUB3 format with Sigil. I tested the Sigil output on Windows with the most recent versions of Calibre, Adobe Digital Editions and Epub-Catalog, a Firefox add-on (I wasn’t aware of Readium which Doitsu recommends – I’ll try it next); in most cases, if it didn’t work on Sigil, it didn’t work on the others. On Android, I tried it on Gitden (mostly useless), Overdrive for Libraries (worked occasionally) and Infinity Reader (the best so far). (I don’t use Apple, so I don’t know how well these eBooks do in that environment).

At the end of the day, as long as the eBook does exactly what I (the reader) want it do, I personally don’t care if all readers on all operating systems can read it. If it can be read in one application on Windows and on one garden variety 8”-10” Android device (or, using add-ons, in the most recent versions of Firefox and Chrome), the rest (Apple devices, Kindle devices, legacy browsers) doesn’t matter. I understand that a real commercial publisher has difference concerns, but I wasn’t trying to solve all problems at once. And it's just frustrating to me that something which I thought was simple (erroneously, it seems) would turn out to be so difficult...

[Doitsu]

Originally Posted by JackTrade

The main problem I encountered is that while the current state of eBooks is good enough for text documents (say, War and Peace) it doesn’t work as well for media-heavy books. To clarify, take a look at this Web page about the first movement of Mahler’s Symphony no.1. It contains, besides text, images (snippets of the score) and audio clips (snippets from the movement). I wanted to create an eBook which would be able to replicate that and more.

IMHO, it shouldn't be too difficult to convert that webpage to an epub. You'll find lots of examples on how to embed audio and video files in the following epub3 test file: EPUBTEST 0100 - Reflowable Content Tests

Originally Posted by JackTrade

It doesn’t have to “look like the web page”, but it does have to be able to, in addition to viewing the images and listening to the audio, give the reader the ability, if he so chooses, to view additional information either briefly (as in a tooltip), or more permanently (in the form of a popup box which can be later closed).

IMHO, popup boxes aren't that user friendly and you can use several other methods to hide/unhide text. Here are two very simple examples:

1. Without JavaScript (The example file hides/unhides lists, but the method will also work for other elements.)

2. With JavaScript (The Local storage test page in the example file hides/unhides interlinear text, but the method works for any element.)

[JackTrade]

Originally Posted by Doitsu

IMHO, it shouldn't be too difficult to convert that webpage to an epub.

I agree and I've actually done it; it's pretty easy. But I wanted to go beyond that - for example, one of the audio clips is a song; I wanted to be able to display the lyrics of the song in two columns (one the original German, the other its English translation) above the media player. I managed to do that as a tooltip, but the problem is some of these songs are long, and having to continuously hover over the media player in order to display the tooltip is inconvenient. That's where the idea of the popup box, and its related problems, showed up... So when you say that:

IMHO, popup boxes aren't that user friendly

I have to respectfully disagree. However this:

1. Without JavaScript (The example file hides/unhides lists, but the method will also work for other elements.)

is a GREAT idea! Never heard of it before so I guess I just learned something new; thanks for that! Now I'll go and try to get my head around it...