Using Sigil to get Cover to be default first page

rosshalde · 12-13-2014, 01:12 AM

I am using Sigil to create a cover.
I notice that on NOOK, it default shows the cover.
On Kobo it shows the first page that is not the cover.
I would like to have as close to a universal solution as possible to get devices/programs to always show the cover when the book is opened as many have nice covers.

Does this code look like it will do the job? I took Sigil's code and just added the <h1 title> and added the Cover to the TOC. I think this should work, but if anyone has another suggestion on using Sigil to do this, I would be happy to hear it.

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Cover</title>
</head>

<body>
<div style="text-align: center; padding: 0pt; margin: 0pt;">
<h1 title="Cover"></h1>

<svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 826 1237" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink"><image height="1237" width="826" xlink:href="../Images/Cover%20Manual%20of%20Prayers.jpg" /></svg>
</div>
</body>
</html>

Toxaris · 12-13-2014, 02:21 AM

You need to set the semantics right. Right-click on both the cover image and the cover page and select 'cover' from the semantics.

rosshalde · 12-13-2014, 08:07 AM

Maybe, I wasn't clear about the problem.
There is no issue getting Sigil to set the particular image as the cover. That is fine.

The issue is getting all e-readers/tablets to display the cover as the default opening page when a book is selected. After comparing, the three major e-readers (kindle, nook, kobo), have their own way of choosing the first page to show. Nook shows the cover, kobo doesn't (it shows the first page in the TOC). What I am trying to figure out is how to add the existing cover in Sigil to the TOC. The code,
<h1 title="Cover"></h1>
after the <div> and before the <svg> seems to have worked, but as I am very inexperienced want to know if that will have any negative consequences or if there is a better way to add the cover image to the TOC.

rosshalde · 12-13-2014, 08:45 AM

Edit former post.
While the code seems to work, it presents another problem.
Nook seems to default auto top-margin or top-pad all items labeled <h>. I have noticed this before. Even though the CSS particularly says (0) for all margins/padding with <h>. Any other ideas that can work around a way to use Sigil to essentially demand that readers get to see the cover?

Toxaris · 12-13-2014, 12:02 PM

Yup, do the following:

Code:

<h1 class="hidden">Cover</h1>

with class definition:

Code:

.hidden {display: none;}

rosshalde · 12-13-2014, 10:44 PM

Toxaris,

Here is the code from the cover of my Sigil doc. Is this what you have in mind?

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Cover</title>
<link href="../Styles/book.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div style="text-align: center; padding: 0pt; margin: 0pt;">
<h1 class="hidden">Cover</h1>

<svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 1306 1642" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink"><image height="1642" width="1306" xlink:href="../Images/Cover%20A%20Story%20of%20St.%20Catherine%20of%20Al exandria1.jpg" /></svg>
</div>
</body>
</html>

This worked. I gave me the best of both worlds. The cover now defaults as the first page when I open the file on Kobo, and it got rid of the pushing down the picture problem on the Nook. Thank you. Now, please explain what the heck we just did. Here is what I think, but please correct me.

1) the <h1> tag allows me to add it to the TOC
2) the hidden class tells the e-reader to provide no space for the <h1> tag which got rid of the Nook pushing down the <h1>
What I don't understand is how this <h1> tag point to the pic at all.
Usually I would do something like
<div class="image"><h1 title="Cover"><image></h1></div>
In that case I can see that the <h1> is within the <div> related to the image, but in the case above, the <h1 class="hidden">Cover</h1> seems to be floating in the middle of nowhere and I am unsure how it gets the image to show up. is it just because there is nothing else in the file to point to at all?

Toxaris · 12-14-2014, 02:22 AM

You are mostly right. In itself the <h1> tag does not point to the pic, but to the position of the tag at the top of the document. The tag is there, although it is not displayed. The big difference between 'display: hidden' and 'display: none' is that with hidden the tag is also not visible, but space is reserved for it with margins and all. So, by using 'display: none' the tag is there but is not taking up any space.
If you do not want to use the <h1> tag, that is also possible of course. You can also add a manual a link to the cover in the NCX. It depends on what you want of course and manual additions will be removed if the TOC is auto-generated.

You could also use '<h1 class="hidden" title="Cover" />' instead of '<h1 class="hidden">Cover</h1>'. That would also work.

Jellby · 12-14-2014, 03:16 AM

Quote:

Originally Posted by Toxaris

The big difference between 'display: hidden' and 'display: none' is that with hidden the tag is also not visible, but space is reserved for it with margins and all.

