View Full Version : Why the heck do they setup margins using pixels?!


bfollowell
03-06-2013, 01:57 AM
I've noticed over the past year or so that ebook formatting as a whole has gotten better. It's far from where it should be and it's inconsistent, but it is definitely improving. The one frustration I keep running into is the fact that so many publishers are setting up margins, indents, line heights, etc. using pixels rather than em or some other logical unit of measure. A top margin of 15.0px may leave a small gap when trying to offset some text and look good on a lower resolution 5 or 7 inch reader/tablet, but it looks practically non-existent on a 1200x1920 resolution tablet reader like my Nook HD+ or my wife's Kindle HD 8.9.

Why would someone pick something arbitrary like pixels when using em size makes so much more sense? That way the gap increases or decreases with the font-size that the reader is using and the space looks closer to what the publisher likely had in mind originally.

Anyway, that was my three-minute gripe/observation.

- Byron

HarryT
03-06-2013, 02:32 AM
Setting up margins using a physical size like cm is the best policy, to my mind. The average reader doesn't want the margins to change size if they change the text size. But things like line height should of course scale with the text.

bfollowell
03-06-2013, 03:16 AM
hmmm, it seems to me that using physical sizes would run into the same problem that I see with using pixels. The pixel size that looks good on a 5-7 inch screen doesn't look very good at all on a higher resolution 9 inch screen. By the same token, the same margin setup at cm or fractions of a cm may look good on a smaller screen but may not look nearly as good on a larger screen. I'm sure it wouldn't be nearly as noticeable but it has the same issue, at least in my way of thinking.

If I have a top margin setup to set a gap between two paragraphs to setup a scene change for example, I would usually want that gap to be a consistent distance away depending on the size of the text. Typically, I like to see about 3em.

Of course, that's all me and we each have our own likes, dislikes and opinions. All I know is that pixel size makes absolutely no sense to me. It was an extremely short sighted choice in my opinion.

- Byron

HarryT
03-06-2013, 03:31 AM
If I have a top margin setup to set a gap between two paragraphs to setup a scene change for example, I would usually want that gap to be a consistent distance away depending on the size of the text. Typically, I like to see about 3em.


I agree. I was referring to page margins. They are what you don't want to scale with the text size.

But you're absolutely right in saying that there's no "one size fits all" solution. You want small page margins on a 6" reader - anything wider than a few mm is just wasting valuable screen estate. But a wider margin would look better on a 10" screen or a PC. Given, though, that most reading devices to have a 6" screen, it probably makes sense to optimise the reading experience for that environment.

bfollowell
03-06-2013, 04:15 AM
I agree. I was referring to page margins. They are what you don't want to scale with the text size.

But you're absolutely right in saying that there's no "one size fits all" solution. You want small page margins on a 6" reader - anything wider than a few mm is just wasting valuable screen estate. But a wider margin would look better on a 10" screen or a PC. Given, though, that most reading devices to have a 6" screen, it probably makes sense to optimise the reading experience for that environment.

Oh sure, I agree, but optimize it with a standard of measure that makes a little more sense and future proofs the ebook a little. text-indent for example. I've always used an indent for normal paragraphs of 5%. It looked great on my 5" Kindle, it looked great on my 7" Nook Tablet and, you know what, it still looks great on my 9" Nook HD+. No changes needed. It just seems to be about the perfect ratio for a paragraph indentation. I guess if you were reading in landscape mode as opposed to portrait mode it might not look as nice but I don't think that's how most people read.

Now, the text indents that are 15.0 or 18.0 pixels, which seems to be about the norm? They don't look so hot. The scene breaks that are 45.0 pixels? That works out to about 2.3% of my screen, or about 1.5 line heights for my typical font size of choice. Not much of a scene break really.

As far as the overall page margins go, I tend to agree with you. They don't need to scale with the font size but I'm still one that likes a decent white space around my page, just like any other book or anything else I've ever read. I really don't get those that like zero margins just so they can have edge to edge text. Personally, I fail to see the appeal. I think it looks horrible. But hey, to each his own.

- Byron

HarryT
03-06-2013, 04:20 AM
As far as the overall page margins go, I tend to agree with you. They don't need to scale with the font size but I'm still one that likes a decent white space around my page, just like any other book or anything else I've ever read. I really don't get those that like zero margins just so they can have edge to edge text. Personally, I fail to see the appeal. I think it looks horrible. But hey, to each his own.

- Byron

You'd perhaps feel differently if you read on a phone :). I don't - the screen's too small for my failing middle-aged eyesight - but I can understand that having a 1/2" margin each side of a 2.5" wide screen is probably not a good idea.

