View Full Version : TOC for picture books??


splinters
08-24-2011, 06:19 PM
Despite having 29 epub books for sale on ibooks for the last year and selling nearly 3000, lulu insist on randomly removing the books and telling me they don't meet the ibook standards.
The latest message says that my books has been removed as it has no table of contents. None of the other 28 books have them as they are simple picture books for children; no chapters, no introductions apart from a copyright notice after the cover. Hell the book is only 20 pages long including the covers etc. All text is embedded into the pictures.
I have tried talking sense to them before but to no avail. So, is there any way of generating a table of contents that will get it back in the ibookstore. Bear in mind there is no text at all that can be edited; each page has a full colour image that has text in the picture.
I am puzzled as I never had to do this before. Any ideas?

Toxaris
08-25-2011, 05:06 AM
What you can do, is just create an internal TOC with the headers. You can hide the headers by using for example:
<h2 title="chapter1" class="hidden">

And then in the stylesheet h2.hidden {
font-size: 1%;
margin: 0;
visibility: hidden;}

With this you can generate a TOC without it being visible.

Jellby
08-25-2011, 05:38 AM
"visibility: hidden" is not supported in the current ePUB spec, it also means that the element takes its natural space (that's why you use font-size: 1%).

It's better to use "display: none", wich completely remove the element from the page.

But anyway, there's no reason why you can't have an image in an <h2>:

<h2 title="chapter1"><img src="..." alt="..." /></h2>

and style the <h2> to behave like an ordinary <p> or <div> in margins, alignment, etc.

Hmm... The above is to have Sigil automatically generate a TOC. But you don't need Sigil for that, you can just edit the NCX file and add all the links you want.

Toxaris
08-25-2011, 08:00 AM
Very true Jellby. I forgot about display:none...

splinters
08-25-2011, 03:43 PM
Thanks so much for the replies guys but I am really lost with that code. I use indesign and export for digital editions. I looked at the epub file and it generates a toc.ncx file. What bits do I need to remove/edit please? This is what I currently have:

<?xml version="1.0"?>
<!DOCTYPE ncx PUBLIC "-//NISO//DTD ncx 2005-1//EN" "http://www.daisy.org/z3986/2005/ncx-2005-1.dtd">
<ncx xmlns="http://www.daisy.org/z3986/2005/ncx/" version="2005-1"><head><meta name="dtb:uid" content="73829fb2-3c8b-821a-c82c-a44ec39df389"/><meta name="dtb:depth" content="1"/><meta name="dtb:totalPageCount" content="0"/><meta name="dtb:maxPageNumber" content="0"/></head><docTitle><text>Iceworld: Reba's New Toy</text></docTitle><navMap><navPoint id="navpoint" playOrder="1"><navLabel><text>iceworldRebaToy</text></navLabel><content src="iceworldRebaToy.xhtml"/></navPoint></navMap></ncx>

No reason they wont pull other books and do the same but I can probably 'reverse engineer' them is someone can fix this one for me.

Jellby
08-25-2011, 04:16 PM
You can add spaces and linebreaks between tags, to make it easier to see. This is where the links are:

<navMap>
<navPoint id="navpoint" playOrder="1">
<navLabel><text>iceworldRebaToy</text></navLabel>
<content src="iceworldRebaToy.xhtml"/>
</navPoint>
</navMap>

It's a <navMap> element that contains a single <navPoint> element. This <navPoint> has a <navLabel> (this is what would be displayed by the reader in the TOC), and a <content> (this is where the link points to.

To solve your problem, you probably want to add more <navPoints> inside the same <navMap>. Follow the same scheme and give to each one a different "id" (it's enough with things like "navpoint1", "navpoint2", etc.), a consecutive playOrder, and make them point to the right place. And use descriptive texts. You can also change the existing <navpoint>. Something like this:

<navMap>
<navPoint id="navpoint1" playOrder="1">
<navLabel><text>Title Page</text></navLabel>
<content src="iceworldRebaToy.xhtml"/>
</navPoint>
<navPoint id="navpoint2" playOrder="2">
<navLabel><text>Chapter 1</text></navLabel>
<content src="iceworldRebaToy.xhtml#ch1"/>
</navPoint>
<navPoint id="navpoint3" playOrder="3">
<navLabel><text>Chapter 2</text></navLabel>
<content src="iceworldRebaToy.xhtml#ch2"/>
</navPoint>
</navMap>

(assuming you have anchors named "ch1" and "ch2" in the xhtml file.)

splinters
08-25-2011, 05:40 PM
A quick look at my xhtml file and I have lots of div references to the jpegs that make each page...cannot see any anchors. Not even sure what an anchor is...I am pretty green when it comes to this stuff.

charleski
08-25-2011, 11:01 PM
It's possible to create the ToC directly within InDesign, but the process is so fiddly it's hard to explain in words (this is why those video tutorial websites make so much money).

But since you already have the ePubs made, it's probably easier to fix this in Sigil. Here I'm going to assume that you've made the ePub simply by placing jpegs into InDesign and exporting it. This will mean that you have a file with lots of
<div class="image">
<p class="para-style-override-1">
<img width="***" height="***" src="images/***" alt="***"/>
</p>
</div>
tags. If your file structure is different then this won't work and you'll need to show us what it looks like.

Open the ePub in Sigil (http://code.google.com/p/sigil/), and select View->Code View from the menu.
Now select Edit->Replace to get the Find/Replace dialog and type in the following exactly:
Find: <div class="image">(.+)</div>
Replace: <h1 title="Chapter X">\1</h1>
Set the checkboxes for Regular Expression and Minimal Matching, then click Replace All. Now go through your file and change all the new parts saying "Chapter X" to some text that describes the image, or just "Chapter 1", etc, Only edit the text inside the quotation marks, don't delete them.

Finally, make sure the Table of Contents pane is showing by clicking View->Table of Contents if needed, then click the 'Generate TOC from Headings' button at the bottom of that pane. It'll show a dialog that shows the new ToC, and click OK.

Before saving, go to the Book Browser pane on the left and open the Images entry. Right-click on the book's cover image and make sure that 'Add Semantics->Cover Image' is checked.

This will produce a ToC that assigns an entry to each image, which should be good enough for Lulu.

Jellby
08-26-2011, 06:35 AM
Or, to follow my method (not implying it's better than charleski's, just so you can learn something), add anchors to the divs, like this:

<div class="image" id="ch1">
<p class="para-style-override-1">
<img width="***" height="***" src="images/***" alt="***"/>
</p>
</div>

The "ch1" in the id matches the "#ch1" used in the NCX, this is what makes it possible to make links pointing here.

splinters
08-26-2011, 07:10 AM
Using the replace function changed no entries. A look at the xhtml file and it is slightly different from the example given:

<?xml version="1.0"?>
<!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>iceworldRebaToy</title>
<link href="../Styles/template.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="iceworldrebatoy">
<div class="image"><img alt="cover.jpg" src="../Images/cover.jpg" /></div>

<div class="image"><img alt="copyright.jpg" src="../Images/copyright.jpg" /></div>

<div class="image"><img alt="intro.jpg" src="../Images/intro.jpg" /></div>

<div class="image"><img alt="Page1.jpg" src="../Images/Page1.jpg" /></div>

<div class="image"><img alt="Page2.jpg" src="../Images/Page2.jpg" /></div>

<div class="image"><img alt="Page3.jpg" src="../Images/Page3.jpg" /></div>

<div class="image"><img alt="Page4.jpg" src="../Images/Page4.jpg" /></div>

<div class="image"><img alt="Page5.jpg" src="../Images/Page5.jpg" /></div>

<div class="image"><img alt="Page6.jpg" src="../Images/Page6.jpg" /></div>

<div class="image"><img alt="Page7.jpg" src="../Images/Page7.jpg" /></div>

<div class="image"><img alt="Page8.jpg" src="../Images/Page8.jpg" /></div>

<div class="image"><img alt="Page9.jpg" src="../Images/Page9.jpg" /></div>

<div class="image"><img alt="Page10.jpg" src="../Images/Page10.jpg" /></div>

<div class="image"><img alt="Page11.jpg" src="../Images/Page11.jpg" /></div>

<div class="image"><img alt="Page12.jpg" src="../Images/Page12.jpg" /></div>

<div class="image"><img alt="Page13.jpg" src="../Images/Page13.jpg" /></div>

<div class="image"><img alt="Page14.jpg" src="../Images/Page14.jpg" /></div>

<div class="image"><img alt="Page15.jpg" src="../Images/Page15.jpg" /></div>

<div class="image"><img alt="Page16.jpg" src="../Images/Page16.jpg" /></div>

<div class="image"><img alt="back.jpg" src="../Images/back.jpg" /></div>
</div>
</body>
</html>

Don't know if that helps at all.

splinters
08-26-2011, 07:26 AM
My mistake, opened replace panel rather than find. Didn't see the checkboxes. i think I may have sorted it now then.

Alas, I ran the epub checker at threepress.org and it returned 39 errors all related to the toc.ncx. No chance of this passing ibooks check then?

Errors included:

ERROR: iceworldRebaToy.epub/OEBPS/toc.ncx(33): assertion failed: different playOrder values for navPoint/navTarget/pageTarget that refer to same target
ERROR: iceworldRebaToy.epub/OEBPS/toc.ncx(25): '': fragment identifier is not defined in 'OEBPS/Text/iceworldRebaToy.xhtml'

splinters
08-26-2011, 07:38 AM
Here is my toc:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE ncx PUBLIC "-//NISO//DTD ncx 2005-1//EN"
"http://www.daisy.org/z3986/2005/ncx-2005-1.dtd">
<ncx xmlns="http://www.daisy.org/z3986/2005/ncx/" version="2005-1">
<head>
<meta name="dtb:uid" content="urn:uuid:73829fb2-3c8b-821a-c82c-a44ec39df389" />
<meta name="dtb:depth" content="1" />
<meta name="dtb:totalPageCount" content="0" />
<meta name="dtb:maxPageNumber" content="0" />
</head>
<docTitle>
<text>Iceworld: Reba's New Toy</text>
</docTitle>
<navMap>
<navPoint id="navPoint-1" playOrder="1">
<navLabel>
<text>Cover</text>
</navLabel>
<content src="Text/iceworldRebaToy.xhtml" />
</navPoint>
<navPoint id="navPoint-2" playOrder="2">
<navLabel>
<text>Copyright</text>
</navLabel>
<content src="Text/iceworldRebaToy.xhtml#" />
</navPoint>
<navPoint id="navPoint-3" playOrder="3">
<navLabel>
<text>Intro</text>
</navLabel>
<content src="Text/iceworldRebaToy.xhtml#" />
</navPoint>
<navPoint id="navPoint-4" playOrder="4">
<navLabel>
<text>Chapter 1</text>
</navLabel>
<content src="Text/iceworldRebaToy.xhtml#" />
</navPoint>
<navPoint id="navPoint-5" playOrder="5">
<navLabel>
<text>Chapter 2</text>
</navLabel>
<content src="Text/iceworldRebaToy.xhtml#" />
</navPoint>
<navPoint id="navPoint-6" playOrder="6">
<navLabel>
<text>Chapter 3</text>
</navLabel>
<content src="Text/iceworldRebaToy.xhtml#" />
</navPoint>
<navPoint id="navPoint-7" playOrder="7">
<navLabel>
<text>Chapter 4</text>
</navLabel>
<content src="Text/iceworldRebaToy.xhtml#" />
</navPoint>
<navPoint id="navPoint-8" playOrder="8">
<navLabel>
<text>Chapter 5</text>
</navLabel>
<content src="Text/iceworldRebaToy.xhtml#" />
</navPoint>
<navPoint id="navPoint-9" playOrder="9">
<navLabel>
<text>Chapter 6</text>
</navLabel>
<content src="Text/iceworldRebaToy.xhtml#" />
</navPoint>
<navPoint id="navPoint-10" playOrder="10">
<navLabel>
<text>Chapter 7</text>
</navLabel>
<content src="Text/iceworldRebaToy.xhtml#" />
</navPoint>
<navPoint id="navPoint-11" playOrder="11">
<navLabel>
<text>Chapter 8</text>
</navLabel>
<content src="Text/iceworldRebaToy.xhtml#" />
</navPoint>
<navPoint id="navPoint-12" playOrder="12">
<navLabel>
<text>Chapter 9</text>
</navLabel>
<content src="Text/iceworldRebaToy.xhtml#" />
</navPoint>
<navPoint id="navPoint-13" playOrder="13">
<navLabel>
<text>Chapter 10</text>
</navLabel>
<content src="Text/iceworldRebaToy.xhtml#" />
</navPoint>
<navPoint id="navPoint-14" playOrder="14">
<navLabel>
<text>Chapter 11</text>
</navLabel>
<content src="Text/iceworldRebaToy.xhtml#" />
</navPoint>
<navPoint id="navPoint-15" playOrder="15">
<navLabel>
<text>Chapter 12</text>
</navLabel>
<content src="Text/iceworldRebaToy.xhtml#" />
</navPoint>
<navPoint id="navPoint-16" playOrder="16">
<navLabel>
<text>Chapter 13</text>
</navLabel>
<content src="Text/iceworldRebaToy.xhtml#" />
</navPoint>
<navPoint id="navPoint-17" playOrder="17">
<navLabel>
<text>Chapter 14</text>
</navLabel>
<content src="Text/iceworldRebaToy.xhtml#" />
</navPoint>
<navPoint id="navPoint-18" playOrder="18">
<navLabel>
<text>Chapter 15</text>
</navLabel>
<content src="Text/iceworldRebaToy.xhtml#" />
</navPoint>
<navPoint id="navPoint-19" playOrder="19">
<navLabel>
<text>Chapter 16</text>
</navLabel>
<content src="Text/iceworldRebaToy.xhtml#" />
</navPoint>
<navPoint id="navPoint-20" playOrder="20">
<navLabel>
<text>Back</text>
</navLabel>
<content src="Text/iceworldRebaToy.xhtml#" />
</navPoint>
</navMap>
</ncx>

splinters
08-26-2011, 07:38 AM
And my xhtml file:
<?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>iceworldRebaToy</title>
<link href="../Styles/template.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="iceworldrebatoy">
<h1 id="heading_id_2" title="Cover"><img alt="cover.jpg" src="../Images/cover.jpg" /></h1>

<h1 id="heading_id_3" title="Copyright"><img alt="copyright.jpg" src="../Images/copyright.jpg" /></h1>

<h1 id="heading_id_4" title="Intro"><img alt="intro.jpg" src="../Images/intro.jpg" /></h1>

<h1 id="heading_id_5" title="Chapter 1"><img alt="Page1.jpg" src="../Images/Page1.jpg" /></h1>

<h1 id="heading_id_6" title="Chapter 2"><img alt="Page2.jpg" src="../Images/Page2.jpg" /></h1>

<h1 id="heading_id_7" title="Chapter 3"><img alt="Page3.jpg" src="../Images/Page3.jpg" /></h1>

<h1 id="heading_id_8" title="Chapter 4"><img alt="Page4.jpg" src="../Images/Page4.jpg" /></h1>

<h1 id="heading_id_9" title="Chapter 5"><img alt="Page5.jpg" src="../Images/Page5.jpg" /></h1>

<h1 id="heading_id_10" title="Chapter 6"><img alt="Page6.jpg" src="../Images/Page6.jpg" /></h1>

<h1 id="heading_id_11" title="Chapter 7"><img alt="Page7.jpg" src="../Images/Page7.jpg" /></h1>

<h1 id="heading_id_12" title="Chapter 8"><img alt="Page8.jpg" src="../Images/Page8.jpg" /></h1>

<h1 id="heading_id_13" title="Chapter 9"><img alt="Page9.jpg" src="../Images/Page9.jpg" /></h1>

<h1 id="heading_id_14" title="Chapter 10"><img alt="Page10.jpg" src="../Images/Page10.jpg" /></h1>

<h1 id="heading_id_15" title="Chapter 11"><img alt="Page11.jpg" src="../Images/Page11.jpg" /></h1>

<h1 id="heading_id_16" title="Chapter 12"><img alt="Page12.jpg" src="../Images/Page12.jpg" /></h1>

<h1 id="heading_id_17" title="Chapter 13"><img alt="Page13.jpg" src="../Images/Page13.jpg" /></h1>

<h1 id="heading_id_18" title="Chapter 14"><img alt="Page14.jpg" src="../Images/Page14.jpg" /></h1>

<h1 id="heading_id_19" title="Chapter 15"><img alt="Page15.jpg" src="../Images/Page15.jpg" /></h1>

<h1 id="heading_id_20" title="Chapter 16"><img alt="Page16.jpg" src="../Images/Page16.jpg" /></h1>

<h1 id="heading_id_21" title="Back"><img alt="back.jpg" src="../Images/back.jpg" /></h1>
</div>
</body>
</html>

Did I do something wrong here? I followed the instructions to the letter.

charleski
08-26-2011, 07:55 AM
Click the 'Generate ToC' button again. You've run into a residual bug that'll be fixed in the next release, but simply regenerating the ToC will fix it.

splinters
08-26-2011, 08:44 AM
Genius, tis now sorted and passed epub check. Will upload a new revision and see if it gets past Lulu's beady (and slightly pedantic) eyes.

Thanks so much and this will come in handy should they 'attack' my other 28 books :-)