8

I am currently creating an ePUB3 file for converting it to Kindle format, and for it be compatible to other ereading devices that support epub.

I noticed a directive in the css file of one of the DRM-free epub books that I am using to help me practice. It goes like this

@page { margin: 5px !important; }

After testing this it seems like this is used to add top, bottom, left and right margin spaces on the page. But it seems like (from the message I got while converting on KindleGen) that Kindle doesn't support this. Should I leave it as it is in my ePUB css file while converting to kindle hoping KindleGen to ignore it ? Also, do kindle page margins have to be specified separately or kindle devices work that out on their own with built-in settings. In addition to this, what do you think are the most optimum margins (top, bottom, left and right) values to set, in the @page directive and in the other devices.

2 Answers 2

8

Quite a few rendering engines are actually taking @page into account. Others like iBooks or Kindle are ignoring it and overriding the margins' values set for body with default values.

I can confirm @page works well in Adobe Digital Editions -- and some but not all apps + devices using Adobe's RMSDK.

To sum things up, you can use it to set a margin for each page/window/screen while top and bottom margins set for body are just applied to the first (top) and the last (bottom) page of every new (x)HTML file.

As regarding values, don't set them in em in this reflowable world of ours. The more you will increase the font-size, the more those margins will increase as well.

Px and pt will remain the same, whatever you do.

% will remain the same and be interpreted as % of screen, which is the most "reflowable-compliant" choice in theory. 3% of a phone screen < 3% of a tablet screen < 3% of a computer screen.

1
  • Thanks for your answer! It explains quite well what I was looking for. But could you please explain a bit more what you mean when you say ... <<the first (top) and the last (bottom) page of every new (x)HTML file.>> ?
    – QPTR
    May 15, 2014 at 6:34
1

JohnLepic is quite right that some devices ignore @page while others accept it happily. Because of this, I find it's best practice to use a small @page value if I use one at all—it doesn't make sense to design around a feature that may or may not be supported, after all. I generally go for 5px; all around.

3
  • Thanks, I remember reading somewhere that the instruction !important is there to indicate to the device that this is important and must be followed . Is that true ?
    – QPTR
    May 15, 2014 at 6:35
  • That is a valid css instruction, yes. Personally, I don't bother with it in ebooks for the most part, since it takes away some of the flexibility that is so important in reflowable ebooks.
    – Tom
    May 15, 2014 at 6:38
  • 1
    @QPTR "!important" means that if there's conflicting CSS rules, that it should always use the one marked as "!important".
    – Chuck
    Aug 24, 2014 at 20:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.