Making Ebooks with InDesign: Module 4, Step 5
Subject(s):
InDesign to EPUB
Resource Type(s):
Step-by-Step
Audience:
Technical
Before reading this, you might want to read:
Add an <hr /> tag to denote an editorial space or context break. Often in ebooks that I encounter in the wild, an editorial break is marked only by space created in CSS — that is, some kind of no-indent-space-above style sheet that creates the desired space but doesn’t communicate the semantic meaning of the context break. Sometimes there is a dingbat of some sort, maybe marked as decorative maybe not.
In order to communicate to assistive technologies that this is a break worthy of a pause, you will need to add <hr /> to those breaks. You can regex this into place: find <p class=”noindent”> replace it with <hr /><p class=”noindent”>, for example.
If you want that editorial space to have a dingbat of some sort, you can give that field a class: <hr class=”dbat”/>. And then add some CSS to the style that break.
hr.dbat {
height: 1em;
background: transparent url(“../image/dbat.png”) no-repeat center;
background-size: 2.5em 1.25em;
overflow: hidden;
page-break-inside: avoid;
break-inside: avoid;
border:none;
}
It’s also possible to have a fake asterism, as seen in this snippet. In this case the text — that is the asterisks — are live but are buried in a <div> with the appropriate semantics applied.
<div class=”asterism” role=”separator” aria-label=”Interlude”>
* * *
</div>
Adjust as necessary to suit your content. I generally recommend JPEGs for images in ebooks, but using a PNG for a dingbat with a transparent background will work better here.