Formatting for retailers: please help!

[AS7]

Hello everyone!

I apologize if something like this has been posted before, as it will probably have been. But I'd really appreciate personal guidance with this.

I'm working on editing an epub for professional publishing. I'm using the aggregator Draft2Digital to publish the epub on several retailers at once.

However, on several of those retailers (especially Rakuten/Kobo and Thalia), the output of the previews leaves a lot to be desired.

On Thalia, the typeface displayed becomes the default (Arial) instead of our chosen typeface.
On Rakuten/Kobo, the typeface is preserved, but the chapter heading breaks up (chapter heading on one page, chapter text on another page!). It's even worse with the title page: the author name on one page, the title on another page, etc.

I see that other books manage to look perfectly fine on these retailers.

And when I read the ebook on calibre or when I import it myself into Apple Books, it looks fine.

Could you give me pointers with calibre on how to:
– Make sure the title page elements (book title, author name, publisher name, publisher logo) remain on one page and don't get broken up on several pages?
– Make sure the chapter headings remain together with the chapter text on one page?
– Force the display of our chosen typeface?

Thank you very much in advance for your help.

AS7

[slm]

I have no help to give you, but I should point out that while the software should default to your typeface, not permitting the user to change a typeface is considered bad form for ebooks.

I generally will not buy from a publisher who does that, though I have, from time-to-time used Calibre to remove the offending typeface.

[AS7]

Hello slm,

Thank you for your reply! Sure, I'm aware of that—we don't want to force the display of the chosen typeface at all times. Flexibility is very important in e-readers.

But I see another book preview on the same retailer that displays a nice Times New Roman, for example, whereas ours defaults to Arial.

It seems possible to choose a "priority" or "default" typeface.

Best,

AS7

[Turtle91]

Welcome to MR!

In general, the only way to keep something on the same page as something immediately following is to start a new html page with the first item.
So, each chapter should be in their own html page with the chapter title at the top of the page. Your book title, copyright, and all other backmatter should each be on their own page.

For Fonts, typically do not assign any font for the main body. Leave that for the user to select. You can definitely assign a special font for specific things IN the body like chapter titles, quotes, hand written letters, etc. where the special font helps to tell the story.

There may be a special process to add a different font for a vendor’s Preview page. I would imagine that would be specific to your vendor.

Cheers!

[azimuth]

What's the header tags [h1-h6] CSS setup look like in your epub? Do show your CSS code here (and how the h1-h6 are set on the xhtml page) so people here can suggest a more concise solution, otherwise it's just a rough guess or suggestion tossed into a pot, which may/or may not solve it. The CSS/xhtml code is readily accessible in Calibre in the code editor. Plus, even a snapshot visual can help a lot.

MobileRead Wiki CSS template suggests the following for headings to minimize the chance of it breaking after it.

h1, h2, h3, h4, h5, h6 {
  page-break-after: avoid; /* fallback */
  break-after: avoid;
  ...etc
}

Alternate concept is to group your key items on same page - the book title, author name, publisher name - wrapped in a DIV, add special CSS for it (yet this goes beyond what the CSS h1-h6 default behavior naturally does - and u must do further steps to control the image).

.element { 
  page-break-inside: avoid;
  page-break: avoid;
}
<div class="element">
  <h1>Title</h1>
  <h4>Author</h4>
  <h5>Publisher</h5>
  <p>Short line of text</p>
  <img src="logo.png" class="logo"/>
</div>

[AS7]

Hello Turtle91 and azimuth,

Thank you for your replies!

@Turtle91:

In general, the only way to keep something on the same page as something immediately following is to start a new html page with the first item.
So, each chapter should be in their own html page with the chapter title at the top of the page. Your book title, copyright, and all other backmatter should each be on their own page.

That's already the case as far as I can tell The title page, for example, is in its own .xhtml file. That's what you mean, right?

@azimuth:
You're quite right. You're already pointing me in the right direction though.
I "understand" CSS, but I'm far from a proficient user. I've used a template provider to design the book.
As I understand the logic of your example, I might need to redesign the entirety of the epub's CSS...

Here's the title page, for example:

