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

Go Back   MobileRead Forums > E-Book Formats > ePub

Notices

Reply
 
Thread Tools Search this Thread
Old 01-04-2011, 02:38 PM   #1
Paddlin
Member
Paddlin began at the beginning.
 
Posts: 22
Karma: 10
Join Date: Nov 2010
Device: iPad, but usually not iBooks
Hiding headers in images

Hey everybody,

So I'm designing an ebook, and I decided I wanted to try out using images to introduce sections. So instead of just having some boring text saying "Part I," I'll have a full page image with the words "Part I" and an illustration around it. So I did that, no problems. Now I also wanted Part I to be linked to in the table of contents. So I put an empty h1 tag inside the svg wrapper that went around the image. Here's more or less what it looks like:
<svg xmlns="http://www.w3.org/2000/svg" height="100%" version="1.1" viewBox="0 0 600 860" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
<h1 id="heading_id_2" title="Part I"></h1>

<image height="860" width="600" xlink:href="../Images/PartI.jpg"></image>
</svg>
Now I have an image that's taking up a page and a heading in the right place on the generated TOC. All is well.

But the resulting EPUB won't pass EPUBcheck. The file is perfectly functional, doing everything I want it to do, but since it won't pass, it can't be uploaded to the iBooks store. Anybody have any ideas for other workarounds? The image-in-place-of-text looks really, really nice. I don't want to abandon it.
Paddlin is offline   Reply With Quote
Old 01-04-2011, 03:30 PM   #2
pholy
Booklegger
pholy ought to be getting tired of karma fortunes by now.pholy ought to be getting tired of karma fortunes by now.pholy ought to be getting tired of karma fortunes by now.pholy ought to be getting tired of karma fortunes by now.pholy ought to be getting tired of karma fortunes by now.pholy ought to be getting tired of karma fortunes by now.pholy ought to be getting tired of karma fortunes by now.pholy ought to be getting tired of karma fortunes by now.pholy ought to be getting tired of karma fortunes by now.pholy ought to be getting tired of karma fortunes by now.pholy ought to be getting tired of karma fortunes by now.
 
pholy's Avatar
 
Posts: 1,801
Karma: 7999816
Join Date: Jun 2009
Location: Toronto, Ontario, Canada
Device: BeBook(1 & 2010), PEZ, PRS-505, Kobo BT, PRS-T1, Playbook, Kobo Touch
What error messages are reported? Offhand, I'm guessing that it doesn't like the empty header-1 text, or - almost certainly - it wants some alt-text for the <image>, as it is required.
pholy is offline   Reply With Quote
 
Advertisement
Old 01-04-2011, 05:52 PM   #3
Paddlin
Member
Paddlin began at the beginning.
 
Posts: 22
Karma: 10
Join Date: Nov 2010
Device: iPad, but usually not iBooks
The error message says:
ERROR: .../OEBPS/Text/Part I.xhtml(20): unknown element "h1" from namespace "http://www.w3.org/2000/svg"
The problem isn't the empty h1 tag (or rather, the problem isn't just that it's empty). I've used those before when I want something to display one way in the text and another in the TOC.
Paddlin is offline   Reply With Quote
Old 01-04-2011, 06:36 PM   #4
pholy
Booklegger
pholy ought to be getting tired of karma fortunes by now.pholy ought to be getting tired of karma fortunes by now.pholy ought to be getting tired of karma fortunes by now.pholy ought to be getting tired of karma fortunes by now.pholy ought to be getting tired of karma fortunes by now.pholy ought to be getting tired of karma fortunes by now.pholy ought to be getting tired of karma fortunes by now.pholy ought to be getting tired of karma fortunes by now.pholy ought to be getting tired of karma fortunes by now.pholy ought to be getting tired of karma fortunes by now.pholy ought to be getting tired of karma fortunes by now.
 
pholy's Avatar
 
