Setting up margins in ePUB and Kindle ebooks and @page rule

Question

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.

Answer 1

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.

Answer 2

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.