<?xml version='1.0' encoding='utf-8'?>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Inconnu(e)</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<link rel="stylesheet" type="text/css" href="page_styles.css"/>
</head>
<body class="calibre">
<p class="block_" lang="fr">TITLE LINE ONE<br class="calibre1"/>TITLE LINE TWO</p>
<p class="block_1" lang="fr"><img src="logo.png" alt="Logo" class="calibre2"/></p>
<p class="block_2">AUTHOR NAME</p>
<p class="block_3" id="calibre_pb_0">PUBLISHER NAME</p>
</body></html>

As you can see, there are no <h> tags, the entire thing is structured around <blocks>.
And in stylesheet.css, every <block> is defined, for example:

.block_ {
display: block;
font-size: 2em;
letter-spacing: 0.5pt;
line-height: 1.1;
text-align: center;
margin: 40pt 0 0;
padding: 0;
}

I've checked out the page you're referring to, the MobileRead Wiki CSS template. I suppose this is the best practice.

Still, EPUB-Checker returns no errors and the file displays well on Apple Books, Kindle and a number of other readers.

So at this point, I'm unsure what to do. I could try to insert page-break-after:avoid;, into the blocks, I suppose, and see if that fixes the specific issue. How bad is it to use <blocks> instead of <h>?

Thank you,

AS7

[Turtle91]

It’s not necessarily 'bad' to use 'BLOCK_' it is just more challenging to figure out what the class is trying to do by just reading the name. It is 'better' to give it a descriptive name - it makes it much easier when you are editing your css for style changes. For example:

Instead of:   Use:
block_1       title-img (and no nead to define a language(French) for an image file…)
block_2       author
block_3       publisher

Don’t use <body class=“calibre">, define a 'minimal' body style (only things you absolutely MUST have - I don’t use anything) in your css like this: body {blah blah blah}

I wouldn’t define line-height at all, and certainly never use a fixed size (points - pt) to define margins. Use a relative size, like em so that it scales appropriately with the font size the user chooses.

Likewise I’d be very careful when you use letter spacing. Just use a good font and rely on the font’s properties. If you do use it, again use em instead of pt otherwise it is useless when the user changes font size.

I can guarantee others will pop in with their recommendations - just make sure you try hard to differentiate between real problems and just personal preference.

Cheers!

[Turtle91]

Sorry, to answer your question, <h> tags are semantics and mark when your document has a heading. You can use css to style the heading however you wish it to look, but there are other software programs that rely on your document being correctly, semantically, marked - like accessibility programs.

A paragraph that is styled using css classes does not convey any special meaning to those programs.

Instead of:                  Use:
<p class="booktitle">        <h1>
<p class="chaptertitle">     <h2>
<p class="normalparagraph">  <p>
<p class="scenebreak">       <hr/>

[azimuth]

Backtracking a bit...since you're using D2D.
The original file MS Word doc/docx is likely the source of the "block_" type css formatting code. I test exported an epub from D2D and it didn't have any of this particular code in it (it has other basic css styling).

See comments here on "block_":
MR post
The D2D help info clarifies some other key points you are asking about:
D2D help page

As per D2D website (this applies only to Word/doc/docx/odt importation into D2D):

"Font Face and Family: Unfortunately, you can’t change either the font face or the font family. All ePubs generated by Draft2Digital will appear in the system default Serif font for any given device."

Per D2D website about imported pre-designed epubs:

"ePub files will more or less stay ‘as is’, format-wise, but you can include our automated end matter if you choose."

Thus if you import an epub directly into D2D they will supposedly NOT change any of the CSS, you get an end result as you want (custom font-face). That would explain why you see other marketed ebooks on D2D keep their specialized font styling.

Several choices you'll want to make:
1. continue and finish building epub with D2D template / styling and anticipate it's sometimes odd variable end results and use it as is [not ideal].
2. revise/refine your doc/docx file styles further, then import again into D2D [still not ideal].
3. rebuild/redesign the epub in other software such as Calibre etc, then import it into D2D as an entirely pre-designed epub (set to your exact CSS code expectations + font choices). Note: basic epub creation in Calibre/Jutoh can be done without needing to know coding (though its certainly helpful).

So, there is no need to jump into the 'page-break-after' discussion while you are using the D2D software + template. Ideally, try epub creation via other software besides D2D.

Most persons at MR utilize some kind of controllable software (either freeware like Calibre, or paid software [like jutoh/etc] - to cut their epubs into a final quality state).

[Quoth]

Try using Smashwords (part of D2D), which distributes to Barnes & Noble, Apple, Kobo and others. Upload same epub as for Amazon KDP and Google Playbooks.

