svg wrappers for epub covers

[Derek R]

Following my recent post on optimal cover sizes for epubs I have created an epub using an svg wrapper for the first time. I did try giving the cover image an id and put the height and width attributes for it into the stylesheet, but that didn't appear to work. However, with the attributes placed directly in the image tag the cover appeared without a problem in Sigil, and subsequently in iBooks on the iPad.

Is there somewhere on the forum where you can submit epubs for others to check to see if there are any issues on their (other) devices?

[JSWolf]

You can do so in this thread or you could start a new tread.

[Derek R]

Attached is the epub I created using an svg wrapper for the cover (for the first time), if anybody feels inclined to check it out for display issues.

It's only a plain "working" cover, btw.

[JSWolf]

Originally Posted by Derek R

Attached is the epub I created using an svg wrapper for the cover (for the first time), if anybody feels inclined to check it out for display issues.

It's only a plain "working" cover, btw.

Works fine in ADE for Windows. The code used will work in most Readers as they use ADE and any Reading app that supports SVG it will work with as well.

For the text, I'd like to make some suggestions. Lose the space between the paragraphs and put in an indent. It will look much nicer.

[Derek R]

Great! Can't thank you enough. I've nearly traumatized myself in trying to decide whether to space paragraphs or use indents in ebooks, but opted for the former as it's the lazy way out - no need to put in lots of class="noindent" tags. However, in a simple book like the attached it's no great deal and I'll change that forthwith.

[JSWolf]

Originally Posted by Derek R

Great! Can't thank you enough. I've nearly traumatized myself in trying to decide whether to space paragraphs or use indents in ebooks, but opted for the former as it's the lazy way out - no need to put in lots of class="noindent" tags. However, in a simple book like the attached it's no great deal and I'll change that forthwith.

You don't actually need to do it like <p class="classnotneeded">. Just do it like <p> and define p something like this...

p {
margin-top: 0;
margin-bottom: 0;
text-indent: 1.2em
}

Then you'll only need a <p class="noindent"> when you don't want the indent like at the first paragraph of a chapter or the first paragraph after a section break. And any other classes are when you don't want the default <p>.

[Jellby]

Chances are you don't even need class="noindent", if all the instances can be catched with selectors like h2+p or div.scenebreak+p.

[JSWolf]

Originally Posted by Jellby

Chances are you don't even need class="noindent", if all the instances can be catched with selectors like h2+p or div.scenebreak+p.

I would not be using the div where you have it. I'd be using a class with p.

<p class="spacebreak">

.spacebreak {
margin-top: 2em;
text-indent: 0
}

I would also keep the noindent class.

It's just easier reading the code.

[PageLab]

A small suggestion to improve cover display in Adobe Digital Editions: add the following CSS property to the body tag (or to an enclosing DIV) in the cover HTML to prevent automatic column creation.

body {
    oeb-column-number: 1; 
}

This is deprecated in EPUB3, but it works.

[JSWolf]

Originally Posted by PageLab

A small suggestion to improve cover display in Adobe Digital Editions: add the following CSS property to the body tag (or to an enclosing DIV) in the cover HTML to prevent automatic column creation.

body {
    oeb-column-number: 1; 
}

This is deprecated in EPUB3, but it works.

I will definitely have to give that a try. I don't like how I cannot make the ADE window the size I want without getting columns. Thanks for this tip.