Should I define margins around the text?

what · 03-09-2021, 02:23 AM

In many ePubs that I own, margins are defined around the text, e.g. in Sarah J. Maas, Tower of Dawn:

Code:

# css
body {
    display: block;
    margin: 8px;
}
div.wrapper {
    margin: 0em 1.2em 0em 1.2em;
}

# html
<body>
    <div class="wrapper">
        ...
    </div>
</body>

In other ePubs (published by large publishing houses like Random House and Harper Collins), no margins are defined for the body or wrapper and, if viewed in a webbrowser, the text flows from edge to edge of the browser window.

Should or shouldn't I define margins? Why? When?

Jellby · 03-09-2021, 03:31 AM

If you want to define margins, do it in a @page rule. But margins (like font family, size, line spacing) should defined by the reader (both human and device).

what · 03-09-2021, 05:33 AM

Thank you, Jellby. Does an @page rule, if I set it, supersede the rules defined on the device?

Jellby · 03-09-2021, 05:46 AM

I guess that would depend on the device. Well-behaved devices should (in my opinion) set their own margins by superseding the book's @page rule, if any.

Turtle91 · 03-09-2021, 04:53 PM

The answer depends on what you are using the <div> for. If you are using it to define a section of text that is styled differently than your "normal" paragraphs, then yes, you can certainly add styling to the div to make that section "stand out".

Code:

p {whatever styling you want for normal paragraphs (98% of the book)}

div.newsarticle {margin:2em - or whatever you want for the div box itself}
div.newsarticle p {whatever special styling you want for paragraphs within the div}
div.newsarticle p.head {whatever styling you want for news article headers}


<body>
<p>This is a normal paragraph.</p>
<p>This is a normal paragraph.</p>
<p>This is a normal paragraph.</p>

  <div class="newsarticle">
    <p class="head">Heading</p>
    <p>This is a news paragraph.</p>
    <p>This is a news paragraph.</p>
    <p>This is a news paragraph.</p>
  </div>

<p>This is a normal paragraph.</p>
<p>This is a normal paragraph.</p>
<p>This is a normal paragraph.</p>
</body>

If, however, you are making the uncultured, uncouth, barbaric, decision to use a <div> to wrap your paragraphs instead of using the paragraph tag <p>, then, first, you need to rethink that approach - use the actual tag designed for the purpose, and second - refer to the first reason!, and third, slap yourself for skipping the first and second reasons and just use the actual tags as they are intended.

Having said all that - I agree with not defining margins for normal paragraphs at all and let the device define the standard margin.

GrannyGrump · 03-12-2021, 09:08 AM

Also, might consider using <blockquote> to set slightly wider margins, and define the blockquote margins in the stylesheet.