Your MS Word source must not be using proper paragraph styles. Your headings should just work if the first thing in a file. Calibre can split on headings. No 'page-break-<whatever>' directives of any kind are needed.

Don't use "block".

Don't use D2D to make an epub, or any online service. Use Calibre, or if needing a lot of editing and maths use Sigil. Both better than InDesign or Vellum for epub.

I switched to LO Writer (edit odt, extra Save As in docx) from Word a few years ago and the conversion by Calibre to epub needs little editing.

Don't upload Word files. If you want D2D/Smashwords to sell a Kindle file direct then have Calibre convert an epub to dual mobi (note this is the only use for such a thing apart from maybe samples on your own site). Only directly deal with Amazon and Google and upload epub to them. Amazon does their own epub to everything kindle conversion and they recommend epub.

Paper publishing should use uploaded PDFs exported direct from a differently styled Word or Writer template direct to PDF.

[AS7]

Hello all,

Thank you so much for your guidance, I'm processing all your indications.

To clarify, this is how the book was formed:

---

• We've bought a professional template from an online provider, for use with InDesign and Word.
• The InDesign template, for the paper book, works well and the paper book looks good.
• However, I wasn't able to generate a proper .epub from the InDesign template.
• So I've used the Word template to generate the .epub with Calibre. (Like you guessed @azimuth!)

• In other words, I haven't used Smashwords or Draft2Digital's templates.
• The book is generated from a third party .docx template, making heavy use of Word's "Styles", converted to .epub with Calibre.
• I've been using EPUB-Checker and other readers to validate before uploading.

• So I'm only using the aggregator Draft2Digital for distribution, not for formatting.
• Now, to solve the issue with the Kobo preview, I've pulled the book from Kobo (through D2D) and will try to publish directly through Kobo with a Kobo account. That way, I'll (hopefully) be able to test and troubleshoot the preview in private!

• But you're showing me that there are deeper issues with the .epub's formatting, so I'll try to address those first.

---

@Turtle91
Ah yes, not using standard <h> tags is bad for accessibility... I've read this before for websites... That's not good, accessibility matters to us. Thank you for pointing this out!

Don’t use <body class=“calibre">, define a 'minimal' body style (only things you absolutely MUST have - I don’t use anything) in your css like this: body {blah blah blah}

... Could you clarify what <body class=“calibre"> is supposed to do then? It seems to be there by default...
What are some of those "things" you're referring to that I would want in a <body class>?
Is it a way to apply modifications in bulk? Can I just have <p class> instead? Or does it replace <p class>?
I've googled <body class> a bit, but remain confused for now...

I wouldn’t define line-height at all, and certainly never use a fixed size (points - pt) to define margins. Use a relative size, like em so that it scales appropriately with the font size the user chooses.
Likewise I’d be very careful when you use letter spacing. Just use a good font and rely on the font’s properties. If you do use it, again use em instead of pt otherwise it is useless when the user changes font size.

I'm taking note!

@azimuth
Right! I'll take option 3!

@Quoth
OK, that works. I've heard of other programs, like Sigil and Jutoh, but I've never used them. Would they do anything Calibre can't do?
As I've exposed above, it's a Word file converted into .epub with Calibre. I hoped (still hope) this would allow me to generate a professional ebook.

@everyone
1° I probably need to take a comprehensive course in CSS formatting specifically for ebooks. Would you have recommendations? Or should I just read the Wiki?
2° I'll list all the ebook's <blocks> (_blocks? .blocks?). Then I will convert them into... <h> and <p>?
3° ... Then I'll use Calibre's search and replace function to convert each <block> and </block> into the proper tags.
4° Then the book will be broken, and I'll come back here to panic about it.

Calibre's Editor seems both straightforward and powerful. My issue is the CSS code itself (i.e. how to edit it properly). I'll take some time to examine this more closely, then I think I'd need to get back to this thread this weekend with more specific questions...

AS7

[Quoth]

If you use Word (or LO Writer) paragraph styles correctly with a docx to Calibre there will be no blocks. You'll have everything just about perfect except for image size css. Hx, p etc. Headings in Word/Writer only differ from other paragraph styles by having a heading level of 1, 2 etc. Any style not a heading, even if it looks like one, has no heading level and generates <p class="whatever"> instead of <h1 class="mychapter">

Correctly used there is one matching CSS for each source style of of heading, paragraph or image.

