margin-top with page-break-before

[canpolat]

I'm working on an ePub. it has many (very) short stories in it, so, I gather 5-10 of them in a single html file. Then I use page-break-before:always to make every story start in a new page.

{
h1 {page-break-before:always}
}

This works quite OK.

I also want to have some space before the headings. But when I add a margin-top property to h1, it doesn't seem to take effect. The heading starts at the very beginning of the page no matter how big a margin I set in the CSS.

I suppose I'm missing something. Any ideas?

[Toxaris]

You are not missing anything. The specifications allow readers to ignore margin-top after a page-break-before/after.
You are better of placing each story in a separate HTML file. Easier to maintain as well in my opinion.

[canpolat]

Originally Posted by Toxaris

You are not missing anything. The specifications allow readers to ignore margin-top after a page-break-before/after.
You are better of placing each story in a separate HTML file. Easier to maintain as well in my opinion.

Thank you for the response Toxaris. I suspected that, but couldn't find it. Breaking the files to small HTML files may result in hundreds of HTML files and it may be intimidating for some of the tools (I remember Sigil taking very long time when saving the smallest of a change with such an ePub).

I don't have my tools installed on this PC so I cannot try this, but here is another idea. What if I add another tag in front of the h1 tags?

<hr class="page-break">
<h1>My Title</h1>

with

.page-break {
visibility:hidden;
page-break-before:always
}

[Jellby]

Originally Posted by canpolat

.page-break {
visibility:hidden;
page-break-before:always
}

"visibility" is not a required property in the ePub spec. I use simply an empty <div>:

<div class="pagebreak" />
<h1>My Title</h1>

div.pagebreak {
  height: 0;
  margin: 0;
  padding: 0;
  page-break-before: always;
}

(or <div class="pagebreak">&nbsp;</div> if the reader doesn't like empty elements).

Another solution is using padding instead of margin for the <h1> (if you don't have background or borders): unlike margin, padding is not discarded after a forced pagebreak.

[canpolat]

Originally Posted by Jellby

Another solution is using padding instead of margin for the <h1> (if you don't have background or borders): unlike margin, padding is not discarded after a forced pagebreak.

I actually tried using "padding", and at least ADE discarded it (I didn't try with any other reader since it's the de facto standard). But I will try the solution with "div". Thanks

[Jellby]

Originally Posted by canpolat

I actually tried using "padding", and at least ADE discarded it

Hmm... I should have written "should not be discarded". But anyway, I think I tried padding at some point and it worked, are you sure you don't have some other error in the CSS?

[canpolat]

Originally Posted by Jellby

Hmm... I should have written "should not be discarded". But anyway, I think I tried padding at some point and it worked, are you sure you don't have some other error in the CSS?

Now I did a quick test with a CSS that only contains the following lines:

h1{
  page-break-before:always;
  padding-top: 5em;
}

And ADE happily obeyed the padding Perhaps there is something else in the other CSS file. Thank you for the suggestions!

[Toxaris]

BTW, the latest versions of Sigil can handle multiple files easily. Hundreds of files is not an issue.

[theducks]

Just remember.
Sigil WILL flatten any folder structure. All file NAMES must be unique as the path is not considered part of the name. All duplicate name will get overwritten.

[canpolat]

@Toxaris, @theducks: Thanks for sharing that info. Since padding seems to work, I think I'll stick to that. It eases the process for me.

Sigil WILL flatten any folder structure. All file NAMES must be unique as the path is not considered part of the name. All duplicate name will get overwritten.

Is this according to the ePub standard, or just the way Sigil handles things?

[theducks]

Originally Posted by canpolat

@Toxaris, @theducks: Thanks for sharing that info. Since padding seems to work, I think I'll stick to that. It eases the process for me.


Is this according to the ePub standard, or just the way Sigil handles things?

Just the way Sigil does it for EPUB2.

Puts each TYPE of file into folders:
Fonts (TTF,OTF)
Text (HTML,XHTML)
Styles (CSS)
Images (GIF, JPEG,PNG)

there are a few other folders in later versions for EPUB3/unknown files