MobileRead Forums

MobileRead Forums (https://www.mobileread.com/forums/index.php)
-   Sigil (https://www.mobileread.com/forums/forumdisplay.php?f=203)
-   -   How does one set the margin size? (https://www.mobileread.com/forums/showthread.php?t=56616)

lunged 09-15-2009 02:39 PM
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.

Valloric 09-15-2009 02:53 PM
Quote:
Originally Posted by lunged (Post 593205)
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 03: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 04:03 PM
Quote:
Originally Posted by lunged (Post 593269)
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 05:24 AM
@page selector
 
Quote:
Originally Posted by pdurrant (Post 593321)
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 05: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 (Post 595188)
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 06: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 (Post 595188)
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 06:12 AM
Quote:
Originally Posted by pdurrant (Post 595201)
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 06:40 AM
Quote:
Originally Posted by Slite (Post 595204)
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 06:42 AM
Quote:
Originally Posted by ugerhard (Post 595225)
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 06:45 AM
Quote:
Originally Posted by pdurrant (Post 595201)
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 06:46 AM
Quote:
Originally Posted by ugerhard (Post 595228)
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 06:52 AM
Quote:
Originally Posted by Slite (Post 595230)
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 08: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 (Post 595228)
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:


All times are GMT -4. The time now is 06:30 PM.

Powered by: vBulletin
Copyright ©2000 - 3.8.5, Jelsoft Enterprises Ltd.
MobileRead.com is a privately owned, operated and funded community.