mrmikel
03-06-2013, 07:32 AM
This discussion is a point I have made before. If you are laying an epub out for a tablet, it makes no sense to limit yourself to the shortcomings of small screens. Contrarily, laying it out for a tablet where it might be used on a small screen only makes for an unpleasant reading experience on a small screen.

You can have pull quotes, floating pictures, etc easily on a tablet. They are just an annoyance that eats up pages and makes you push the page advance button on a small machine. I can't see any way around it either.

If you downsize a baseball bat, it isn't the same thing any more is it?

I want both tablets and e-ink readers to co-exist. But I don't think it may be helpful to try to keep them to the same standard.

DiapDealer
03-06-2013, 11:19 AM
Standard page margins, I prefer to leave up to the reading app and the reader. Specifying them in the book can sometimes complicate the user's ability to easily change them to suit their needs.

Indents... well my personal preference is 1.2-1.3em.

Scenebreaks and such, I prefer to stay static. I tend to make those gaps pretty large anyway (since reflow can sometimes disguise smaller breaks--depending on where the page-break falls), so I rarely want/need them to scale with font-size.

I also don't neccessarily like the gap between chapter headers and the first paragraph scaling with font size either. It seems a bit silly to waste more and more screen real estate on that gap, when I've likely made it fairly prominent in the first place. *shrugs*

JSWolf
03-06-2013, 04:33 PM
I use an indent of 1.2em and for a section break that's just using just space I use 2em. The paragraph after the 2em space, I have no indent. Also, to help with section breaks that may fall at the end of the screen, I have widows and orphans set to 0 to section breaks are easy to detect at the end of the screen/

I don't specify margins. I prefer none on my 650, iPhone 5 & iPad.

I do agree that margins should be fixed and all other space settings should be flexible.

Ripplinger
03-06-2013, 04:42 PM
Do all readers obey the widow and orphan lines when set? I've seen them rarely in epubs so far and figured if they were reliable in all or even most readers, they'd be used a lot more frequently?

JSWolf
03-06-2013, 04:43 PM
Do all readers obey the widow and orphan lines when set? I've seen them rarely in epubs so far and figured if they were reliable in all or even most readers, they'd be used a lot more frequently?

ADE does for sure. ADE defaults to 2 and I set them to 0. I don't care that it's typographically not correct. But it does look better on a small 6" screen.

afv011
03-06-2013, 06:02 PM
Standard page margins, I prefer to leave up to the reading app and the reader. Specifying them in the book can sometimes complicate the user's ability to easily change them to suit their needs.

Agreed, it's definitively better when you can override whatever's in the ebook and set your own. That said, I don't particularly care much about margins, breaks or justification - my only concern is for margins not to be overly large so I don't have to press "next" too often.

bfollowell
03-06-2013, 08:24 PM
I use an indent of 1.2em and for a section break that's just using just space I use 2em. The paragraph after the 2em space, I have no indent. Also, to help with section breaks that may fall at the end of the screen, I have widows and orphans set to 0 to section breaks are easy to detect at the end of the screen/

I don't specify margins. I prefer none on my 650, iPhone 5 & iPad.

I do agree that margins should be fixed and all other space settings should be flexible.

OK, I give up, what do widows and orphans do for us?

Those are new terms to me and I'm always on the lookout for something new to learn.

Thanks.

- Byron

Pranananda
03-07-2013, 01:07 AM
Here's an article in Wikipedia about typographic Widows and Orphans (http://en.wikipedia.org/wiki/Widows_and_orphans). There are some CSS properties to prevent these from occurring in page oriented display, widows (http://webdesign.about.com/od/styleproperties/p/blspwidows.htm) and orphans (http://webdesign.about.com/od/styleproperties/p/blsporphans.htm).

bfollowell
03-07-2013, 02:02 AM
Thanks a lot.

