03-28-2013, 08:41 PM | #1 |
Groupie
Posts: 178
Karma: 1057078
Join Date: Dec 2012
Device: Kobo Aura One
|
<body> style
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 : Code:
@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; } Thanks. |
03-28-2013, 10:14 PM | #2 | |
Resident Curmudgeon
Posts: 73,983
Karma: 128903378
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Quote:
Code:
body { margin-bottom: 0; margin-left: 0; margin-right: 0; margin-top: 0; } 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. |
|
03-29-2013, 03:39 AM | #3 |
Groupie
Posts: 178
Karma: 1057078
Join Date: Dec 2012
Device: Kobo Aura One
|
Ah, great advice, thank you.
|
03-29-2013, 04:17 AM | #4 |
frumious Bandersnatch
Posts: 7,516
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
Even simpler:
Code:
body { margin: 0; } 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: Code:
@page { margin: 2mm; } body { margin: 0; } |
03-29-2013, 07:16 AM | #5 |
Color me gone
Posts: 2,089
Karma: 1445295
Join Date: Apr 2008
Location: Central Oregon Coast
Device: PRS-300
|
I am of two minds. I don't want to give up any real estate on my 5" screen, but margins are prettier.
|
03-30-2013, 05:34 AM | #6 |
A Hairy Wizard
Posts: 3,095
Karma: 18727053
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
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!
|
03-30-2013, 09:06 PM | #7 |
Resident Curmudgeon
Posts: 73,983
Karma: 128903378
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
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.
|
04-01-2013, 03:58 PM | #8 | |
Guru
Posts: 776
Karma: 2751519
Join Date: Jul 2010
Location: UK
Device: PW2, Nexus7
|
Quote:
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.) |
|
04-01-2013, 04:12 PM | #9 | |
Resident Curmudgeon
Posts: 73,983
Karma: 128903378
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Quote:
True that you can just use @page. But you also want the actual margins set to 0 in body in that case. |
|
04-02-2013, 03:27 AM | #10 |
Wizard
Posts: 4,520
Karma: 121692313
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-T1, Kobo Touch, Kobo Aura
|
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.
|
04-02-2013, 08:41 AM | #11 |
frumious Bandersnatch
Posts: 7,516
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
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"?
|
04-02-2013, 02:58 PM | #12 | |
Guru
Posts: 776
Karma: 2751519
Join Date: Jul 2010
Location: UK
Device: PW2, Nexus7
|
Quote:
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. Last edited by Agama; 04-02-2013 at 03:09 PM. |
|
04-02-2013, 10:21 PM | #13 | |
Resident Curmudgeon
Posts: 73,983
Karma: 128903378
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Quote:
|
|
04-05-2013, 07:08 AM | #14 | |
Zealot
Posts: 117
Karma: 584308
Join Date: Oct 2010
Location: San Francisco
Device: Kindle
|
Quote:
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. |
|
04-05-2013, 10:41 AM | #15 |
Resident Curmudgeon
Posts: 73,983
Karma: 128903378
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
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. |
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
Hi every body | 27gh32 | Introduce Yourself | 4 | 03-19-2012 09:50 AM |
<body style=""> How to stop this? | Danger | Sigil | 8 | 12-13-2010 08:17 PM |
Mobi TOC style vs ePub style? | phearlez | Kindle Formats | 3 | 04-11-2010 06:35 AM |