We have just finished creating and checking the ePUB files for our latest book: Inspector Hobbes and the Gold Diggers by Wilkie Martin. And we thought we’d share the formatting we have used for it.
In our earlier post Building an ePUB with QuarkXpress 9.5.4 and Sigil (https://witcherleybooks.com/2020/02/22/building-an-epub-with-quarkxpress-9-5-4-and-sigil/) we described how we format ePUBs in QuarkXpress and how we use the pre-defined Cascading Style Sheets (CSS) style names in the QuarkXpress files to control the format of the ePUB when it is output. In this post we share what the contents of the amended style.css and toc.css files that we have used for our books when generating the ePUBs from QuarkXpress. Though please note that we then also make further amendments to the ePUB file after it is exported, so this gives us the start position and does the vast majority of the book formatting.
These are used for English fiction books with a simple layout, with one or two photos/logos and some centralized text. These books are reflow format and do not included any fixed format, tables or indexes.
We use the standard QuarkXpress style names for these areas of the books:
- – body = for body
– byline = for author name
– figure = for figures
– figure-caption = for some centralized text, for the copyright page, for the company name and ISBNs
– figure-credit = for figure credit
– indented-para = for the standard chapter text – all indented
– pullquote = for subtitle text
– title1 = for the book title
– title2 = for the advert headers for othr books available
– chapter-name = for the chapter numbers, and section titles
– headline1 = for the first paragraph in a chapter or section (not indented)
– headline2 = for the last paragraph in a section (indented and with a space after it to separate the sections)
To these we have added styles for centering and a style id for copyright (see our post Centering for ePUB (https://witcherleybooks.com/centering-text-for-an-epub/) which describes why and how we’ve used this.
The QuarkXpress CSS files are found in this folder: QuarkXpress9\XTensions\DigitalPublishing\Templates\css
Here is the replacement style.css file that we have used.
.body {
margin-left: 0.5em;
margin-right: 0.5em;
orphans: 1;
widows: 1;
}
.byline {
font-size: 125%;
text-align: center;
text-indent: 0em;
margin-top: 1em;
margin-bottom: 1em;
}
.figure {
text-align: center;
text-indent: 0em;
}
.figure-caption {
font-size: 75%;
text-align: center;
text-indent: 0em;
margin-bottom:1em;
}
.figure-credit {
margin-top: 1em;
margin-bottom: 1em;
margin-left: 2em;
text-align: left;
text-indent: 2em;
}
.indented-para {
text-indent: 1.25em;
}
.pullquote {
font-size: 125%;
text-align: center;
text-indent: 0em;
margin-top: 1em;
margin-bottom: 2em;
}
.title1 {
font-size: 150%;
text-align: center;
text-indent: 0em;
line-height: 2em;
}
.title2 {
margin-top: 1em;
text-align: center;
text-indent: 0em;
margin-bottom: 1em;
}
.chapter-name {
font-size: 150%;
text-align: center;
text-indent: 0em;
margin-bottom: 1em;
}
.headline1 {
}
.headline2 {
text-indent: 1.25em;
margin-bottom : 1em;
}
.bold {
font-weight: bold;
}
.italic {
font-style: italic;
}
.underline {
text-decoration: underline;
}
.strikethrough {
text-decoration: line-through;
}
.strikethrough-and-underline {
text-decoration: line-through underline;
}
.superscript {
vertical-align: super;
}
.subscript {
vertical-align: sub;
}
.superior {
vertical-align: super;
}
p {
margin-top: 0;
margin-bottom: 0;
orphans: 1;
widows: 1;
}
p.title1 {
text-align: center;
text-indent: 0em;
}
p.title2 {
text-align: center;
text-indent: 0em;
}
p.pullquote {
text-align: center;
text-indent: 0em;
}
p.byline {
text-align: center;
text-indent: 0em;
}
p.figure-caption {
text-align: center;
text-indent: 0em;
}
p.figure {
text-align: center;
text-indent: 0em;
}
p.chapter-name {
text-align: center;
text-indent: 0em;
}
p.headline1 {
}
p.headline2 {
}
#copyright {
font-size: 75%;
text-align: center;
text-indent: 0em;
}
span.centered {
display:block;
text-align: center;
text-indent: 0em;
}
And the replacement toc.css that we have used:
#toc-style {
font-size: 100%;
}
#toc-style li {*/
list-style-type: none;
}
#toc-style ol {
font-size: 100%;
}
#toc-style ol li {
padding-left: 10px;
list-style-type: lower-alpha;
}
#toc-style ol ol {
font-size: 100%;
}
#toc-style ol ol li {
padding-left: 5px;
list-style-type: lower-roman;
}
.space-fix {
visibility: hidden;
line-height: 0;
}
These are the formats we’ve used so far. It is possible we will find things we need to change in them later. Once we generate the ePUB we use a number of devices to check the layout is ok and matches what we want. We can’t guarantee these will give you what you want, they are just an example of what can be done.
If you notice anything wrong or can suggest a better way of laying out any of the above then please let us know, we’d be happy to hear from you.
Definitions:
centered – text/pictures that appear in the middle of the page (using American spelling)css – cascading style sheet – a common holding place for the html commands used to control the layout
ePUB – electronic publication, a zipped file containing files for each book chapter and layout files that make up an e-book
toc – table of contents