HRs

DP Official Documentation - Post-Processing and Post-Processing Verification

< Easy Epub

The problem

Unfortunately, although by default most browsers center our horizontal rules, e.g. <hr />, this is not true for e-readers using the same engine as Adobe Digital Editions (see Easy Epub/Viewing for how to get ADE if you don't have it). On those e-readers, the rules will be left justified, which will look odd. Since the way to fix them is so simple, you may want to make the few edits involved.

Guiguts default CSS

Depending on the version, the default CSS produced by Guiguts has a definition for horizontal rules like this

hr {
    width: 33%;
    margin-top: 2em;
    margin-bottom: 2em;
    margin-left: auto;
    margin-right: auto;
    clear: both;
}

and several classes, for example

hr.chap {width: 65%}

The fix

Instead of defining the left and right margins as "auto", we have to set them to the correct percentage. Since the full width is 100%, we need to subtract the width of the rule to leave the percentage taken by margins, and then halve that to get the amount for each margin. For example, for the default (33%) hr, we get 100-33=67, and half of 67 is 33.5, so the replacement for the above CSS would be

hr {
    width: 33%;
    margin-top: 2em;
    margin-bottom: 2em;
    margin-left: 33.5%;
    margin-right: 33.5%;
    clear: both;
}

and

hr.chap {width: 65%; margin-left: 17.5%; margin-right: 17.5%;}

Of course, you may prefer to have narrower horizontal rules - just choose the percentage width (W) that looks good, or matches the original, then use the (100 - W) / 2 formula to get the margins needed, for example

hr.chap {width: 20%; margin-left: 40%; margin-right: 40%;}
hr.r5 {width: 5%; margin-left: 47.5%; margin-right: 47.5%;}

If you feel confident about it, you could make these changes permanently in your Guiguts header, so that they will be correct for all future HTML files you generate.

See the section below, to see how to take advantage of the above edits for the horizontal rules you use between chapters

Replacing Guiguts styles with classes

You might find that Guiguts has placed

<hr style="width:65%;" />

between each chapter.

If you search and replace

hr style="width:65%;"

with

hr class="chap"

and similarly for any other horizontal rules, then you will be using your newly redefined class, and your horizontal rules will center nicely on the e-readers.

To comment or request edits to this page, please contact lhamilton.

Return to DP Official Documentation Menu