How does one set the margin size?

lunged · 09-15-2009, 01:39 PM

I have tweaked some novels with Sigil since it was released, but now I want to add a nice margin to a lot of works where there is none.

I purchased an ePub from Shortcovers.com, and was pleased to see the margins didn't interfere with the page numbering! This would be a great addition to make my eBooks more aesthetically pleasing. I imagine it is done with CSS (which I know nothing about). Is there a nice WYSIWYG way doing this currently? Will a way be added?

Thanks for the help, Sigil is shaping up quickly.

EDIT: I am referring to left/right margins as well as top/bottom.

Valloric · 09-15-2009, 01:53 PM

Quote:

Originally Posted by lunged

Is there a nice WYSIWYG way doing this currently? Will a way be added?

There is currently no WYSIWYG way of doing this. One will be added with time.

lunged · 09-15-2009, 02:27 PM

Great, thanks!
Now, is the coding way easy enough for someone to explain in this thread, or should I just wait for the WYSIWYG method? I do know some coding, just basic HTML and Objective-C, so I should be able to catch on pretty quickly. Thanks again.

pdurrant · 09-15-2009, 03:03 PM

Quote:

Originally Posted by lunged

Great, thanks!
Now, is the coding way easy enough for someone to explain in this thread, or should I just wait for the WYSIWYG method? I do know some coding, just basic HTML and Objective-C, so I should be able to catch on pretty quickly. Thanks again.

Just replace your plain <body> tag with

<body style="margin:5px">

to give five pixels of margin all around the page. If you want more or less, just change the figure. If you want uneven margins, use

<body style="margin:5px 4px 0px 4px">

where the order is top, right, bottom, left.

ugerhard · 09-17-2009, 04:24 AM

Quote:

Originally Posted by pdurrant

Just replace your plain <body> tag with

<body style="margin:5px">

to give five pixels of margin all around the page. If you want more or less, just change the figure. If you want uneven margins, use

<body style="margin:5px 4px 0px 4px">

where the order is top, right, bottom, left.

This will only specify the top and bottom margin for the entire document, won't it (so that the top and bottom margins for a page after the first resp. before the last page of the ebook are not set)? It will work for left and right margins, though.

To specify margins of the pages on the screen, I use the @page selector, mostly with

@page {
margin: 5pt;
}

for display on the CyBook Opus.

pdurrant · 09-17-2009, 04:27 AM

You might be right - I don't know.

Having checked, indeed, you are right - my suggestion only affects the first and last pages of a flow for top & bottom margins.

adding your suggestion to the CSS code works

@page {
margin: 5px;
}

is the right way to do it. Thanks!

Quote:

Originally Posted by ugerhard

This will only specify the top and bottom margin for the entire document, won't it (so that the top and bottom margins for a page after the first resp. before the last page of the ebook are not set)? It will work for left and right margins, though.

To specify margins of the pages on the screen, I use the @page selector, mostly with

@page {
margin: 5pt;
}

for display on the CyBook Opus.

pdurrant · 09-17-2009, 05:01 AM

Thank you again for this - it's sorted out one puzzle for me to do with the cover page. Now I specify

body { margin:0; }
@page { margin: 4pt; }

in the my global CSS file, and in the cover page XHTML file I add in an override just after the link to the standard CSS like this:

<link rel="stylesheet" href="../styles/style001.css" type="text/css" />
<style type="text/css">
body {margin:0; padding: 0; border-width: 0; }
@page {margin: 0; padding: 0; border-width: 0; }
</style>

And now my cover stretches to fill the screen as much as possible. Setting padding and border-width to 0 as well as the margin might be overkill, but it does no harm as far as I know.

Quote:

Originally Posted by ugerhard

To specify margins of the pages on the screen, I use the @page selector, mostly with

@page {
margin: 5pt;
}

for display on the CyBook Opus.

Slite · 09-17-2009, 05:12 AM

Quote:

Originally Posted by pdurrant

Thank you again for this - it's sorted out one puzzle for me to do with the cover page. Now I specify

body { margin:0; }
@page { margin: 4pt; }

in the my global CSS file, and in the cover page XHTML file I add in an override just after the link to the standard CSS like this:

<link rel="stylesheet" href="../styles/style001.css" type="text/css" />
<style type="text/css">
body {margin:0; padding: 0; border-width: 0; }
@page {margin: 0; padding: 0; border-width: 0; }
</style>

And now my cover stretches to fill the screen as much as possible. Setting padding and border-width to 0 as well as the margin might be overkill, but it does no harm as far as I know.

Can you use the @page { margin: 4pt; } command to set different margins for left, right, bottom and top?

ugerhard · 09-17-2009, 05:40 AM

Quote:

Originally Posted by Slite

Can you use the @page { margin: 4pt; } command to set different margins for left, right, bottom and top?

Yep, you can use margin-left, margin-right, margin-top, margin-bottom in the @page selector; the "margin: *top* *right* *bottom* *left*" syntax should work, too.

Slite · 09-17-2009, 05:42 AM

Quote:

Originally Posted by ugerhard

Yep, you can use margin-left, margin-right, margin-top, margin-bottom in the @page selector; the "margin: *top* *right* *bottom* *left*" syntax should work, too.

Cool, thanks!

ugerhard · 09-17-2009, 05:45 AM

Quote:

Originally Posted by pdurrant

Thank you again for this - it's sorted out one puzzle for me to do with the cover page.

I have not tested this, but CSS2 (which epub should implement) allows for a special selector for first pages:

@page :first { *your styles here* }

See http://www.w3.org/TR/CSS2/page.html#page-selectors:

Slite · 09-17-2009, 05:46 AM

Quote:

Originally Posted by ugerhard

I have not tested this, but CSS2 (which epub should implement) allows for a special selector for first pages:

@page :first { *your styles here* }

See http://www.w3.org/TR/CSS2/page.html#page-selectors:

Does ePub adhere to the complete CSS and/or CSS2 standard?

ugerhard · 09-17-2009, 05:52 AM

Quote:

Originally Posted by Slite

Does ePub adhere to the complete CSS and/or CSS2 standard?

Not the complete standard:

http://www.idpf.org/2007/ops/OPS_2.0_final_spec.html:
"not all CSS 2 properties are included"

but the @page :first etc. pseudo classes are supported, see

http://www.idpf.org/2007/ops/OPS_2.0...tml#Section3.3

pdurrant · 09-17-2009, 07:30 AM

I did see that and gave it a go, but I couldn't get it to work.

If it did work, I think it would apply to the first page of each flow in the document, not the first page in the ePub - so good for doing special things at chapter starts, not so good for the cover image :-)

Quote:

Originally Posted by ugerhard

I have not tested this, but CSS2 (which epub should implement) allows for a special selector for first pages:

@page :first { *your styles here* }

See http://www.w3.org/TR/CSS2/page.html#page-selectors:

09-15-2009, 01:39 PM	#1
lunged Enthusiast Posts: 44 Karma: 122 Join Date: Mar 2009 Location: Orlando, FL Device: iPad	How does one set the margin size? I have tweaked some novels with Sigil since it was released, but now I want to add a nice margin to a lot of works where there is none. I purchased an ePub from Shortcovers.com, and was pleased to see the margins didn't interfere with the page numbering! This would be a great addition to make my eBooks more aesthetically pleasing. I imagine it is done with CSS (which I know nothing about). Is there a nice WYSIWYG way doing this currently? Will a way be added? Thanks for the help, Sigil is shaping up quickly. EDIT: I am referring to left/right margins as well as top/bottom.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
set default ebook viewer window size?	smee	Calibre	3	10-02-2010 07:24 PM
Margin question	Switch	Calibre	11	05-13-2010 03:32 PM
How to shrink margin?	tomsem	Kindle Developer's Corner	2	12-11-2009 10:20 PM
calibre ignore margin-top and margin-bottom	bender	Calibre	2	12-11-2009 06:58 AM
Margin sizes...	M0zza	Calibre	2	09-22-2008 04:02 AM

09-15-2009, 02:27 PM	#3
lunged Enthusiast Posts: 44 Karma: 122 Join Date: Mar 2009 Location: Orlando, FL Device: iPad	Great, thanks! Now, is the coding way easy enough for someone to explain in this thread, or should I just wait for the WYSIWYG method? I do know some coding, just basic HTML and Objective-C, so I should be able to catch on pretty quickly. Thanks again.