calibre to epub to sony reader - neat margins

cybmole · 10-18-2011, 11:52 AM

could someone please explain what exacly goes into creating the optimised left & right page margins that I see on sony reade, with converted epubs please.

I ask because calibre does something to badly formatted epubs, that improves the visual appearance, yet all I can see added to epub code is the @page line in each xhtml file, but that only specifies top & bottom margin, not left & right.
( also it renames CSS entries to calibre1, calibre2 etc which obscures what other changes it may have made )

I know that if I have a poorly formatted epub where the L/R margins are either too wide or are completely missing ( i.e. where text runs right up to bevel on reader), then an epub-to-epub convert will fix it -

so I tried to fix one manually yesterday, & could not see how to do it within CSS. eventually I gave up & reconverted it & now it is fine.

so what exactly does calibre do to reset L & R margins please

Starson17 · 10-18-2011, 02:13 PM

Quote:

Originally Posted by cybmole

...all I can see added to epub code is the @page line in each xhtml file...
so what exactly does calibre do to reset L & R margins please

I can't answer the question, so I'm waiting for someone who can. However, I'll toss out a tidbit I learned a while back when reading up on @page in another thread. It was hard to search @ and atsign etc. in connection with CSS directives. It turns out the generic category for these is an "at-rule" so a search for "at-rules css" will turn up information on @page and similar @ directives.

jackie_w · 10-18-2011, 02:42 PM

Quote:

Originally Posted by cybmole

so what exactly does calibre do to reset L & R margins please

Calibre adds the page L/R margins (as specified in Convert - PageSetup) to the css class used in the <body> tag of the text content html files.
e.g. if a typical chapter html file has <body class="calibre2"> then you need to look at this bit in the stylesheet.css file

Code:

.calibre2 {
margin-left:5pt;
margin-right:5pt;
...
}

Starson17 · 10-18-2011, 03:09 PM

Quote:

Originally Posted by jackie_w

Calibre adds the page L/R margins (as specified in Convert - PageSetup) to the css class used in the <body> tag of the text content html files.

That's simple. Do you know the purpose of adding the @page directive?

jackie_w · 10-18-2011, 03:21 PM

Quote:

Originally Posted by Starson17

That's simple. Do you know the purpose of adding the @page directive?

No, not really. I think @page is the only way to get a top/bottom margin on every page. Putting it in the <body> css would only give you a top margin on the first page of a chapter and a bottom margin on the last page of a chapter.

I had also assumed (maybe wrongly) that Calibre puts an @page statement into each html file (rather than once in the css file) so that some html files (e.g. the cover page html) can have top/bottom margins different to those set in Convert - PageSetup.

kovidgoyal · 10-18-2011, 08:17 PM

@page is put in once per html file.

ldolse · 10-18-2011, 10:34 PM

