Hiding headers in images

[Paddlin]

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.

[pholy]

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.

[Paddlin]

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.

[pholy]

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.

[DMSmillie]

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).

[pepak]

Or put a SVG element inside the H1 element.

[Toxaris]

I would do the latter, the suggestion from pepak.

[Jellby]

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.)

[Paddlin]

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.

[andymillson]

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