I use a <div> always to set off poetry, forcing a hanging indent to the contained paragraphs, and then set individual paragraphs with a wider margin if they must be indented deeper (according to the poet's "vision").

Notjohn · 03-13-2021, 09:56 AM

I just finished reading an ARC for May publication that has over-wide margins as displayed on my Fire 8-inch tablet. I found it VERY irritating, and the book, as it happens, was spellbinding, so that little itch was really noticeable. It was a Kindle version but I assume it was created as an epub.

JSWolf · 03-16-2021, 06:41 PM

Quote:

Originally Posted by Notjohn

I just finished reading an ARC for May publication that has over-wide margins as displayed on my Fire 8-inch tablet. I found it VERY irritating, and the book, as it happens, was spellbinding, so that little itch was really noticeable. It was a Kindle version but I assume it was created as an epub.

But given that Kindle apps have wide margins to start with and then that would be even wider if the eBook defines extra margins.

Given that most eBook reading software has settings for the margin or has a default margin so it's not up against the edge, the main margins should be 0.

Also, why are the publishers trying to duplicate pBook formatting when in most cases it doesn't work. The chapter headers are large due to the wasted space, L/R margins in some cases are overlay large. The boy font size is not using the default 1em and is using something smaller. And then there are paragraph spaces that are rather large and line height that's also large.

Make the L/R margins 0, no line height, and keep the main body font size as the default 1em. I'll then be able to use the slider for margins, line height, and set the font size as I want.

The question is, what program are you using the read your ePub? Does it have settings to set the margin? If so, keep the margins at 0. If not, set the margins in CSS to what you like.

03-09-2021, 02:23 AM	#1
what Enthusiast Posts: 28 Karma: 10 Join Date: Mar 2021 Device: none	Should I define margins around the text? In many ePubs that I own, margins are defined around the text, e.g. in Sarah J. Maas, Tower of Dawn: Code: # css body { display: block; margin: 8px; } div.wrapper { margin: 0em 1.2em 0em 1.2em; } # html <body> <div class="wrapper"> ... </div> </body> In other ePubs (published by large publishing houses like Random House and Harper Collins), no margins are defined for the body or wrapper and, if viewed in a webbrowser, the text flows from edge to edge of the browser window. Should or shouldn't I define margins? Why? When?

03-09-2021, 04:53 PM	#5
Turtle91 A Hairy Wizard Posts: 3,312 Karma: 20171571 Join Date: Dec 2012 Location: Charleston, SC today Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire	The answer depends on what you are using the <div> for. If you are using it to define a section of text that is styled differently than your "normal" paragraphs, then yes, you can certainly add styling to the div to make that section "stand out". Code: p {whatever styling you want for normal paragraphs (98% of the book)} div.newsarticle {margin:2em - or whatever you want for the div box itself} div.newsarticle p {whatever special styling you want for paragraphs within the div} div.newsarticle p.head {whatever styling you want for news article headers} <body> <p>This is a normal paragraph.</p> <p>This is a normal paragraph.</p> <p>This is a normal paragraph.</p> <div class="newsarticle"> <p class="head">Heading</p> <p>This is a news paragraph.</p> <p>This is a news paragraph.</p> <p>This is a news paragraph.</p> </div> <p>This is a normal paragraph.</p> <p>This is a normal paragraph.</p> <p>This is a normal paragraph.</p> </body> If, however, you are making the uncultured, uncouth, barbaric, decision to use a <div> to wrap your paragraphs instead of using the paragraph tag <p>, then, first, you need to rethink that approach - use the actual tag designed for the purpose, and second - refer to the first reason!, and third, slap yourself for skipping the first and second reasons and just use the actual tags as they are intended. Having said all that - I agree with not defining margins for normal paragraphs at all and let the device define the standard margin. Last edited by Turtle91; 03-09-2021 at 04:57 PM.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
text margins on generated covers	littlenellie	Library Management	4	10-19-2020 10:38 PM
copy text in brackets to margins?	zoechow	Conversion	1	12-09-2018 03:25 AM
Proper justification of text and aligned margins	Mcmac	Kindle Developer's Corner	1	01-22-2015 11:49 PM
Epub to AZW3, TOC margins off, text OK	Ma'am-I-Am	Conversion	0	10-18-2014 07:40 PM
PRS-700 Text border margins	Intri	Sony Reader	2	11-17-2010 04:01 AM

03-09-2021, 03:31 AM	#2
Jellby frumious Bandersnatch Posts: 7,543 Karma: 19001583 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	If you want to define margins, do it in a @page rule. But margins (like font family, size, line spacing) should defined by the reader (both human and device).

03-09-2021, 05:33 AM	#3
what Enthusiast Posts: 28 Karma: 10 Join Date: Mar 2021 Device: none	Thank you, Jellby. Does an @page rule, if I set it, supersede the rules defined on the device?

03-09-2021, 05:46 AM	#4
Jellby frumious Bandersnatch Posts: 7,543 Karma: 19001583 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	I guess that would depend on the device. Well-behaved devices should (in my opinion) set their own margins by superseding the book's @page rule, if any.

03-12-2021, 09:08 AM	#6
GrannyGrump Obsessively Dedicated... Posts: 3,202 Karma: 34984330 Join Date: May 2011 Location: JAPAN (US expatriate) Device: Sony PRS-T2, ADE on PC	Also, might consider using <blockquote> to set slightly wider margins, and define the blockquote margins in the stylesheet. I use a <div> always to set off poetry, forcing a hanging indent to the contained paragraphs, and then set individual paragraphs with a wider margin if they must be indented deeper (according to the poet's "vision").

03-13-2021, 09:56 AM	#7
Notjohn mostly an observer Posts: 1,518 Karma: 987654 Join Date: Dec 2012 Device: Kindle	I just finished reading an ARC for May publication that has over-wide margins as displayed on my Fire 8-inch tablet. I found it VERY irritating, and the book, as it happens, was spellbinding, so that little itch was really noticeable. It was a Kindle version but I assume it was created as an epub.