Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Software > Sigil

Notices

Reply
 
Thread Tools Search this Thread
Old 03-27-2017, 04:33 PM   #1
JackTrade
Member
JackTrade began at the beginning.
 
Posts: 10
Karma: 10
Join Date: Mar 2017
Device: none
Another newbie question: Popup/Modal windows

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.
JackTrade is offline   Reply With Quote
Advert
Old 03-27-2017, 06:01 PM   #2
Doitsu
Wizard
Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.
 
Doitsu's Avatar
 
Posts: 3,747
Karma: 9814736
Join Date: Dec 2010
Device: Kindle PW2
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.
Doitsu is offline   Reply With Quote
Old 03-27-2017, 10:06 PM   #3
JackTrade
Member
JackTrade began at the beginning.
 
Posts: 10
Karma: 10
Join Date: Mar 2017
Device: none
Quote:
Originally Posted by Doitsu View Post
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?
JackTrade is offline   Reply With Quote
Old 03-27-2017, 10:24 PM   #4
PeterT
Grand Sorcerer
PeterT ought to be getting tired of karma fortunes by now.PeterT ought to be getting tired of karma fortunes by now.PeterT ought to be getting tired of karma fortunes by now.PeterT ought to be getting tired of karma fortunes by now.PeterT ought to be getting tired of karma fortunes by now.PeterT ought to be getting tired of karma fortunes by now.PeterT ought to be getting tired of karma fortunes by now.PeterT ought to be getting tired of karma fortunes by now.PeterT ought to be getting tired of karma fortunes by now.PeterT ought to be getting tired of karma fortunes by now.PeterT ought to be getting tired of karma fortunes by now.
 
PeterT's Avatar
 
Posts: 9,784
Karma: 56824989
Join Date: Nov 2007
Location: Toronto
Device: Wife: Touch, Arc, Vox Me: Nexus 7, Glo
Maybe because an epub is not the same as a web page
PeterT is offline   Reply With Quote
Old 03-27-2017, 11:24 PM   #5
KevinH
Wizard
KevinH ought to be getting tired of karma fortunes by now.KevinH ought to be getting tired of karma fortunes by now.KevinH ought to be getting tired of karma fortunes by now.KevinH ought to be getting tired of karma fortunes by now.KevinH ought to be getting tired of karma fortunes by now.KevinH ought to be getting tired of karma fortunes by now.KevinH ought to be getting tired of karma fortunes by now.KevinH ought to be getting tired of karma fortunes by now.KevinH ought to be getting tired of karma fortunes by now.KevinH ought to be getting tired of karma fortunes by now.KevinH ought to be getting tired of karma fortunes by now.
 
Posts: 2,416
Karma: 769772
Join Date: Nov 2009
Device: many
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.
KevinH is offline   Reply With Quote
Advert
Old 03-28-2017, 03:48 AM   #6
Doitsu
Wizard
Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.
 
Doitsu's Avatar
 
Posts: 3,747
Karma: 9814736
Join Date: Dec 2010
Device: Kindle PW2
Quote:
Originally Posted by KevinH View Post
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:

Code:
: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.
Doitsu is offline   Reply With Quote
Old 03-28-2017, 06:06 AM   #7
JackTrade
Member
JackTrade began at the beginning.
 
Posts: 10
Karma: 10
Join Date: Mar 2017
Device: none
Quote:
Originally Posted by Doitsu View Post
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.)


Quote:
Originally Posted by Doitsu View Post
@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.
JackTrade is offline   Reply With Quote
Old 03-28-2017, 09:15 AM   #8
KevinH
Wizard
KevinH ought to be getting tired of karma fortunes by now.KevinH ought to be getting tired of karma fortunes by now.KevinH ought to be getting tired of karma fortunes by now.KevinH ought to be getting tired of karma fortunes by now.KevinH ought to be getting tired of karma fortunes by now.KevinH ought to be getting tired of karma fortunes by now.KevinH ought to be getting tired of karma fortunes by now.KevinH ought to be getting tired of karma fortunes by now.KevinH ought to be getting tired of karma fortunes by now.KevinH ought to be getting tired of karma fortunes by now.KevinH ought to be getting tired of karma fortunes by now.
 
Posts: 2,416
Karma: 769772
Join Date: Nov 2009
Device: many
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.
KevinH is offline   Reply With Quote
Old 03-28-2017, 10:42 AM   #9
JackTrade
Member
JackTrade began at the beginning.
 
Posts: 10
Karma: 10
Join Date: Mar 2017
Device: none
Quote:
Originally Posted by KevinH View Post
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.
JackTrade is offline   Reply With Quote
Old 03-28-2017, 11:08 AM   #10
KevinH
Wizard
KevinH ought to be getting tired of karma fortunes by now.KevinH ought to be getting tired of karma fortunes by now.KevinH ought to be getting tired of karma fortunes by now.KevinH ought to be getting tired of karma fortunes by now.KevinH ought to be getting tired of karma fortunes by now.KevinH ought to be getting tired of karma fortunes by now.KevinH ought to be getting tired of karma fortunes by now.KevinH ought to be getting tired of karma fortunes by now.KevinH ought to be getting tired of karma fortunes by now.KevinH ought to be getting tired of karma fortunes by now.KevinH ought to be getting tired of karma fortunes by now.
 
Posts: 2,416
Karma: 769772
Join Date: Nov 2009
Device: many
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.
KevinH is offline   Reply With Quote
Old 03-28-2017, 11:17 AM   #11
DiapDealer
Grand Sorcerer
DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.
 
DiapDealer's Avatar
 
Posts: 16,030
Karma: 83624236
Join Date: Jan 2010
Device: Nexus 7, Kindle Fire HD
Quote:
Originally Posted by JackTrade View Post
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).
DiapDealer is offline   Reply With Quote
Old 03-28-2017, 11:55 AM   #12
Doitsu
Wizard
Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.
 
Doitsu's Avatar
 
Posts: 3,747
Karma: 9814736
Join Date: Dec 2010
Device: Kindle PW2
@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.
Doitsu is offline   Reply With Quote
Old 03-28-2017, 01:54 PM   #13
JackTrade
Member
JackTrade began at the beginning.
 
Posts: 10
Karma: 10
Join Date: Mar 2017
Device: none
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...
JackTrade is offline   Reply With Quote
Old 03-28-2017, 05:09 PM   #14
Doitsu
Wizard
Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.
 
Doitsu's Avatar
 
Posts: 3,747
Karma: 9814736
Join Date: Dec 2010
Device: Kindle PW2
Quote:
Originally Posted by JackTrade View Post
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

Quote:
Originally Posted by JackTrade View Post
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.)
Doitsu is offline   Reply With Quote
Old 03-28-2017, 07:46 PM   #15
JackTrade
Member
JackTrade began at the beginning.
 
Posts: 10
Karma: 10
Join Date: Mar 2017
Device: none
Quote:
Originally Posted by Doitsu View Post
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:


Quote:
IMHO, popup boxes aren't that user friendly
I have to respectfully disagree. However this:

Quote:
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...
JackTrade is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
[Newbie] Book cover list support? Popup footnote support nqk KOReader 1 02-19-2016 05:23 AM
Newbie with a question René vd Abeelen Sigil 16 11-26-2014 06:13 AM
question from a newbie silverraven Barnes & Noble NOOK 5 12-03-2011 01:10 AM
newbie question Dayum Which one should I buy? 6 12-31-2010 07:25 AM
Newbie Question kindlezzz Amazon Kindle 6 08-20-2010 07:15 AM


All times are GMT -4. The time now is 02:40 AM.


MobileRead.com is a privately owned, operated and funded community.