View Full Version : <body> style


HYPE
03-28-2013, 09:41 PM
Hi there.

I'm currently working on a few ebooks. The creation process of most of them included converting from another format, so I didn't write all the CSS manually.

I noticed the following code in the CSS :

@page { margin-bottom: 5.000000pt; margin-top: 5.000000pt; }

body {
display: block;
font-size: 1em;
margin-bottom: 0;
margin-left: 5pt;
margin-right: 5pt;
margin-top: 0;
padding-left: 0;
padding-right: 0;
}

Is all of this really necessary? What should I use for the body? I really want to give people a clean ebook, so every detail is important to me.

Thanks.

JSWolf
03-28-2013, 11:14 PM
Hi there.

I'm currently working on a few ebooks. The creation process of most of them included converting from another format, so I didn't write all the CSS manually.

I noticed the following code in the CSS :

@page { margin-bottom: 5.000000pt; margin-top: 5.000000pt; }

body {
display: block;
font-size: 1em;
margin-bottom: 0;
margin-left: 5pt;
margin-right: 5pt;
margin-top: 0;
padding-left: 0;
padding-right: 0;
}

Is all of this really necessary? What should I use for the body? I really want to give people a clean ebook, so every detail is important to me.

Thanks.

This is the cleaned up code...

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

I would add in widows: 0; and orphans: 0; to make the text end mostly at the same place at the bottom of the screen.

Now, if you want to have margins, use an @page to do so. But if you do so, don't add in a bottom margin. You don't need it.

HYPE
03-29-2013, 04:39 AM
Ah, great advice, thank you. :)

Jellby
03-29-2013, 05:17 AM
Even simpler:

body { margin: 0; }

