View Full Version : Joining image and title


roger64
12-02-2012, 08:51 PM
Hi

I am preparing an illustrated book. I'd like to join a title and a full page image, so that the title appears on the TOC but the reader can only see the image.

Here is the current code I would like to improve. If somebody was so kind as to give me the answer... Now I have the title on one page and the image on the next page... which is not the intended effect.


<body >
<h2 id="toc0">LA LIONNE</h2>

<div style="text-align:center"><img alt="images1" class="frameGraphics" id="images1graphic" src="../Images/image003.jpg" style="width:100%" /></div>
</body>

theducks
12-02-2012, 08:59 PM
This is a EPUB question. Moving to EPUB

Aerys
12-02-2012, 10:11 PM
Use a CSS style "visibility:hidden" for the h2 tag. Please note that the "title" is hidden but it's still occupying a space in the page.

<body >
<h2 id="toc0" style="visibility:hidden">LA LIONNE</h2>

<div style="text-align:center"><img alt="images1" class="frameGraphics" id="images1graphic" src="../Images/image003.jpg" style="width:100%" /></div>
</body>

Another way, is just to remove the "title" altogether and put the anchor "id" of the TOC to the DIV.

roger64
12-02-2012, 10:53 PM
@Aeris

Thank you for your reply.

I did not know visibillity:hidden. Looking on the web about this expression, I could also find display:none which seems to be more convenient because I wish to use a full-page image. As all my h2 titles are going to be replaced by images, I just added display:none to the h2 CSS and it seems to do what I wished.

:thanks:

GrannyGrump
12-03-2012, 12:02 AM
You could also try this way, putting the Chapter Name in a "title" and leaving the <h> tags empty.
I've used it sometimes when using an image for a chapter heading. I use Sigil, and it will generate the automatic TOC using the "title". Also useful to use this if you want the TOC to have different wording than the page display, you can put a different name in the <h> tags.

<body >
<h2 id="toc0" title="LA LIONNE"></h2>

<div style="text-align:center"><img alt="images1" class="frameGraphics" id="images1graphic" src="../Images/image003.jpg" style="width:100%" /></div>
</body>

Jellby
12-03-2012, 05:02 AM
Also, "visibility: hidden" is not suported by the ePub 2.1 spec, so you shouldn't rely on it (even when that's what you need).

By the way, you don't need an <h2> at all if you don't want it displayed. You may want it to get other tools to automatically create the TOC, but you could always create (or edit) the TOC manually inserting the titles where you need them.

mrmikel
12-03-2012, 05:53 AM
Roger64,

Be sure and check out anything that doesn't display on the Reader Library or your 505 not just in Sigil or Calibre. As was pointed out, it doesn't display, but it can leave a hole where it would be. On your title page, it might not matter at all, but in text I have found it very annoying, where pages numbers are invisible, but the space where they would have been is not, with a gap like this in the middle of a line.

roger64
12-03-2012, 06:54 AM
Thanks for your comments.

I added to the h2 CSS of the EPUB the argument display:none

- The TOC is displayed where the TOC should be.
- The h2 titles are not displayed on the page and leave no hole. They just disappear into thin air.

Just perfect. But... when I convert this EPUB to PDF using Prince, I have some display problems (no TOC, faulty display for images). So, even if the above solution is handy for the EPUB, I still need to find another one acceptable for Prince.

To come back to my first idea, is it possible to enhance the div containing the image with some id tag so that it can be displayed in the TOC?

DiapDealer
12-03-2012, 07:12 AM
To come back to my first idea, is it possible to enhance the div containing the image with some id tag so that it can be displayed in the TOC?
You don't need to "enhance" any of the (x)html or css to display whatever your heart desires in the ToC. As Jellby already mentioned earlier; simply modify the toc.ncx file manually. All the h tag and "visibility: none" trickery is only necessary when you want to generate a ToC automatically using other tools.

roger64
12-03-2012, 07:47 AM
You don't need to "enhance" any of the (x)html or css to display whatever your heart desires in the ToC. As Jellby already mentioned earlier; simply modify the toc.ncx file manually. All the h tag and "visibility: none" trickery is only necessary when you want to generate a ToC automatically using other tools.

OK :) It will be a good opportunity to learn something new because, up to now, I used, as you say, "other tools" to generate automatically a ToC and never bothered about it.

Jellby
12-03-2012, 11:00 AM
But if your problem is conversion with Prince (and my epubutils.py tool), fiddling with the NCX TOC won't help, because the PDF TOC (aka bookmarks) is generated from the XHTML through CSS.

(I'll have a look at the sample you sent me by PM.)

Jellby
12-03-2012, 11:27 AM
By the way, in that case something like this could be what you need:

<h2 title="LA LIONNE">
<img alt="" class="frameGraphics" src="../Images/image003.jpg" />
</h2>

Just set the CSS for <h2> to center alignment and so on... Sigil will create the NCX TOC file for you. And you can make Prince do the same for the PDF.