Jellby
03-07-2013, 07:52 AM
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 (http://www.w3.org/TR/CSS21/syndata.html#length-units):

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
03-07-2013, 08:23 PM
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 (http://www.w3.org/TR/CSS21/syndata.html#length-units):

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. :eek:

Agama
03-11-2013, 08:33 AM
Is there any way to specify the margins, indents etc. as a proportion of the page size rather than of the font size?

JSWolf
03-11-2013, 09:24 AM
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
03-11-2013, 09:50 AM
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
03-11-2013, 10:48 AM
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
03-11-2013, 10:56 AM
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
03-12-2013, 04:19 AM
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
03-12-2013, 06:54 AM
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
03-12-2013, 07:29 AM
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
03-12-2013, 08:37 AM
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
03-12-2013, 08:52 AM
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
03-12-2013, 08:55 AM
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
03-12-2013, 09:26 AM
Quote:

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

Jellby
03-12-2013, 09:50 AM
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.

Jellby
03-12-2013, 09:52 AM
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)?

No, it's not directly supported by ePub2 (which is based CSS2, and not CSS2.1, I believe), but many readers support one of the synonyms, see here.

afv011
03-12-2013, 11:51 AM
And the bigger the screen, the bigger the indent.

That's how it should be, to keep things in proportion.

HarryT
03-12-2013, 12:47 PM
That's how it should be, to keep things in proportion.

I'm not sure about that one. Indent size doesn't generally increase with page size in traditional publishing. 1-1.5em indents are what look about right to me, although that's just my personal opinion, of course.

JSWolf
03-12-2013, 12:52 PM
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.

But, given that the recommendation is for a very small margin, this footer would still get text on top of it. If the Reader does not push the text up when the footer is activated, then it's a bug in the reader app. Don't penalize others for a bug in your reader.

JSWolf
03-12-2013, 12:54 PM
That's how it should be, to keep things in proportion.

Indents and margins should be a fairly fixed size. Indents can be an em and margins should be a pt (outside margins only). If you were to use a margin of 5% (a lot of older Mobi & MS Reader eBooks did this), it will look too large because it is too large. On a screen like an iPad, it will just look even worse.

bfollowell
03-12-2013, 02:56 PM
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.

Do you actually read posts that you quote or do you just skim them? You quoted one of my posts a couple of days ago where I said that I use 5% as my text indent and that I felt they looked great on every reader that I've owned from 5" up to my 9". So, yes, I've seen hundreds of epubs with 5% text indents and I think they look awesome. If I didn't, I wouldn't use it. In that post you proceeded to say "I've seen way too many at something stupid like 5%." It was only a few posts before that you said "Margins as a proportion of the page size is going to be just wrong."

These are the sort of comments that I'm referring to. Stupid, wrong; you like to bandy those words around quite frequently. There are no laws concerning these and these aren't moral issues. There is no wrong or right. There are some best practices to use when making a commercial epub but even they go out the window when you're making something for your own personal use. Anything more is just your opinion. You're certainly entitled to it but you don't need to be so forceful or rude when voicing it.

I've always been impressed with your knowledge. It's just been the way you choose to impart it that gets to me. You're always a much more pleasant person to be around on those rare occasions when you're not voicing your opinion.

- Byron

JSWolf
03-12-2013, 03:14 PM
When there are complaints against poor formatting, one thing that's complained about are large indents. 5% is a large indent that does get complained about.

So, if you are publishing an eBook, please don't use 5% for indents. But for your own personal use, whatever you want is OK.

Jellby
03-12-2013, 04:36 PM
But, given that the recommendation is for a very small margin, this footer would still get text on top of it. If the Reader does not push the text up when the footer is activated, then it's a bug in the reader app. Don't penalize others for a bug in your reader.

I mean that an activated footer may have a line on top of it, and then, with zero margin, a "g" on the last line could touch this line, which would look wrong (or just as wrong as it touching the screen edge if there is no footer). If one wants some small margin at some edge, one probably wants it at all edges. Having a zero bottom margin will only give you one extra line when this like is too close to the bottom edge (or footer), and that's exactly what margins are for: to prevent that.

Agama
03-12-2013, 05:32 PM
No, it's not directly supported by ePub2 (which is based CSS2, and not CSS2.1, I believe), but many readers support one of the synonyms, see here.

I checked on IDPF and you are correct: ePub2 supports CSS2.0. I can't find a definitive code for hyphen support with CSS2 so I'll try some of the suggestions and see if any work with my Sony reader, (ADE based).

I use 1.2em and find this works well. It's not too big with being just big enough.

Agreed! I've changed my conservative 12pt indents to 1.2em and it is indeed "not too big with being just big enough". :thumbsup:

JSWolf
03-12-2013, 06:34 PM
I checked on IDPF and you are correct: ePub2 supports CSS2.0. I can't find a definitive code for hyphen support with CSS2 so I'll try some of the suggestions and see if any work with my Sony reader, (ADE based).

Your Sony doesn't have hyphenation. So no need to add code to deal with hyphens.

Agreed! I've changed my conservative 12pt indents to 1.2em and it is indeed "not too big with being just big enough". :thumbsup:

Glad you like 1.2em for indents.