Why the heck do they setup margins using pixels?!

[Jellby]

Best would be being able to use conditional CSS or the calc() function to set the margins...

Anyway, I just wanted to point that, contrary to logic, CSS px are not (should not be) real screen pixels, but, according to the CSS spec:

px: pixel units — 1px is equal to 0.75pt.

but even that can change depending on the exact resolution or the intended usage distance.

[dgatwood]

Originally Posted by Jellby

Best would be being able to use conditional CSS or the calc() function to set the margins...

Anyway, I just wanted to point that, contrary to logic, CSS px are not (should not be) real screen pixels, but, according to the CSS spec:

px: pixel units — 1px is equal to 0.75pt.

but even that can change depending on the exact resolution or the intended usage distance.

And pt is defined as 1/72nd of an inch. This, of course, is a pretty little lie, depending on screen resolution, but no more so than the definition of an inch as an inch, AFAIK.

[Agama]

Is there any way to specify the margins, indents etc. as a proportion of the page size rather than of the font size?

[JSWolf]

Originally Posted by Agama

Is there any way to specify the margins, indents etc. as a proportion of the page size rather than of the font size?

Margins as a proportion of the page size is going to be just wrong. It's bad form and should not be done. Indents as well are in poor form for to a proportion of a page size. For margins, use pt and for indents, use em. I use 1.2em and find this works well. It's not too big with being just big enough.

It's best with an ePub to set it up with no margins at all and then use an @ page like this...

@page {
margin-top: 5pt;
margin-left: 5pt;
margin-top: 5pt
}

That way, it's very easy for those of us who want to change the margins or just get rid of them to do so.

For indents...

p {
margin-top: 0;
margin-bottom: 0;
text-indent: 1.2em
}

[bfollowell]

Originally Posted by JSWolf

Margins as a proportion of the page size is going to be just wrong. It's bad form and should not be done. Indents as well are in poor form for to a proportion of a page size. For margins, use pt and for indents, use em. I use 1.2em and find this works well. It's not too big with being just big enough.

It's best with an ePub to set it up with no margins at all and then use an @ page like this...

@page {
margin-top: 5pt;
margin-left: 5pt;
margin-top: 5pt
}

That way, it's very easy for those of us who want to change the margins or just get rid of them to do so.

For indents...

p {
margin-top: 0;
margin-bottom: 0;
text-indent: 1.2em
}

It depends on if you're going to try to sell the book or if it's for personal use. If it's for personal use, there is no such thing as "just plain wrong". It's up to what each person likes and, if that's the case, then yes, you could easily have margins and indents setup as a percentage. I set my indents for personal use as 5% and they look perfect to me on anything from a five inch screen to a nine inch. Just experiment and find out what works well for you.

If it is for commercial purposes, then I'd follow Jon's advice and go with something like 1-2 em for most indents and margins.

- Byron

[Jellby]

Originally Posted by Agama

Is there any way to specify the margins, indents etc. as a proportion of the page size rather than of the font size?

Not really. All you can do is specify them in relation to the container's size, which in some cases will be the page/screen. Note that according the spec, percentages in vertical margins should be interpreted in relation to the container's width, not height.

[JSWolf]

Originally Posted by bfollowell

It depends on if you're going to try to sell the book or if it's for personal use. If it's for personal use, there is no such thing as "just plain wrong". It's up to what each person likes and, if that's the case, then yes, you could easily have margins and indents setup as a percentage. I set my indents for personal use as 5% and they look perfect to me on anything from a five inch screen to a nine inch. Just experiment and find out what works well for you.

If it is for commercial purposes, then I'd follow Jon's advice and go with something like 1-2 em for most indents and margins.

- Byron

For commercials eBooks, from what I've read about format preferences, those that do not care for no (zero) margins, do like small margins. 1em is too big for a margin. Margins should be specified in points so they always stay the same. What works is just enough to keep the text from the edge of the screen. But, most reading apps/Readers, there is no need for a bottom margin as the text never gets to the bottom of the screen. So you just need left/right/top. And a small margin like 5pt - 9pt would not be too big for most people. 2em is too big for an indent. The largest it should be is 1.5em, but (IMHO) that's still too big. Simon & Schuster (for Star Trek eBooks) is using 1.2em for an indent and that works well. Enough to be noticeable as an indent but not too big to be annoying. I've seen way too many at something stupid like 5%.

[Agama]

Originally Posted by JSWolf

Margins as a proportion of the page size is going to be just wrong. It's bad form and should not be done. Indents as well are in poor form for to a proportion of a page size. For margins, use pt and for indents, use em. I use 1.2em and find this works well. It's not too big with being just big enough.

For page margins I use:

@page { margin-top:3pt; margin-bottom:4pt }