About widows, orphans and bottom margin, there are different opinions. Widows and orphans control whether you prefer blank lines at the bottom of your page or possibly a single word at the top of your next paragraph (in printed books, it's usual to avoid breaking a paragraph between pages at its first or last line).

Bottom margin, that depends on the reader. If a reader has no "status bar" at the bottom of the screen, then you'd want a bottom margin for the same reason you want a top one. With bottom-margin: 0 the bottom line letters could touch the edge of the screen (or even be cropped if the font has long descenders extending beyond the character box). Although Jon likes to promote this "no bottom margin" view, I think it's cleaner to just have an even margin around all sides, so I usually have:

@page { margin: 2mm; }
body { margin: 0; }

and I don't think it causes a problem for anyone.

mrmikel
03-29-2013, 08:16 AM
I am of two minds. I don't want to give up any real estate on my 5" screen, but margins are prettier.

Turtle91
03-30-2013, 06:34 AM
I am of two minds. I don't want to give up any real estate on my 5" screen, but margins are prettier.

Most of your current reader's allow the user to change the default margins anyway, so I would put in what looks good to you {margin:5px} or whatever. If the reader doesn't like it they can change it. If they have an older device that doesn't allow them to change it, then they just have to live with what the publisher thinks looks good (just like all pbooks for the last how many years??) - or they can go get themselves a new reader/device/app!

JSWolf
03-30-2013, 10:06 PM
Most readers/reading apps do not go to the bottom of the screen. So just leave out the bottom margin. Leave it set to 0. Ignore any advice to do otherwise.

Agama
04-01-2013, 04:58 PM
This is the cleaned up code...

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


margin-top and margin-bottom can be better in the @page declaration rather than in body.

The difference is subtle but significant:

If set in body then margins only apply to the top and bottom of the text file being rendered, (typically a chapter), and NOT to the screen of the device. This means that if the text is longer than one screenful on the device, (and a chapter usually is), then you'll lose top margin as you forward through the chapter and the bottom margin will only show once the end of the chapter is displayed.

So if you want the vertical margins to persist as you scroll/page through a chapter then use @page for top/bottom.

(I think that this may also be why calibre uses @page in this way on conversions.)

JSWolf
04-01-2013, 05:12 PM
margin-top and margin-bottom can be better in the @page declaration rather than in body.

The difference is subtle but significant:

If set in body then margins only apply to the top and bottom of the text file being rendered, (typically a chapter), and NOT to the screen of the device. This means that if the text is longer than one screenful on the device, (and a chapter usually is), then you'll lose top margin as you forward through the chapter and the bottom margin will only show once the end of the chapter is displayed.

So if you want the vertical margins to persist as you scroll/page through a chapter then use @page for top/bottom.

(I think that this may also be why calibre uses @page in this way on conversions.)

That's very much incorrect. Putting the margins in the body will work for all of the XML files in the ePub. So if I was to set the top & bottom to 5em, it would be that way throughout every XML as long as they were not overridden.

True that you can just use @page. But you also want the actual margins set to 0 in body in that case.

Toxaris
04-02-2013, 04:27 AM
Actually, he is right. The margin in the body only works for the beginning and end of the HTML file. If a HTML file is paginated, which it its usually is, the margin is not inherited on the other pages, but only on the first for the top margin and on the last page for the bottom margin.

Jellby
04-02-2013, 09:41 AM
That's very much incorrect. Putting the margins in the body will work for all of the XML files in the ePub. So if I was to set the top & bottom to 5em, it would be that way throughout every XML as long as they were not overridden.

Sure, for each XHTML file, but not for each screen/page in them. Since the flow is defined to go vertically (i.e., next and previous pages are virtually above and below the current screen), left and right margins in <body> work as expected, and are valid for all the pages. But once one puts top and bottom margins in @page (where they belong), why not put left and right too (where, it can be argued, they belong as well) and leave the <body> with plain "margin: 0; padding: 0"?

Agama
04-02-2013, 03:58 PM
Actually, he is right.

Sure, for each XHTML file, but not for each screen/page in them. Since the flow is defined to go vertically (i.e., next and previous pages are virtually above and below the current screen), left and right margins in <body> work as expected, and are valid for all the pages. But once one puts top and bottom margins in @page (where they belong), why not put left and right too (where, it can be argued, they belong as well) and leave the <body> with plain "margin: 0; padding: 0"?


Thank-you. I know it's correct because I fell foul of it in practise. I think that JSWolf misunderstood me, perhaps because it's hard to explain clearly. It's easier to understand the difference when you see it happening!

I should have said:


If set in body then margins only apply to the top and bottom of each XHTML file being rendered, (typically a chapter), and NOT to the screen of the device.


So, top/bottom margins defined in body css are only seen when the top or bottom of an XHTML document is visible. Solution: define them in @page.


I would agree that all these margins should be in @page with one exception. Old readers like my PRS-300 display horrible ADE page numbers down the right margin. Using margin-right in @page causes these numbers to appear further left, (which is more obtrusive), whereas in body it does not - it just margins the page text. So specifying in body gives a way of stopping these numbers from overlapping text. There is no option in the firmware to switch them off, but I have read that subsequent Sony readers do not have them.

JSWolf
04-02-2013, 11:21 PM
I would agree that all these margins should be in @page with one exception. Old readers like my PRS-300 display horrible ADE page numbers down the right margin. Using margin-right in @page causes these numbers to appear further left, (which is more obtrusive), whereas in body it does not - it just margins the page text. So specifying in body gives a way of stopping these numbers from overlapping text. There is no option in the firmware to switch them off, but I have read that subsequent Sony readers do not have them.

The 700 was the first Sony without page numbers on the right side of the screen. Next it was in all the x50 line on forward.

Jeff L
04-05-2013, 08:08 AM
Old readers like my PRS-300 display horrible ADE page numbers down the right margin. Using margin-right in @page causes these numbers to appear further left, (which is more obtrusive), whereas in body it does not...

From what I understand, the ADE page numbers occur outside the body but inside the @page. So you need to leave enough of a gap between whatever you set for body and @page to fit the page numbers.

I use this:

@page { margin-right: 0em}
body { margin-right: 16pt}

It leaves enough space for 3 digit page numbers. Perhaps a smidgen more would be needed for 1,000+ pages.

JSWolf
04-05-2013, 11:41 AM
If you are concerned about the page numbers on the right side of the screen for older Readers using an older ADE, don't use @page at all. Just set the left/right margins in body like so...

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

That is all you need. You do not need to set the left/right margins anyplace else except if you want larger margins in other places.

Agama
04-05-2013, 03:24 PM
If you are concerned about the page numbers on the right side of the screen for older Readers using an older ADE, don't use @page at all. Just set the left/right margins in body like so...

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


Unfortunately this will lose the top margin once each XHTML file scrolls, (as already discussed earlier in this thread). @page really is the correct place to specify device level margins, but to handle ADE page numbers I use:

@page { margin:4pt 0 3pt 0 } and
body { margin:0 6pt 0 6pt; text-align:left }
p { text-align:left }

With my text left justified left this avoids most text clashes with ADE page numbers. For me 16pt uses up too much screen space, but could be more appropriate if you are using text-align:justify, (not supported on PRS-300.)