ebook.com preview is mangled.

[roland1]

Hey there. I published an ebook recently in epub 3 format using SIGIL. After submitting it for distribution, I checked the book's preview at ebooks.com and found that the font was changed to sans serif and there was no leading. It was a disaster to look at — like it had lost part of its css code.

Yet when I went to Kobo or Barnes & Noble, my previews there looked fine. Not spectacular, but closer to what I would expect to see.

Anyone know what might be going on based on your own experiences with online preview engines? (or perhaps that ebook retailer specifically?)

I'm still relatively new to publishing ebooks online, so I'd like to iron out the kinks before submitting more of my work to booksellers. I can't imagine anyone wanting to buy my book with a crappy preview like what I saw.

Thanks for any insights you can offer.

(here's the link for reference purposes
https://www.ebooks.com/en-ca/book/21...aldt-roland-w/

[KevinH]

FWIW, You might want to ask this question in Mobileread's epub forum as it is not specific to Sigil.

[Doitsu]

Originally Posted by roland1

Hey there. I published an ebook recently in epub 3 format using SIGIL. After submitting it for distribution, I checked the book's preview at ebooks.com and found that the font was changed to sans serif and there was no leading. It was a disaster to look at — like it had lost part of its css code.

Some rendering engines are more picky than others.

If you haven't already done so:

• Install my EPUBCheck plugin and check your book with it. (This plugin requires Java.)
• Install my CSSValidator plugin or use the online CSS validator via the Validate with W3C option in Sigil to check your stylesheets.

If either validator reports errors, post them in the EPUB forum.

[Hitch]

Originally Posted by roland1

Hey there. I published an ebook recently in epub 3 format using SIGIL. After submitting it for distribution, I checked the book's preview at ebooks.com and found that the font was changed to sans serif and there was no leading. It was a disaster to look at — like it had lost part of its css code.

Yet when I went to Kobo or Barnes & Noble, my previews there looked fine. Not spectacular, but closer to what I would expect to see.

Anyone know what might be going on based on your own experiences with online preview engines? (or perhaps that ebook retailer specifically?)

I'm still relatively new to publishing ebooks online, so I'd like to iron out the kinks before submitting more of my work to booksellers. I can't imagine anyone wanting to buy my book with a crappy preview like what I saw.

Thanks for any insights you can offer.

(here's the link for reference purposes
https://www.ebooks.com/en-ca/book/21...aldt-roland-w/

Well, yes, that's a bit of a problem.

However, I have to say that it's always best to assume that any careful "typesetting" in eBooks, is going to go awry. I wasn't able to find the ebook on B&N, (paperback, yes; eBook, no) despite several searches; I found it on Kobo, but I've been waiting for some time for the Preview to render with no joy. FYI, 3 other books that I tried to preview on Kobo, previewed immediately, so I suspect that something is hinky with your ebook. That's something you should look into, given my less-than-stellar results at KOBOBooks.

Anyway, back to my initial comment--remember that half of all eReaders out there may cheerfully ignore your CSS. Another quantity may well have users that just don't like your taste (nothing personal), who will override your font choice.

You need to make sure that the book you make will degrade, or even fail, gracefully. If you are using, say, a font size of something like 1.3ems with a forced line height...well. You can find yourself with a renderer, like ebooks.com, that ignores your line-heights but obeys your font-size settings, or even worse.

You say you made this with Sigil--entirely? Did this, maybe, possibly, come from an INDD reflowable ePUB export, first, which you then possibly refined and edited? Is your font, the font you've called, embedded into the eBook?

Hitch

[roland1]

Hi folks. Sorry about the delay. For some reason (???) I did not get notifications of your replies to my post here. I just came here today to see what's what...and here you are.

Given that this is my first ebook offering in a reflowable format, I probably don't know enough of the ins and outs of it, mechanically, to anticipate all that can go wrong. That said, it looked perfect in my iBooks app. on Mohave and in the Readium reader in Sigil in Sierra. I thought...okay, it works and looks pretty good. But apparently, it's not that easy.

I'm formatting another ebook/print book right now and will be up against the same issue. I think I'll have to look into this deeper.

What concerns me is when a distributor doesn't contact you to say "Hey, this looks like crap —*what happened?" I mean, it's going to their clients via their distribution network. And all I knew at the time was that it passed through their screening process. So I thought...okay, I'm set.

Nope. I'm not.

Anyway, thanks for your feedback. Much to digest.

[roland1]

Originally Posted by KevinH

FWIW, You might want to ask this question in Mobileread's epub forum as it is not specific to Sigil.

I posted here because I used SIGIL to create the ebook. Figured I'd start at the source and work my way outward. But I will check elsewhere, too.

[phillipgessert]

Several previews on that site seem to show a sans font, with saner line-height. My guess, the preview trashed your font-family and possibly font-size, but not your line-height; and your chosen line-height is too tight for their fallbacks for the former two. I’d start by unsetting any line-height on p. It’s not that useful to set that anyway, as it’s a common user control.

Edit: just noticed hitch basically already said this above. One of these days I may learn to read.

Distributors don’t alert you to aesthetic issues unless customers complain, because these things are heavily automated so they don’t usually know about them otherwise. Also, previews like this are not really representative of the delivered product, necessarily. Obviously still troublesome in situations like this.

[roland1]

Originally Posted by Doitsu

...
or use the online CSS validator via the Validate with W3C option in Sigil to check your stylesheets.
...

The CSS checks out fine. But I'm seeing it being mangled in a few other online readers now. But it looks fine in iBooks/Calibre/Readium.

P.S. I don't know my way around command line stuff. Was checking out Java 1.8 download — "this turns into that turns into..." instructions made me bail.

I'm a writer and I know my way around html/css. Apparently the online previewers don't, and I guess that's the part I gotta figure out. Reminds me of all the Explorer browser hacks I had to create just to get a website running; still hasn't changed much since 1996 in terms of conforming.

[roland1]

Originally Posted by phillipgessert

Several previews on that site seem to show a sans font, with saner line-height. My guess, the preview trashed your font-family and possibly font-size, but not your line-height; and your chosen line-height is too tight for their fallbacks for the former two. I’d start by unsetting any line-height on p. It’s not that useful to set that anyway, as it’s a common user control.

Thanks for the tip. Below is what I had for the line height. My font declaration is "body {font-family:adobe caslon pro;}" so I suspect this is an issue. I just have it on my machine and figured I'd get it to default to that for people who also use it. (Any thoughts on that?)

Anyway, I'll mess with the line height and see what affect that has on the overall appearance of the text. The problem is that I can't get the text to screw up in my own previews/readers, so I have no way to know if it'll be interpreted properly by any problem website that's messing with my code.

In addition, uploading fixes costs money at places like Ingram, so...
Not like Amazon where you can keep uploading for free all day long.

p {
display:block;
margin-top:0.5em;
margin-bottom:0.75rem;
text-align:justify;
text-indent: 1rem;
line-height:1.25rem;

}

p.noindent {
display:block;
margin-top:.05rem;
margin-bottom:.75rem;
text-align:justify;
text-indent: 0;
}

[roland1]

Originally Posted by Hitch

...
You say you made this with Sigil--entirely? Did this, maybe, possibly, come from an INDD reflowable ePUB export, first, ...
Hitch

No. I just started with blank html/css files. Having built websites, I feel confident starting with blank files. However, sometimes I employ things that I've previously never used, such as "rem" instead of "em" values. And if it looks good on my computer, I often assume (naively, as I now realize)...that it must be okay.

I always hated that part of web development —*having to look at my work on other computers and seeing sudden gaps and font size differences and god knows what Explorer would do to any respectable website design.

[phillipgessert]

p is already a block element, so no need for display:block there. I’d lose it. And also the line-height setting. You can probably lose the text-align too, to be sure folks can set it themselves. Margins, that’s getting more subjective I guess, but you really don’t need them for indented paragraphs.

Simpler the better, best to limit points of failure.

[roland1]

I can already see one conflict, which is the margin-top: one is in em, the other in rem.

My problem is wearing too many hats —*I might make a quick change on the fly and get distracted elsewhere, leaving such discrepancies in place.

Oh well, one step forward at a time...

(Not sure why I put the "display:block" in there. I may have swiped the css from one of my websites during early testing. At least I didn't put a "box-sizing" declaration in there...)

[DNSB]

Originally Posted by roland1

Thanks for the tip. Below is what I had for the line height. My font declaration is "body {font-family:adobe caslon pro;}" so I suspect this is an issue. I just have it on my machine and figured I'd get it to default to that for people who also use it. (Any thoughts on that?)

Anyway, I'll mess with the line height and see what affect that has on the overall appearance of the text. The problem is that I can't get the text to screw up in my own previews/readers, so I have no way to know if it'll be interpreted properly by any problem website that's messing with my code.

In addition, uploading fixes costs money at places like Ingram, so...
Not like Amazon where you can keep uploading for free all day long.

p {
display:block;
margin-top:0.5em;
margin-bottom:0.75rem;
text-align:justify;
text-indent: 1rem;
line-height:1.25rem;

}

p.noindent {
display:block;
margin-top:.05rem;
margin-bottom:.75rem;
text-align:justify;
text-indent: 0;
}

I would lose the font-family declaration unless you are planning to pay for the license to allow embedding Caslon Pro. Below is my current body style:

body {
  display: block;
  font-size: 1em;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  text-indent: 0;
  widows: 1;
  orphans: 1;
}

As for the paragraph styles, why do you have what amounts to a 1.25 em gap between paragraphs and paragraph indents? One or the other, please avoid using both.

I'd simplify the paragraph styles by losing the block, margin top and bottom, and text-align, plus I default the paragraph style to use an indent. I do use padding for a 0.2 em gap between paragraphs. Not necessary but I prefer it.

p {
  margin: 0 0 0 0;
  padding: 0.2em 0 0 0;
  text-indent: 1.5em;
}

p.noindent {
  text-indent: 0;
}

Like quite a few of the posters here, I try to keep my CSS as simple as possible which helps make the content look good on multiple platforms and allows the end user to modify line heights, justification, etc. to their taste

[roland1]

Just reporting back on EPUB checking. I ran tests on both Epubcheck 4.62 inside Sigil and then afterward using Pagina (latest) and both passed without errors. Same with the css (although I can see some issues there myself that need to be fixed). I'm guessing these are based on loose general standards and not severe nitpicking.

Also, thanks DNSB. I think with a few of these posts I should be able to claw my way out of the pit I've dug. Part of the issue...for me, I think...is the fact that I set this up as a print file first with text & paragraph styles and all the font manipulation idiosyncrasies of typesetting taken into consideration. When I began my ebook, I was thinking about how to duplicate that presentation, somehow. I guess the goal is not to do that at all. But how can I give up justify-left to ragged right? It's indecent!

[DNSB]

Originally Posted by roland1

Also, thanks DNSB. I think with a few of these posts I should be able to claw my way out of the pit I've dug. Part of the issue...for me, I think...is the fact that I set this up as a print file first with text & paragraph styles and all the font manipulation idiosyncrasies of typesetting taken into consideration. When I began my ebook, I was thinking about how to duplicate that presentation, somehow. I guess the goal is not to do that at all. But how can I give up justify-left to ragged right? It's indecent!

Whereas I find fully justified text on a device without micro-justification to be revolting so I prefer ragged right. Not forcing my choice on the reader is my preferred choice.

I found giving up some of the lessons I learned from producing printed materials was one of the hardest bits of unlearning I had to do. Realizing that I could not change interletter spaces or interword spaces was a one of those difficult lessons.