Posts: 1,801
Karma: 7999816
Join Date: Jun 2009
Location: Toronto, Ontario, Canada
Device: BeBook(1 & 2010), PEZ, PRS-505, Kobo BT, PRS-T1, Playbook, Kobo Touch
Ahh, OK. Have you got { xmlns="http://www.w3.org/1999/xhtml" } (without the {}) anywhere before your <svg fragment> containing the <h1>? Either it's not there, or it is hidden by the xlmns contained in the <svg fragment>. If you look up xml namespaces you should find some help.
pholy is offline   Reply With Quote
Old 01-04-2011, 08:49 PM   #5
DMSmillie
Enquiring Mind
DMSmillie understands when you whisper 'The dog barks at midnight.'DMSmillie understands when you whisper 'The dog barks at midnight.'DMSmillie understands when you whisper 'The dog barks at midnight.'DMSmillie understands when you whisper 'The dog barks at midnight.'DMSmillie understands when you whisper 'The dog barks at midnight.'DMSmillie understands when you whisper 'The dog barks at midnight.'DMSmillie understands when you whisper 'The dog barks at midnight.'DMSmillie understands when you whisper 'The dog barks at midnight.'DMSmillie understands when you whisper 'The dog barks at midnight.'DMSmillie understands when you whisper 'The dog barks at midnight.'DMSmillie understands when you whisper 'The dog barks at midnight.'
 
DMSmillie's Avatar
 
Posts: 562
Karma: 42350
Join Date: Aug 2010
Location: London, UK
Device: Kindle 3 (WiFi)
I'm pretty sure the problem here is that you can't put an H1 element inside an SVG element (see http://www.w3.org/TR/SVG/struct.html#SVGElement). You could try placing the H1 element immediately before the SVG element, or dispense with the H1 and add the ID attribute directly to the SVG element (depending on how you're generating the TOC).
DMSmillie is offline   Reply With Quote
Old 01-05-2011, 02:21 AM   #6
pepak
Guru
pepak has a spectacular aura aboutpepak has a spectacular aura aboutpepak has a spectacular aura aboutpepak has a spectacular aura aboutpepak has a spectacular aura aboutpepak has a spectacular aura aboutpepak has a spectacular aura aboutpepak has a spectacular aura aboutpepak has a spectacular aura aboutpepak has a spectacular aura aboutpepak has a spectacular aura about
 
Posts: 601
Karma: 4150
Join Date: Mar 2008
Device: Sony Reader PRS-505
Or put a SVG element inside the H1 element.
pepak is offline   Reply With Quote
Old 01-05-2011, 06:44 AM   #7
Toxaris
Wizard
Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.
 
Toxaris's Avatar
 
Posts: 4,216
Karma: 109735549
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-300, PRS-T1
I would do the latter, the suggestion from pepak.
Toxaris is offline   Reply With Quote
Old 01-05-2011, 06:58 AM   #8
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 6,997
Karma: 8796439
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
Or put a normal <h1> with text (not empty) outside the SVG, and add "display: none" to its CSS.

Actually, you don't need an <h1> at all, I guess your problem is just that whatever program you are using to generate the TOC (Calibre, Sigil) needs them, but you could write/modify the TOC yourself.

(And you may want to add preserveAspectRatio="xMidYMid meet" to the <svg>, to preserve the aspect ratio of the image.)

Last edited by Jellby; 01-05-2011 at 07:00 AM.
Jellby is offline   Reply With Quote
Old 01-05-2011, 01:28 PM   #9
Paddlin
Member
Paddlin began at the beginning.
 
Posts: 22
Karma: 10
Join Date: Nov 2010
Device: iPad, but usually not iBooks
Thanks everybody for the suggestions. Jellby nailed it. When the display is set to "none," I don't need to worry about extra blank pages, but I can still use both the h1 and svg tags for the desired effect (and I don't need to worry about stuffing tags inside tags).

Thanks for the help, everyone.
Paddlin is offline   Reply With Quote
Old 01-06-2011, 03:40 PM   #10
andymillson
eBook Fan
andymillson began at the beginning.
 
Posts: 12
Karma: 10
Join Date: Jan 2010
Device: Sony PRS600, Apple iPad
WOW!!

I was working on exactly the same thing last night, trying to use full page images as intro to chapters. Am using Sigil, which likes to build its TOC using h1/h2...

The 'display : none' is the perfect answer to what I needed. Another Edit to my stylesheet coming up 8-)

Gotta love these forums



Andy
andymillson 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
Classic Hiding books on the Nook flyash Barnes & Noble NOOK 8 12-27-2010 06:25 PM
Hiding books on your Sony reader flyash Sony Reader 24 06-21-2010 05:18 PM
Renaming or Hiding Titles honeybunny Amazon Kindle 2 05-15-2008 11:46 AM


All times are GMT -4. The time now is 08:22 PM.


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