Hint only use one default page size with no line height or spacing defined or registration on any style. No headings, footers etc.

Don't try and duplicate paper.

You should only need to edit image size css (if that), nothing else. If you are needing to edit CSS for anything other than an image you are not using Word paragraph styles properly.

Ebooks use a subset of web css & HTML, so any course will mislead you. Learn to use MS Word, or maybe LO Writer.

[Turtle91]

Originally Posted by AS7

... Could you clarify what <body class=“calibre"> is supposed to do then? It seems to be there by default...
What are some of those "things" you're referring to that I would want in a <body class>?
Is it a way to apply modifications in bulk? Can I just have <p class> instead? Or does it replace <p class>?
I've googled <body class> a bit, but remain confused for now...

<body class="calibre"> is a default that Calibre uses on its conversions. I assume it is there to make a standard canvas that it can apply the other css elements it converts. I would think it would be very difficult to create an automated software that responded correctly to all the different documents dynamically...without making mistakes...without having a default canvas. I am sure there are people here (like BetterRed or Kovid himself) that know better the inner workings of Calibre's conversion requirements. They may be able to better answer 'why' it has that default.

You could use a body class if you wanted to apply some style to the document itself...instead of the elements ON the document; such as a background color, or background image. I shudder to think of doing that to an ebook on general principle, but I admit to having done it where I had to force a dark background with light colored font. That was the only way I could accommodate different font colors which the author (effectively) used to help tell the story.

98.7% of statistics are made up on the spot... but it also happens to indicate the portion of paragraphs in a standard ebook that are your normal everyday paragraph containing text. I use a plain <p> to indicate those paragraphs and style them using: p {yadda yadda}

I use classes to designate special styling only. That tends to get rid of a lot of code bloat...as well as make it easier when editing.

<body>
<h3>Chapter Title</h3>
  <p class="first">This is the first paragraph in the chapter with a 
  drop-cap or other special styling.</p>
  <p>This is a normal paragraph with normal text.</p>
  <p>This is a normal paragraph with normal text.</p>
  <p>This is a normal paragraph with normal text.</p>
  <p class="red">This is a normal paragraph with red text.</p>
  <p>This is a normal paragraph with normal text.</p>
  <p>This is a normal paragraph with normal text.</p>
  <hr class="scenebreak"/>
  <p>This is a normal paragraph with normal text.</p>
  <p>This is a normal paragraph with an <span class="u">underlined</span> word.</p>
  <p>This is a normal paragraph with normal text.</p>
  <p>This is a normal paragraph with normal text.</p>
  <p>This is a normal paragraph with normal text.</p>
  <p>This is a normal paragraph with normal text.</p>
</body>

Doing it that way makes it easier (and more logical) to set up your style sheet. Any changes you want to make to the style of your book are made just once, and it gets applied to the whole book (eg. first paragraph styling).

body    {yadda yadda}
p       {basic styling for a basic paragraph}
p.red   {color:red}
p.first {styling for the first paragraph in the chapter}

span.u  {text-decoration:underline}

hr                  {margin:1em 0; border:none; text-align:center; font-size:.7em}
hr.scenebreak:after {content:'◆◆◆◆◆'}

[JSWolf]

Originally Posted by AS7

.block_ {
display: block;
font-size: 2em;
letter-spacing: 0.5pt;
line-height: 1.1;
text-align: center;
margin: 40pt 0 0;
padding: 0;
}

There are some problems with the CSS. YOu do not want ot use line-height at all as it makes some Readers such as Kobo not work properly with the line height setting. Also, you want to spell out the margins in full as some B&N nook Readers do not like the margin shorthand. Also, if you are using a center, you also need a text indent of 0. And finally, you do not use pt in margins. You use ems. And finally, the padding of 0 is not needed.

.block_ {
display: block;
font-size: 2em;
letter-spacing: 0.5pt;
text-align: center;
text-indent: 0;
margin-top: 2em;
margin-right; 0;
margin-bottom: 2em;
margin-left: 0;
}

[Jellby]

Originally Posted by JSWolf

And finally, you do not use pt in margins. You use ems.

Unless you want the margins to have a fixed size, and not to depend on the font size (which I agree won't typically be the case here).

And finally, the padding of 0 is not needed.

Depends on what the "block" class will be applied to. You need padding 0 for the same reason you need text-indent 0: to cancel possibly inherited values.