Wednesday, January 18, 2012

iBooks body margin contortions

 One annoying aspect of iBooks is how much whitespace is wasted on the margins of the body text. Applying background colors (cyan and yellow respectively) you can see that the <body> element is contained within the <html> element. 

It's possible, though, to squeeze a little more space (10 pixels on a retina display) out on the left by adjusting the left margin by 5 (CSS) pixels. For images, 5 pixels means 5 screen pixels as seen above.

On the right side, it turns out that setting "width:100%" on the body element, which you'd expect would be innocuous, actually pushes the the right side a little beyond the <html> edge, so things get clipped.
So presumably replacing "100%" with the appropriate pixel value would get you exactly to the edge...