body { ... margin-top:0; margin-left:5pt; margin-bottom:0; margin-right:5pt; ... }

so that they are fixed irrespective of zoom level.

For indents I use 12pt so that it does not increase with zoom level.

For headers I use em vertical spacing so that it does zoom, e.g.

h3 { font-size:1em; text-align:center; margin:1.5em 12pt 1em 12pt }

I'm not sure why page margins relative to the actual device size, (e.g. 2%) would be wrong. If you took a page and enlarged/reduced it then the margins would enlarge/reduce accordingly, (in absolute terms), but remain at 2%.

My fixed page margins work well on a 5" screen but may look very small on a 10", which is what the OP mentioned originally.

[Jellby]

Originally Posted by Agama

For page margins I use:

@page { margin-top:3pt; margin-bottom:4pt }

body { ... margin-top:0; margin-left:5pt; margin-bottom:0; margin-right:5pt; ... }

While that may be correct, I think it's unnecessary to have the margins specified in two places. I prefer something simpler like:

@page { margin: 2mm; } /* or margin: 3pt 5pt 4pt 5pt; */
body { margin: 0; }

I don't agree with JSWolf's suggestion that you don't need a bottom margin. It may be uncommon that the text reaches the bottom, but when it does you better make sure that there is some margin (if that's what you want). You need a bottom margin for exactly the same reason you need a right margin with non-justified text.

For headers I use em vertical spacing so that it does zoom, e.g.

h3 { font-size:1em; text-align:center; margin:1.5em 12pt 1em 12pt }

As discussed in another thread, it may be a good idea to add "hyphens: none" (and other synonyms) to headers. Just an idea

[bfollowell]

Originally Posted by Agama

I'm not sure why page margins relative to the actual device size, (e.g. 2%) would be wrong. If you took a page and enlarged/reduced it then the margins would enlarge/reduce accordingly, (in absolute terms), but remain at 2%.

My fixed page margins work well on a 5" screen but may look very small on a 10", which is what the OP mentioned originally.

You hit the nail on the head right there. They wouldn't be "wrong". It's just that Jon tends to be extremely opinionated and rude, calling anyone's opinions that differ from his as wrong or stupid.

[Agama]

Originally Posted by Jellby

I prefer something simpler like:

@page { margin: 2mm; } /* or margin: 3pt 5pt 4pt 5pt; */
body { margin: 0; }


As discussed in another thread, it may be a good idea to add "hyphens: none" (and other synonyms) to headers. Just an idea

Thanks for the tips. I'll change to the simpler @page margins, (I took my cue from calibre conversions), and I also like the hyphens:none option - but checking on the web suggests it's css3. Is it supported in ePub2 (css2.1)?

My main gripe with purchased ePubs has been huge indents in em, (3em - 5em), which soon gobble up lots of screen width on zooming. Maybe my 12pt fixed indent is an over-reaction, so I'll try 1.2em as JSWolf has mentioned.

[JSWolf]

Originally Posted by Jellby

I don't agree with JSWolf's suggestion that you don't need a bottom margin. It may be uncommon that the text reaches the bottom, but when it does you better make sure that there is some margin (if that's what you want). You need a bottom margin for exactly the same reason you need a right margin with non-justified text.

I disagree. Readers & most reading apps use the bottom margin for something else such as showing the page number. The reason for the margins s to keep the text away from the edges. The bottom margin is already taken care of. By adding a bottom margin, you are just wasting screen space. You could have that one more line without.

[JSWolf]

Originally Posted by bfollowell

You hit the nail on the head right there. They wouldn't be "wrong". It's just that Jon tends to be extremely opinionated and rude, calling anyone's opinions that differ from his as wrong or stupid.

Have you ever seen a 5% indent that actually looks good? It doesn't work. It's too big. And the bigger the screen, the bigger the indent.

[Agama]

Quote:

I'm not sure why page margins relative to the actual device size, (e.g. 2%) would be wrong.

[Jellby]

Originally Posted by JSWolf

I disagree. Readers & most reading apps use the bottom margin for something else such as showing the page number. The reason for the margins s to keep the text away from the edges. The bottom margin is already taken care of. By adding a bottom margin, you are just wasting screen space. You could have that one more line without.

That would be very device- and settings-dependent. In my device, with my settings, there's nothing at the bottom, the whole screen is available for the text. Besides, if I activate the footer, a line/rule is drawn and, without a margin, the text could clash with the line (or not, that depends on how this is actually implemented); other devices display the "status bar" with black background, which would be pretty much the same. In any case, your same argument could be use for the top margin, as I could also enable a header in my device (showing the book title and author).

This shows why it is a good idea to keep style simple and compact. Simple styles are easy to understand and modify, if a user thinks the bottom margin is too large.