Hanging indents in ePub

This is meant to complete the first post about indents. Today I’ll talk about hanging indents.

Hanging indent is when all the lines in a paragraph but the first are indented. Like this:

Cras eu sollicitudin nibh. Duis felis nisl, sagittis nec pulvinar eget, mollis vel nulla. In et tortor felis. Aenean lobortis ligula eu orci vestibulum viverra. Phasellus fringilla tincidunt lectus sed vulputate. Vivamus id magna eu erat sagittis semper sed eu odio.

This is achieved combining two CSS properties: text-indent and padding-left. Padding is the amount of space between the element border and its content. For example, the following paragraph has a 20px padding around all it’s borders (the red line is around the paragraph border):

Cras eu sollicitudin nibh. Duis felis nisl, sagittis nec pulvinar eget, mollis vel nulla. In et tortor felis. Aenean lobortis ligula eu orci vestibulum viverra. Phasellus fringilla tincidunt lectus sed vulputate. Vivamus id magna eu erat sagittis semper sed eu odio.

And text-indent is used to set the indenting space of the first line of text.

The CSS rule applied to a paragraph needing hanging indent is something like this:

.hanging {
text-indent: -1em;
padding-left: 1em;
}

With padding-left we make the start of all the lines of the paragraph certain amount of space to the right. And by using a negative number on text-indent we make the first line to start a bit off to the left. The following paragraph has the proposed style (still maintining the red border to see the element of the paragraph easily):

Cras eu sollicitudin nibh. Duis felis nisl, sagittis nec pulvinar eget, mollis vel nulla. In et tortor felis. Aenean lobortis ligula eu orci vestibulum viverra. Phasellus fringilla tincidunt lectus sed vulputate. Vivamus id magna eu erat sagittis semper sed eu odio.

 

See the example in a real ePub (tested with Adobe Digital Editions and Calibre).

You’ll find the rest of the tips listing the posts with the tag epub-tips.

Categorías: ePub

Leave a comment