epub code snippets (html / css)

[EricDP]

Originally Posted by nrapallo

...it can't break across pages...

Oh, that's a big problem with lengthy TOC or List of Illustrations found in some PG ebooks

Yes, I agree. I struggled with this for over a month when doing the Table of Illustrations for Little Women. I wanted a centered numbered list. No way to do this without auto-margins or a centered inline element, and the inline element won't break. Makes me crazy!!

Also keep in mind that some people choose a really big font.

One last keep in mind: I use inline-table because inline-block is not part of the OPS standard. Even though it works in ADE, I suggest avoiding it. It might not work on some readers, or future readers that are more strict. Oddly, inline-block passes ePubCheck.

[JSWolf]

Originally Posted by nrapallo

It's centering that is not supported by ADE for tables nor images...

How this "bug" can persist is beyond comprehension!

Images can indeed be centered.

<center><img...></img></center>

That works.

[JSWolf]

Originally Posted by Peter Sorotokin

It is certainly not a good idea to use page template just for margins. These should be specified using regular margins on body and @page rule.

I much prefer the margins set in the body style.

[EricDP]

Originally Posted by JSWolf

I much prefer the margins set in the body style.

I had troubles putting top and bottom margin in body. They seem to work better in @page. Maybe because body is for the entire file, whereas page is for the page as rendered by the reader. However, putting left and right margins in @page seemed to indent the ADE page numbers with the text, whereas body margins just indented the text, leaving the ADE page numbers in the margin. That's why I use body for left and right and @page for top and bottom.

Not much of an issue for some readers... nook doesn't show ADE page numbers in the margin - they are at the bottom. Same with Kobo, and I think it's also the same with Sony readers. But some show it in the margins.

[JSWolf]

The new Sony Readers 350, 650, & 950 do not show the ADE page number in the margin any longer.

I do think this is a good thing that newer versions of ADE don't show the page number. But I do think an option to show it/not show it would be good in case you are using the eBook to cite from.

[Pablo]

I am making an ePub version of PG "Sailing alone around the world", by Joshua Slocum.

This book has a lot of images, with a caption below each. The caption can be quite long, sometimes several lines of text.

Some small images are positioned to the left or right, with text around, and the caption below. I've managed to implement this by puting both the image and the caption inside <div></div> tags, but I need to split the caption in several lines, so that it doesn't go beyond the width of the image.

I've tried manually inserting <br /> tags inside the caption text, but that upsets centering and doesn't look as clean as I would like. I'm sure some of the css gurus here have a better solution.....

[Jellby]

You have to specify a fixed width to the <div> enclosing both the image and caption. Sadly, there's no way (that I know of) of passing the image's natural width to the <div>, but you can have something like:

<div class="illustration" id="ill-1">
<img src="image-01.jpg" alt=""/>
<p class="caption">Caption.</p>
</p>

with:

div.illustration { float: left; margin: 1em; }
div#ill-1 { width: 20% } /* or 240 px, or 10em, or whatever */
div.illustration img { max-width: 100% }
p.caption { ... }

It's not perfect, but it might help.

[Pablo]

Thank you very much Jellby!!! I will give it a try.
In the meantime, I found another solution involving tables.

  <table class="ir">
    <tr>
      <td>
        <h3 id="heading_id_25" title="Figure 18"><img height="162" src="../Images/BdIm__18.jpg" title="" width="252" /></h3>
      </td>
    </tr>
    <tr>
      <td width="252">
        <p class="caption">“I suddenly remembered that I could not swim.”</p>
      </td>
    </tr>
  </table>

with

.caption { font-size: 0.9em; font-weight: bold;	text-align: center; text-indent: 0; margin-bottom: 1em;}
.ir { float: right; margin: 3px;}

(This image is floated to the right).

It works in my Sony 505, which has an old implementation of ADE. I wonder if this would work in all readers.

[Amalthia]

Is there a code for just normal wrapped rectangular images in epub? For beginners it may not hurt to show the basics before showing the advanced code like the wrapped non-rectanglar images.

[DaleDe]

the basics are all on the wiki under CSS there is also CSS HowTo for more advanced stuff.

Dale

[Amalthia]

Originally Posted by DaleDe

the basics are all on the wiki under CSS there is also CSS HowTo for more advanced stuff.

Dale

I looked but didn't find it. I tried to use the code provided at the beginning of this thread but the text overlapped the image...

[DaleDe]

Originally Posted by Amalthia

I looked but didn't find it. I tried to use the code provided at the beginning of this thread but the text overlapped the image...

https://wiki.mobileread.com/wiki/CSS#Images is the basic information on images. It covers centering and wrapping text to the left or right of an image. Those are the basic things.

Dale

[Pablo]

Originally Posted by Amalthia

I looked but didn't find it. I tried to use the code provided at the beginning of this thread but the text overlapped the image...

I my experience the best way to learn these things is looking inside well formatted books, for example, Zelda's "Three men in a boat" or any book by Jellby. Feedbook's ePubs are also great.

[GeoffC]

Originally Posted by Pablo

I my experience the best way to learn these things is looking inside well formatted books, for example, Zelda's "Three men in a boat" or any book by Jellby. Feedbook's ePubs are also great.

[Amalthia]

Originally Posted by DaleDe

https://wiki.mobileread.com/wiki/CSS#Images is the basic information on images. It covers centering and wrapping text to the left or right of an image. Those are the basic things.

Dale

Thanks for the link! I'm not sure how I missed seeing this the first time I was at the wiki site.