Trying to add space in EPUB document

[BrendaGreally]

Hi

I think what I'm trying to do is probably quite simple but I can't for the life of me figure it out. In InDesign CC 2020 I need to add space above the text on an ebook title page, and also I need to add some space above each of the chapter headings.

For the title page, I've tried Object Export Options > Custom Layouts > Space Before but no matter what value I input it has no effect - the text still appears at the top of the page on the exported EPUB.

For the space at the start of each chapter, I've tried adding things in the paragraph style but it seems lots of information gets discarded on export to EPUB.

Hopefully someone has a solution!

[JSWolf]

I don't know the solution using InDesign. But there is a solution that requires editing the CSS. Find the class that defines how the chapter title is displayed and add in code like...

margin-top: 1em;

. That will add 1em of space to the top of the chapter title.

You can use Sigil to do this and you'll be able to see the result before saving.

[BrendaGreally]

Originally Posted by JSWolf

I don't know the solution using InDesign. But there is a solution that requires editing the CSS. Find the class that defines how the chapter title is displayed and add in code like...

margin-top: 1em;

. That will add 1em of space to the top of the chapter title.

You can use Sigil to do this and you'll be able to see the result before saving.

Thanks for this - I'm not very confident with editing CSS so I'd prefer a solution within InDesign if such a thing is possible. If it's not, I'll give it a try!

[Notjohn]

You may find that InDesign epubs have to be fixed in Sigil anyhow, so you might as well learn to do it in the purpose-built epub software rather in ID.

[JSWolf]

If you learn how to do this in CSS, you can learn more and you can also learn HTML. This way, you can make any changes to the ePub you want/need that you cannot do easily with InDesign.

To be honest, I've seen the code for a lot of ePub that was made with InDesign and it's not as good as it could be. The problem with some eBooks done in InDesign is that they are laid out for print and then exported as ePub and that in;t always optimal. Fonts are one thing that is an issue with InDesign when exporting to ePub.

Learn HTML/CSS and you can do what you want/need to do. Remember, you can always ask for help on MR.

[Hitch]

Originally Posted by BrendaGreally

Thanks for this - I'm not very confident with editing CSS so I'd prefer a solution within InDesign if such a thing is possible. If it's not, I'll give it a try!

Well, there's more to it than that. And no, you can't fix it inside of InDesign. Moreover, as Notjohn says, you really CANNOT upload a direct-from-INDD ePUB of the reflowable type, to any vendor and have it pass intake and work. It simply won't, so you're going to have to get your hands into the ebooks a bit.

The solution that Wolfie mentioned will work; but you can also use the simple expedient of ensuring that each chapter is its own HTML file and then use margin-top to ensure that you get the spacing that you want.

I hope that helps. Don't be afraid of the code. It just looks scary.

Hitch

[JSWolf]

I think for the average novel, that HTML/CSS is easier to learn then it is to learn to use InDesign. It's been a long time since I've used InDesign. This was pre-ePub and I was doing some complex layout to be printed.

[JSWolf]

Have a look at the following code for a chapter title.

HTML code

<h2>Chapter One</h2>

CSS code

h2 {
  font-size; large;
  margin-top: 1em;
  margin-bottom: 1em;
  text-align: center;
  text-indent: 0;
  font-weight: bold;
}

That defines a chapter header of Chapter One that's bold, center, font size is large, and has a 1em space between the top and bottom of the chapter title.

See how simple it is?

[Quoth]

Indesign was meant for paper (and by implication PDFs which really are only proofs of paper). The epub support is a fudge and produces ghastly stuff.

Far better to use a Wordprocessor. Use Styles. Totally trivial to set top margin, left, right, first line and bottom.

Then Sigil or Calibre to convert a docx to epub.

Then the above example is totally automatic converting docx to epub if the margins are set in pt. The convention is 12pt = 1em. Almost all rendering engines use that if the CSS is in points.

[JSWolf]

Originally Posted by Quoth

Indesign was meant for paper (and by implication PDFs which really are only proofs of paper). The epub support is a fudge and produces ghastly stuff.

Far better to use a Wordprocessor. Use Styles. Totally trivial to set top margin, left, right, first line and bottom.

Then Sigil or Calibre to convert a docx to epub.

Then the above example is totally automatic converting docx to epub if the margins are set in pt. The convention is 12pt = 1em. Almost all rendering engines use that if the CSS is in points.

In some cases, it's easier to output a text version of the book and edit that. If the formatting is not too complex, it will be easy enough to edit that to be well formatted ePub.

What I don't get is why publishers try to duplicate the look of the pBook but still manage to botch the eBook formatting. For example, paragraph spaces. They don't exist in the pBook and left justify does not exist in the pBook.

[Turtle91]

Originally Posted by JSWolf

Have a look at the following code for a chapter title.

HTML code

<h2 class="chapter">Chapter One</h2>

CSS code

h2 {
  font-size; large;
  margin-top: 1em;
  margin-bottom: 1em;
  text-align: center;
  text-indent: 0;
  font-weight: bold;
}

That defines a chapter header of Chapter One that's bold, center, font size is large, and has a 1em space between the top and bottom of the chapter title.

See how simple it is?

Exactly! CSS/HTML are very simple to learn and there are very good tutorials for the new coder to get things going.


I would only make one small correction to JSWolf's example - with that CSS you do not have to define a 'class="chapter" ' - the plain <h2> tag will work.

<h2>Chapter One</h2>


h2 {yadda, yadda}

[JSWolf]

Originally Posted by Turtle91

Exactly! CSS/HTML are very simple to learn and there are very good tutorials for the new coder to get things going.


I would only make one small correction to JSWolf's example - with that CSS you do not have to define a 'class="chapter" ' - the plain <h2> tag will work.

<h2>Chapter One</h2>


h2 {yadda, yadda}

We both made a similar mistake here. I made a mistake in the HTML code and you made a mistake in the CSS code. I did just define H2 so the class in the HTML code wasn't needed. I've edited my post so it's not correct. Can you do the same in your quote of my post?

[Turtle91]

If you are referring to "yadda, yadda" as the CSS mistake, then it's not a mistake. It is a Seinfeld reference meaning 'I don't need to go into all the details here because you get what I'm trying to say'

If that is NOT what you are talking about, please elucidate.



...and yes, I know.... quoting Seinfeld is probably showing my age a little too much

[JSWolf]

Originally Posted by Turtle91

If you are referring to "yadda, yadda" as the CSS mistake, then it's not a mistake. It is a Seinfeld reference meaning 'I don't need to go into all the details here because you get what I'm trying to say'

If that is NOT what you are talking about, please elucidate.



...and yes, I know.... quoting Seinfeld is probably showing my age a little too much

Look at my CSS code. It's defining h2. It is not defining .chapter. My mistake was in the HTML code <h2 class="chapter"> should not have had the class. You didn't read the CSS correctly to see that the mistake was in the HTML.

[Turtle91]

Originally Posted by JSWolf

Look at my CSS code. It's defining h2. It is not defining .chapter. My mistake was in the HTML code <h2 class="chapter"> should not have had the class. You didn't read the CSS correctly to see that the mistake was in the HTML.

I see what you are saying. I didn't misread your CSS. I am agreeing with you that your mistake was in the HTML...I just didn't see a point in repeating the CSS again...thus the "yadda, yadda" - you can style the CSS however you want and it wasn't the point of my post.

Anyway...I think we