My first EPUB! Need advice on best practices

[fluoresce]

Hi. I'm new here.

I'm in the process of creating my first EPUB using Sigil, and I have to say that I am thoroughly enjoying the process!

I used to construct XHTML 1.0 Strict and CSS2 websites, so constructing an EPUB is coming quite naturally to me.

I just conducted a Web search for a CSS template to use in my EPUB. I found one that recommends this statement:

@page {margin: 10px;}

Apparently, this statement adds margins around every page to stop Adobe Digital Editions' line numbers from being superimposed over the content.

In other words, this is a fix for a known problem with Adobe Digital Editions.

Questions

1. Is this statement still necessary?
2. Are there any other "fixes" or best practices that I should be following to ensure maximal compatibility?

[Sunlite]

There is a quite comprehensive article about ePub in the wiki.

https://wiki.mobileread.com/wiki/EPUB

The article also contains tips of the special needs for all of the big name reading systems including ADE.

[JSWolf]

Most Readers that use ADE don't have the page numbers in the right margin or there is an option to turn them off.

Best practice is to allow the default values where possible such as margins, line-height, & font size. Current Readers allow for margin changes, line-height, and font size. So you really don't need to add in your own values. Plus, @page causes issues with ADE and the right hand page number in that it move the page number from the right side based on your @page. Oh and don't left justify. It looks awful. One more thing, don't use margin shorthands. Use the long form of margins. It helps with comparability.

To ensure maximum comparability, keep your code as simple and clean as possible. Also, make sure it validates in the latest version of epubcheck.

Do you want advice on formatting as well?

[fluoresce]

Originally Posted by JSWolf

Most Readers that use ADE don't have the page numbers in the right margin or there is an option to turn them off.

Best practice is to allow the default values where possible such as margins, line-height, & font size. Current Readers allow for margin changes, line-height, and font size. So you really don't need to add in your own values. Plus, @page causes issues with ADE and the right hand page number in that it move the page number from the right side based on your @page. Oh and don't left justify. It looks awful. One more thing, don't use margin shorthands. Use the long form of margins. It helps with comparability.

To ensure maximum comparability, keep your code as simple and clean as possible. Also, make sure it validates in the latest version of epubcheck.

Do you want advice on formatting as well?

Brilliant response!

Please tell me if I understand you correctly . . .

• I should avoid setting my own margins, line-height, and font sizes.
• I should avoid @page because ADE can't handle it.
• I should not use text-align:left.
• If I do use my own margins, I should use longhand, thus:

margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;

Questions

1. If I don't apply my own margins, wouldn't the margins be 0px by default?
2. In what way does "text-align:left" look terrible? Should I use "text-align:justify" instead, then?

Yes, please, formatting advice would be very much appreciated.

[fluoresce]

Originally Posted by Sunlite

There is a quite comprehensive article about ePub in the wiki.

https://wiki.mobileread.com/wiki/EPUB

The article also contains tips of the special needs for all of the big name reading systems including ADE.

Excellent resource!

[Toxaris]

Originally Posted by JSWolf

Most Readers that use ADE don't have the page numbers in the right margin or there is an option to turn them off.

Best practice is to allow the default values where possible such as margins, line-height, & font size. Current Readers allow for margin changes, line-height, and font size. So you really don't need to add in your own values. Plus, @page causes issues with ADE and the right hand page number in that it move the page number from the right side based on your @page. Oh and don't left justify. It looks awful. One more thing, don't use margin shorthands. Use the long form of margins. It helps with comparability.

To ensure maximum comparability, keep your code as simple and clean as possible. Also, make sure it validates in the latest version of epubcheck.

Do you want advice on formatting as well?

Stop talking nonsense Jon about @page. The @page is perfectly supported by ADE for many, many years. Even my very old PRS-300 supported it.
Also, some readers like left justify, others not. It is a personal opinion. Some want a small margin on each page, others don't. It is also a personal opinion.

Now, shorthand in CSS is better to be avoided because indeed some readers cannot handle it correctly. I also recommend to keep formatting as simple as possible.

Think about using relative instead of fixed values for certain styling such as font-size. It gives the reader much more flexibility.