"display: hidden" is not correct, you are thinking of "visibility: hidden". Be aware that "visibility" is not a required CSS property in the epub2 spec. And note that some readers may ignore links to elements with "display: none" (it makes sense, but I don't know if the spec says anything about this).

Toxaris · 12-14-2014, 04:32 AM

Quote:

Originally Posted by Jellby

"display: hidden" is not correct, you are thinking of "visibility: hidden". Be aware that "visibility" is not a required CSS property in the epub2 spec. And note that some readers may ignore links to elements with "display: none" (it makes sense, but I don't know if the spec says anything about this).

You are right, I mean visibility. I haven't come across readers ignoring those links yet, but you are usually right.

Jellby · 12-14-2014, 09:05 AM

Look here

Toxaris · 12-14-2014, 10:42 AM

Ah, but I don't regard iBooks as a valid reader anyway...

rosshalde · 12-14-2014, 12:50 PM

Now I am confused.

<h1 class="hidden">Cover</h1>
.hidden {display: none;}
worked for me. Are you saying that I should not use display, but rather visibility?

Jellby · 12-14-2014, 01:48 PM

No, "display: none" is fine, "display: hidden" would be wrong, choose one:

display: none; support required by the spec, the element takes no space, but links could not work (as far as I know, they work everywhere but in iBooks, but there could be other readers that don't like it).

visibility: hidden; not required by the spec, but probably every decent reader supports this; the element is invisible, but the space is as if the element was there (it is there, just transparent-like).

The class name is arbitrary, you can use class="hidden", class="none", class="neither", class="mycousin"...

Notjohn · 12-14-2014, 07:35 PM

You speak of the Nook, but what happens when you upload that epub to the KDP?

As I understand it, the Kindle version has the SLR set in the actual publishing process (i.e., after it converts and you preview it), so there's absolutely nothing you can do about it.

Is there some reason you worry about Kobo, which in my experience sells very few books, as opposed to Amazon, which sells a lot?

Most of my books open at the cover on Amazon Look Inside, and in the middle of the TOC in the downloaded book. There seems to be no logic to this, however, Other books, identically formatted, display quite differently in the downloaded version (though always at the cover in Look Inside).

12-13-2014, 01:12 AM	#1
rosshalde Zealot Posts: 142 Karma: 10 Join Date: Jun 2014 Device: nook	Using Sigil to get Cover to be default first page I am using Sigil to create a cover. I notice that on NOOK, it default shows the cover. On Kobo it shows the first page that is not the cover. I would like to have as close to a universal solution as possible to get devices/programs to always show the cover when the book is opened as many have nice covers. Does this code look like it will do the job? I took Sigil's code and just added the <h1 title> and added the Cover to the TOC. I think this should work, but if anyone has another suggestion on using Sigil to do this, I would be happy to hear it. <?xml version="1.0" encoding="utf-8" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Cover</title> </head> <body> <div style="text-align: center; padding: 0pt; margin: 0pt;"> <h1 title="Cover"></h1> <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 826 1237" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink"><image height="1237" width="826" xlink:href="../Images/Cover%20Manual%20of%20Prayers.jpg" /></svg> </div> </body> </html>

12-13-2014, 12:02 PM	#5
Toxaris Wizard Posts: 4,520 Karma: 121692313 Join Date: Oct 2009 Location: Heemskerk, NL Device: PRS-T1, Kobo Touch, Kobo Aura	Yup, do the following: Code: <h1 class="hidden">Cover</h1> with class definition: Code: .hidden {display: none;}

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Change Default Format Opened When clicking a cover in cover browser?	phaeren12	Library Management	11	09-19-2014 10:10 PM
a cover "page" in html for Sigil	Notjohn	Sigil	9	07-26-2013 06:39 PM
Sigil adding blank page after cover image	ebookn00b	Sigil	32	06-20-2013 01:44 PM
PRS-T1 Screensaver Cover page ebook adaption (using Sigil?)	Vespasian	Sony Reader	4	01-28-2012 10:54 AM
Disable default cover page MOBI output?	mjcassel	Recipes	3	12-22-2011 12:41 AM

12-13-2014, 02:21 AM	#2
Toxaris Wizard Posts: 4,520 Karma: 121692313 Join Date: Oct 2009 Location: Heemskerk, NL Device: PRS-T1, Kobo Touch, Kobo Aura	You need to set the semantics right. Right-click on both the cover image and the cover page and select 'cover' from the semantics.

12-13-2014, 08:07 AM	#3
rosshalde Zealot Posts: 142 Karma: 10 Join Date: Jun 2014 Device: nook	Maybe, I wasn't clear about the problem. There is no issue getting Sigil to set the particular image as the cover. That is fine. The issue is getting all e-readers/tablets to display the cover as the default opening page when a book is selected. After comparing, the three major e-readers (kindle, nook, kobo), have their own way of choosing the first page to show. Nook shows the cover, kobo doesn't (it shows the first page in the TOC). What I am trying to figure out is how to add the existing cover in Sigil to the TOC. The code, <h1 title="Cover"></h1> after the <div> and before the <svg> seems to have worked, but as I am very inexperienced want to know if that will have any negative consequences or if there is a better way to add the cover image to the TOC.

12-13-2014, 08:45 AM	#4
rosshalde Zealot Posts: 142 Karma: 10 Join Date: Jun 2014 Device: nook	Edit former post. While the code seems to work, it presents another problem. Nook seems to default auto top-margin or top-pad all items labeled <h>. I have noticed this before. Even though the CSS particularly says (0) for all margins/padding with <h>. Any other ideas that can work around a way to use Sigil to essentially demand that readers get to see the cover?

12-13-2014, 10:44 PM	#6
rosshalde Zealot Posts: 142 Karma: 10 Join Date: Jun 2014 Device: nook	Toxaris, Here is the code from the cover of my Sigil doc. Is this what you have in mind? <?xml version="1.0" encoding="utf-8" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Cover</title> <link href="../Styles/book.css" rel="stylesheet" type="text/css" /> </head> <body> <div style="text-align: center; padding: 0pt; margin: 0pt;"> <h1 class="hidden">Cover</h1> <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 1306 1642" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink"><image height="1642" width="1306" xlink:href="../Images/Cover%20A%20Story%20of%20St.%20Catherine%20of%20Al exandria1.jpg" /></svg> </div> </body> </html> This worked. I gave me the best of both worlds. The cover now defaults as the first page when I open the file on Kobo, and it got rid of the pushing down the picture problem on the Nook. Thank you. Now, please explain what the heck we just did. Here is what I think, but please correct me. 1) the <h1> tag allows me to add it to the TOC 2) the hidden class tells the e-reader to provide no space for the <h1> tag which got rid of the Nook pushing down the <h1> What I don't understand is how this <h1> tag point to the pic at all. Usually I would do something like <div class="image"><h1 title="Cover"><image></h1></div> In that case I can see that the <h1> is within the <div> related to the image, but in the case above, the <h1 class="hidden">Cover</h1> seems to be floating in the middle of nowhere and I am unsure how it gets the image to show up. is it just because there is nothing else in the file to point to at all?

12-14-2014, 02:22 AM	#7
Toxaris Wizard Posts: 4,520 Karma: 121692313 Join Date: Oct 2009 Location: Heemskerk, NL Device: PRS-T1, Kobo Touch, Kobo Aura	You are mostly right. In itself the <h1> tag does not point to the pic, but to the position of the tag at the top of the document. The tag is there, although it is not displayed. The big difference between 'display: hidden' and 'display: none' is that with hidden the tag is also not visible, but space is reserved for it with margins and all. So, by using 'display: none' the tag is there but is not taking up any space. If you do not want to use the <h1> tag, that is also possible of course. You can also add a manual a link to the cover in the NCX. It depends on what you want of course and manual additions will be removed if the TOC is auto-generated. You could also use '<h1 class="hidden" title="Cover" />' instead of '<h1 class="hidden">Cover</h1>'. That would also work.

12-14-2014, 09:05 AM	#10
Jellby frumious Bandersnatch Posts: 7,516 Karma: 18512745 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	Look here

12-14-2014, 10:42 AM	#11
Toxaris Wizard Posts: 4,520 Karma: 121692313 Join Date: Oct 2009 Location: Heemskerk, NL Device: PRS-T1, Kobo Touch, Kobo Aura	Ah, but I don't regard iBooks as a valid reader anyway...

12-14-2014, 12:50 PM	#12
rosshalde Zealot Posts: 142 Karma: 10 Join Date: Jun 2014 Device: nook	Now I am confused. <h1 class="hidden">Cover</h1> .hidden {display: none;} worked for me. Are you saying that I should not use display, but rather visibility?

12-14-2014, 01:48 PM	#13
Jellby frumious Bandersnatch Posts: 7,516 Karma: 18512745 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	No, "display: none" is fine, "display: hidden" would be wrong, choose one: display: none; support required by the spec, the element takes no space, but links could not work (as far as I know, they work everywhere but in iBooks, but there could be other readers that don't like it). visibility: hidden; not required by the spec, but probably every decent reader supports this; the element is invisible, but the space is as if the element was there (it is there, just transparent-like). The class name is arbitrary, you can use class="hidden", class="none", class="neither", class="mycousin"...

12-14-2014, 07:35 PM	#14
Notjohn mostly an observer Posts: 1,515 Karma: 987654 Join Date: Dec 2012 Device: Kindle	You speak of the Nook, but what happens when you upload that epub to the KDP? As I understand it, the Kindle version has the SLR set in the actual publishing process (i.e., after it converts and you preview it), so there's absolutely nothing you can do about it. Is there some reason you worry about Kobo, which in my experience sells very few books, as opposed to Amazon, which sells a lot? Most of my books open at the cover on Amazon Look Inside, and in the middle of the TOC in the downloaded book. There seems to be no logic to this, however, Other books, identically formatted, display quite differently in the downloaded version (though always at the cover in Look Inside).

Advert

Advert