The other bit with the @page directive is top and bottom margins only really work with @page (since they're defined a the 'page' level). Many ebook publishers put the top and bottom margins on the body tag, and this would only affect the top and bottom margin on the first and last page of the xhtml flow (top of the first page, bottom of the last) - the pages in the middle would have zero margins.

The other confusing bit is that many publishers put additional margins in the adobe .xpgt file, which is proprietary to ADE - often both the css and xpgt need to be modified in that situation - I think Calibre removes these during conversion these days.

The modify ePub plugin, which should be released soon, can modify the margins in any ePub to match Calibre's prefs without requiring a full conversion.

DoctorOhh · 10-18-2011, 10:37 PM

Quote:

Originally Posted by cybmole

I know that if I have a poorly formatted epub where the L/R margins are either too wide or are completely missing ( i.e. where text runs right up to bevel on reader), then an epub-to-epub convert will fix it

Jackie_w already explained how calibre keeps the letters off of the very edge. Calibre also gets rid of wide margins utilizing the Remove fake margins (this may be a default setting) setting under Preferences - Common options - Structure detection. I believe this seeting causes calibre to look for and remove and left or right margins that are set for 90% or more of the paragraphs.

So if your book uses calibre4 for all regular paragraphs and the css for calibre4 gives a left margin of 2em having this setting checked will alter that margin to 0em. Also I believe this setting checks for page templates and alters them in a similar fashion.

cybmole · 10-19-2011, 12:53 AM

Hmm - thanks all but there's nothing here so far that I was not already aware of. for te manual fix I'd gone thru the original CSS looking for all margin left & margin right but the text still showed as running right up to bevel.I could post the before & after CSS for the book in question but its a huge long list.

maybe it would be more instructive to pose the question in reverse: what would I need change in the fine calibre conversion so that I lose the neat L & R margins & the text reverts to flowing right up to bevel ?
the converted css has margins & paddings set to zero & I assume negative values are not allowed, so how was the text made wider than that to begin with ? The" before" versions of css p class indent & nonindent also have zero margins, I can't see what has changed , unless the addition of display block was what's needed ?
before:
<p class "indent>blah blah

css:
p.indent
{
text-indent: 1.00em;
margin-top: 0.0em;
margin-bottom: 0.1em;
margin-left: 0em;
margin-right: 0em;
text-align: justify;
}

after

css

.indent {
display: block;
font-family: "Times New Roman", Times, serif;
margin-bottom: 0.1em;
margin-left: 0;
margin-right: 0;
margin-top: 0;
text-align: justify;
text-indent: 1em
}

DoctorOhh · 10-19-2011, 01:07 AM

Quote:

Originally Posted by jackie_w

Quote:

Originally Posted by cybmole

for te manual fix I'd gone thru the original CSS looking for all margin left & margin right but the text still showed as running right up to bevel.

Calibre adds the page L/R margins (as specified in Convert - PageSetup) to the css class used in the <body> tag of the text content html files.
e.g. if a typical chapter html file has <body class="calibre2"> then you need to look at this bit in the stylesheet.css file

Code:

.calibre2 {
margin-left:5pt;
margin-right:5pt;
...
}

Jackie explains it above. This info is in the <body> tag and applied to the whole document and is paragraph independent. Go to any individual html page in the ePub and see what class the body tag is and adjust that class accordingly.

cybmole · 10-19-2011, 01:29 AM

i'd checked the body tag already
before there was no class on body, just....

</head>

<body>
....
with a CSS definition:
body
{
font-size: medium;
line-height: 1.2em;
margin-top: 1em;
margin-left: 0em;
margin-right: 0em;
margin-bottom: 5.000000pt;
margin-top: 5.000000pt;
font-family: "Charis";
}
NB original CSS has body , not .body
after
<body class="calibre1">

.calibre1 {
display: block;
font-family: "Times New Roman", Times, serif;
font-size: 1em;
line-height: 1.2em;

padding-left: 0;
padding-right: 0
}

so I'm still not seeing it ( assuming lack of explicit padding definition defaults to zero )

DoctorOhh · 10-19-2011, 01:46 AM

Every ePub in my library has been converted using calibre and every book that I have looked at has a Body class that includes what Jackie placed above.

Here is one example

<body class="calibre">

.calibre {
display: block;
font-size: 1.25em;
line-height: 1.2;
margin-bottom: 0;
margin-left: 5pt;
margin-right: 5pt;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
text-align: left
}

This is how calibre keeps the text from going right up to the "bevels." As Jackie stated this is controlled via Preferences - Common Options - Page setup.

On top of the above calibre also inserts into each html page the following:

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

If you don't want the text to run up to the bevels then insert the left and right 5pt margins as seen above.

If this doesn't point in the right direction then I am confused about what you are looking for.

cybmole · 10-19-2011, 01:52 AM

solved:

recap:
1.i like the calibre default conversion - it seems to add just enough space between text & bevel
2. my problem book had NO space between text & bevel & I could not puzzle out why

answer.
the original CSS had a definition for body ( shown above), it did not have a definition for .body
if I add a dot i.e. make that a definiton for .body then all is well

no idea why there was no dot for that 1 entry in original CSS.

so I just need to understand the dot function in CSS

sample CSS
body { blah blah} ....... not good

insert a dot:

.body { blah blah} ....... all OK

ldolse · 10-19-2011, 01:53 AM

The margins defined in a Calibre conversion aren't in the CSS file - they're actually in the header of each xhtml file.

body { blah blah} without the dot should have worked for right and leve margins (it wouldn't work for top and bottom). @page is better.

DoctorOhh · 10-19-2011, 01:55 AM

Quote:

Originally Posted by ldolse

The margins defined in a Calibre conversion aren't in the CSS file - they're actually in the header of each xhtml file.

The left and right margins are in the CSS see post 12 above for exactly where they are located.

10-18-2011, 11:52 AM	#1
cybmole Wizard Posts: 3,720 Karma: 1759970 Join Date: Sep 2010 Device: none	calibre to epub to sony reader - neat margins could someone please explain what exacly goes into creating the optimised left & right page margins that I see on sony reade, with converted epubs please. I ask because calibre does something to badly formatted epubs, that improves the visual appearance, yet all I can see added to epub code is the @page line in each xhtml file, but that only specifies top & bottom margin, not left & right. ( also it renames CSS entries to calibre1, calibre2 etc which obscures what other changes it may have made ) I know that if I have a poorly formatted epub where the L/R margins are either too wide or are completely missing ( i.e. where text runs right up to bevel on reader), then an epub-to-epub convert will fix it - so I tried to fix one manually yesterday, & could not see how to do it within CSS. eventually I gave up & reconverted it & now it is fine. so what exactly does calibre do to reset L & R margins please

10-19-2011, 01:46 AM	#12
DoctorOhh US Navy, Retired Posts: 9,863 Karma: 13806776 Join Date: Feb 2009 Location: North Carolina Device: Icarus Illumina XL HD, Nexus 7	Every ePub in my library has been converted using calibre and every book that I have looked at has a Body class that includes what Jackie placed above. Here is one example <body class="calibre"> .calibre { display: block; font-size: 1.25em; line-height: 1.2; margin-bottom: 0; margin-left: 5pt; margin-right: 5pt; margin-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 0; padding-top: 0; text-align: left } This is how calibre keeps the text from going right up to the "bevels." As Jackie stated this is controlled via Preferences - Common Options - Page setup. On top of the above calibre also inserts into each html page the following: @page { margin-bottom: 5.000000pt; margin-top: 5.000000pt; } If you don't want the text to run up to the bevels then insert the left and right 5pt margins as seen above. If this doesn't point in the right direction then I am confused about what you are looking for. Last edited by DoctorOhh; 10-19-2011 at 01:56 AM.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Can't seem to change epub margins	Desertway	Calibre	7	01-19-2012 04:28 AM
Neat solution for a misbehaving reader screen	Tunney	enTourage eDGe	8	12-02-2011 03:07 AM
Epub to mobi margins..	Corran006	Calibre	0	08-27-2010 08:39 PM
epub vs lrf - why choose epub for sony reader?	Mitchll	Calibre	25	03-11-2010 09:39 PM
Testing margins in ePUB.	Jellby	Workshop	8	01-03-2010 11:57 AM

10-18-2011, 08:17 PM	#6
kovidgoyal creator of calibre Posts: 43,954 Karma: 22669822 Join Date: Oct 2006 Location: Mumbai, India Device: Various	@page is put in once per html file.

10-18-2011, 10:34 PM	#7
ldolse Wizard Posts: 1,337 Karma: 123455 Join Date: Apr 2009 Location: Malaysia Device: PRS-650, iPhone	The other bit with the @page directive is top and bottom margins only really work with @page (since they're defined a the 'page' level). Many ebook publishers put the top and bottom margins on the body tag, and this would only affect the top and bottom margin on the first and last page of the xhtml flow (top of the first page, bottom of the last) - the pages in the middle would have zero margins. The other confusing bit is that many publishers put additional margins in the adobe .xpgt file, which is proprietary to ADE - often both the css and xpgt need to be modified in that situation - I think Calibre removes these during conversion these days. The modify ePub plugin, which should be released soon, can modify the margins in any ePub to match Calibre's prefs without requiring a full conversion.

10-19-2011, 12:53 AM	#9
cybmole Wizard Posts: 3,720 Karma: 1759970 Join Date: Sep 2010 Device: none	Hmm - thanks all but there's nothing here so far that I was not already aware of. for te manual fix I'd gone thru the original CSS looking for all margin left & margin right but the text still showed as running right up to bevel.I could post the before & after CSS for the book in question but its a huge long list. maybe it would be more instructive to pose the question in reverse: what would I need change in the fine calibre conversion so that I lose the neat L & R margins & the text reverts to flowing right up to bevel ? the converted css has margins & paddings set to zero & I assume negative values are not allowed, so how was the text made wider than that to begin with ? The" before" versions of css p class indent & nonindent also have zero margins, I can't see what has changed , unless the addition of display block was what's needed ? *before:* <p class "indent>blah blah css: p.indent { text-indent: 1.00em; margin-top: 0.0em; margin-bottom: 0.1em; margin-left: 0em; margin-right: 0em; text-align: justify; } *after* css .indent { display: block; font-family: "Times New Roman", Times, serif; margin-bottom: 0.1em; margin-left: 0; margin-right: 0; margin-top: 0; text-align: justify; text-indent: 1em }

10-19-2011, 01:29 AM	#11
cybmole Wizard Posts: 3,720 Karma: 1759970 Join Date: Sep 2010 Device: none	i'd checked the body tag already before there was no class on body, just.... </head> <body> .... with a CSS definition: body { font-size: medium; line-height: 1.2em; margin-top: 1em; margin-left: 0em; margin-right: 0em; margin-bottom: 5.000000pt; margin-top: 5.000000pt; font-family: "Charis"; } NB original CSS has body , not .body after <body class="calibre1"> .calibre1 { display: block; font-family: "Times New Roman", Times, serif; font-size: 1em; line-height: 1.2em; padding-left: 0; padding-right: 0 } so I'm still not seeing it ( assuming lack of explicit padding definition defaults to zero )

10-19-2011, 01:52 AM	#13
cybmole Wizard Posts: 3,720 Karma: 1759970 Join Date: Sep 2010 Device: none	solved: recap: 1.i like the calibre default conversion - it seems to add just enough space between text & bevel 2. my problem book had NO space between text & bevel & I could not puzzle out why answer. the original CSS had a definition for body ( shown above), it did not have a definition for .body if I add a dot i.e. make that a definiton for .body then all is well no idea why there was no dot for that 1 entry in original CSS. so I just need to understand the dot function in CSS sample CSS body { blah blah} ....... not good insert a dot: .body { blah blah} ....... all OK

10-19-2011, 01:53 AM	#14
ldolse Wizard Posts: 1,337 Karma: 123455 Join Date: Apr 2009 Location: Malaysia Device: PRS-650, iPhone	The margins defined in a Calibre conversion aren't in the CSS file - they're actually in the header of each xhtml file. body { blah blah} without the dot should have worked for right and leve margins (it wouldn't work for top and bottom). @page is better.

Advert

Advert