Our team knows knows how to adjust margins using the CustomBookStyles.css, but when we do this it doesn’t respect the slightly bigger gutter margin. Instead it makes all margins the same.
Does anyone have a CustomBookStyles.css that modifies the margin but still respect the gutter margin?
Highly appreciated,
On behalf of the SIL-Education for Life team,
Koen
Bloom applies the side-right CSS class to right-hand pages and side-left to left-hand ones. Inside the page element is one with class marginBox which represents the page content. It’s absolutely positioned, so you can write rules to change its left position. You are probably already familiar with changing its width; usually the marginBox has the same width on all content pages, but a different value for ‘left’ to vary the right and left margins.
Things get a little complicated because usually you don’t want a gutter margin on the covers. So the cover marginBox has a greater width. To achieve this the regular Bloom rules have a lot of conditions, and unless you use !important your rules must have at least as many to win out over the standard ones.
The following content produces very narrow margins with a gutter, as explained in the comments.
Note that the space before .marginBox (and lack of space before other periods) is significant.
/* An A5 portrait page is 148mm wide. Class A5Portrait identifies such pages.
Inside the page element is one marked marginBox, whose width and left properties
determine the margins.
The standard Bloom rules make most marginBoxes width: 108mm. Left pages have
left:15mm, right pages have left: 25mm. This results in 15mm outer margins
and 25mm gutter margins (148-108 = 15+25).
The standard front and back covers have left:15mm, width:118mm, which produces a
symmetrical page with 15mm on both sides. (Although the front cover
is considered a 'right' page, and the back cover a 'left' one, they never appear
adjacent to another page so gutter margins are generally not appropriate.)
The following rules adapt this to give a drastically decreased margin of 5mm on
all pages, while keeping the 10mm gutter on non-cover pages.
*/
/* make non-cover A5Portrait pages have content area 128mm wide to leave room
for 5mm+15mm margin. */
:not(.calendarFold):not(.outsideFrontCover):not(.outsideBackCover):not(.screen-only).A5Portrait .marginBox {width: 128mm;}
/* make side-left pages content be 5mm from the left, and side-right ones 15mm */
:not(.calendarFold):not(.outsideFrontCover):not(.outsideBackCover):not(.screen-only).A5Portrait.side-left .marginBox {left: 5mm;}
:not(.calendarFold):not(.outsideFrontCover):not(.outsideBackCover):not(.screen-only).A5Portrait.side-right .marginBox {left: 15mm;}
/* front and back cover are 10mm wider, leaving room for 5mm on each side */
.A5Portrait.outsideFrontCover .marginBox, .A5Portrait.outsideBackCover .marginBox {left: 5mm; width: 138mm;}