[Toxaris]

Originally Posted by fluoresce

Questions

1. If I don't apply my own margins, wouldn't the margins be 0px by default?
2. In what way does "text-align:left" look terrible? Should I use "text-align:justify" instead, then?

Yes, please, formatting advice would be very much appreciated.

No, the margins will depend on the reader/reading application. I personally would set them, but keep them small. Some will prefer 0px.

Use what you would like. Some like left justified, some like full justified.

[theducks]

px (in, cm) is an absolute size. [Readers do not come in Absolute sizes, like paper ]

Avoid (when possible) Absolutes as they prevent scaling
use em or %, as they will scale
I have an older ADE device that ALWAYS shows those numbers in the right margin. I set the Body margin-right: 16px to give them space for 3 digits

[JSWolf]

Originally Posted by Toxaris

Stop talking nonsense Jon about @page. The @page is perfectly supported by ADE for many, many years. Even my very old PRS-300 supported it.

I never said @page didn't work with ADE. I remember on the Sony Readers, when @page was used, it moved the page number in the right side over by the amount of the right margin in @page. So that just caused blank space between the page number and the right side. Without the right side page number, @page works perfectly well in ADE. But, older Readers such as the aforementioned 300 or 505 did have the page number and @page did effect the placement of that page number. Overall, I think it's best not to use @page if the purpose is for avoiding the right side page number on Readers that still have them.

Also, some readers like left justify, others not. It is a personal opinion. Some want a small margin on each page, others don't. It is also a personal opinion.

If the justification is not specified, ADE defaults to left. The problem is that some older Readers do not have a way of changing the justification and you get what's in the CSS.

Think about using relative instead of fixed values for certain styling such as font-size. It gives the reader much more flexibility.

ADE defaults to a 1em font size. So plan other font sizes (such as chapter titles) around that. That works best and it doesn't cause an issue such as not being able to change the font size.

[JSWolf]

Originally Posted by theducks

I have an older ADE device that ALWAYS shows those numbers in the right margin. I set the Body margin-right: 16px to give them space for 3 digits

For Readers with an older ADE (like the one you have), margins are best used instead of @page.

[fluoresce]

Thanks for the help, guys.

I have a large EPUB, with lots of internal links. I need to clean up some tags using regex (delete lots of redundant classes). I merged all of the HTML files so that I can run regex for each fix just once instead of having to repeat it on each page individually. The problem is that when I split the files back up, many of the internal links stopped working! Why do the internal links not automatically update?

As I was splitting the files back up, I got a warning like this:

The href ../Text/whatever.html#TOC_54345345 found in chapter3.html does not exist. Splitting or merging under these cuircumstances can result in broken links. Do you still wish to continue?

[fluoresce]

Is there a way of checking internal links?

[Turtle91]

Originally Posted by fluoresce

Thanks for the help, guys.

I have a large EPUB, with lots of internal links. I need to clean up some tags using regex (delete lots of redundant classes). I merged all of the HTML files so that I can run regex for each fix just once instead of having to repeat it on each page individually. The problem is that when I split the files back up, many of the internal links stopped working! Why do the internal links not automatically update?

As I was splitting the files back up, I got a warning like this:

Hi flouresce, welcome to MR!

There is no need to merge your html pages to run regex on all of them. All you need to do is select "All HTML Files" instead of "Current File" in the regex mode selector at the bottom.

Cheers!

[Turtle91]

Originally Posted by fluoresce

Is there a way of checking internal links?

Going to "tools/reports" and then selecting "links" should give you a bunch of info. I also think hitting F7 (tools/Well Formed Check EPUB) might show up any broken links...but I'm not positive about that one.


...these tools would be in Sigil, of course.

[dwig]

All of the advice so far about margins should be taken to refer to page/screen level tags (e.g. <body>, ...), other that the good advise to not use the shorthand notation.

Margins applied to Heading tags (e.g. <h1>, ...) and containers such as <div> and <p> are another matter. With these, margin-top and margin-bottom are excellent way to insert vertical space, if you use em units, though added space is best (IMO) left to special cases with <p> and <div> tags (eg. <p class="section" where the section class has a margin-top of perhaps 1em).