ePUB creation

ePUB logo

QuarkXpress 9.5.4 Cascading Style Sheets (CSS) for ePUB

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/2014/08/17/building-an-epub/) 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/2014/09/03/centering-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

 

ePUB logo

Centering for an ePUB

This is how we center the text for our ePUB files. After creating our ePUB files we found that the centering of text didn’t always work – even on devices where we’d tested the ePUB files during the build. This is due to the ePUB that eventually ends up on the ereading device going through the proprietory load process for the device, and some of them render the centering commands differently. We therefore used a combination of approaches to centering – though it is also worth considering if you want to center at all. Some devices offer the user the chance to control how the text is shown, what justification to use, and some of the code suggested below will mean that the user’s preferences are ignored, so don’t use this approach too widely.

This is what is needed around the text you want to center within each of the text html files:
<p class=”yourclass”><span class=”centered”>Your text to center</span></p>

This is also needed, assuming that you want the whole ‘body’ centered then can add the ‘id’ centertext, but still do the spans around each individual paragraph (p):
<body class=xyz id=”centertext”>
With the main text area that makes up the ‘body’. This is the main area of the book chapter it starts with  <body> and ends with </body>
</body>

These are the controls for this that we included in the style.css:
#centertext {
text-align: center;
text-indent: 0em;
}
span.centered {
display:block;
text-align: center;
text-indent: 0em;
}

The style.css was associated to each file with the following code at the top of the html file in the head section:
<head>
css” rel=”stylesheet” type=”text/css” />
<title>Your title</title>
</head>


Definitions:

ePUB – format for an electronic book

ereader – device to read an ebook

css – cascading style sheet, set of shared formatting commands to control the appearance

html – hypertext markup language. The formatting words that go around the text to tell the ereader how you want the book to appear (within < and > characters)

0em – here used for text-indent, this gives the size of the indent. It says it is made up of no (zero) elements of the type called ’em’. The size of  em is the equivalent to the size of the ‘m’ character of the font you are using for that part of the text

#centretext – the name of this section of the css file

p, class, span, /span, /p, body, /body, head, /head, link, href, rel, type, title – html commands

text-align, text-indent, span.centered, display-block – css control commands


11 September 2014

ePUB logo

Useful Programs for ePUB Creation

We have recently started converting our books for ePUB format, and, although we’ve not used all the following, these are the programs we looked at using to create the files. Although we are novices at ePUB creation, with a background in IT and in software development we are sufficiently familiar with using diverse tools, reading format specification, and writing CSS and html. If this list is a bit daunting then there are many many companies around who will convert your books (from various original formats) to ePUB for you.


Programs


Adobe InDesign

http://www.adobe.com/uk/products/indesign.html

Unfortunately this is now only available on a SaaS (Software as a Service – or ‘Cloud’) basis, and is pretty expensive. There is a free 30 day option however so if you only have one book, and a short timescale then this might be an option. There is also a month-by-month and other subscription models – but all pretty expensive. It is however one of the industry standard applications.

QuarkXpress

http://www.quark.co.uk/Products/QuarkXPress/#1

This is also now available as a SaaS application. This also has a free 30 day option. It is now at version 10, however version 9 is available on eBay. You need a licensed copy if you get one from there though as you’ll need to upgrade to at least version 9.2 to be able to export ePUB files, although upgrading to the latest version available would be best. This is another industry standard application, and is the one we chose to use – however it isn’t without it’s problems.
It has Cascading Style Sheets (CSS) setup for the ePUB to use. During the setup you see the standard default layout, and you can’t change how this appears or add new options. You can overwrite the default CSS files with your preferred layout however – it is a bit messy but it does, with a little patience, work in the end, and for the second and subsequent books is actually not too long to setup.
It allows you to add some metadata that is exported with the file, although it doesn’t allow setting all metadata fields that are possible.
This was a useable tool (at v 9.5.2), despite it’s inadequacies and we’re pleased we decided to persevere with it.

Sigil

https://code.google.com/p/sigil/

This is a donation funded application, and we found this extremely helpful. It allows you to look inside the ePUB, and display the contents. You can choose to see the html or the display format. Any amendments to the HTML are displayed immediately. It shows you all the metadata so you can add or remove items in that.
It also has two handily file checking tools: one FlightCrew lets you check the html, and the second is a link to the W3C website where the CSS files are validated.
An excellent tool, and if you know html very handy.

Calibre

http://calibre-ebook.com/

This is a donation funded application, and is excellent at converting between different eBook formats. We did a trial with a conversion from an html formatted book (from a MS Word export to filtered html) to an ePUB, and the files created are excellent. As it is a ‘free’ tool we were concerned that the resulting ePUB might be a bit ‘noisy’ , i.e. have a lot of unnecessary html – but the files it produces really are very clean and very good. It could also handle one situation that QuarkXpress didn’t get right (it rendered a space between two underlined words correctly, or how we wanted it anyway – where QuarkXpress lost the space, e.g. does this work).
This includes a number of tools that allow you to view eBooks, edit eBooks, to change the format, and to load to different devices. We have largely used it to view ebooks and to load them to different devices for testing.
If we’d reviewed the generated ePUB files before getting QuarkXpress we probably would have stuck with this tool. It is much simpler to use and generated a file first time that actually took us 6 or 7 attempts to get back to using the other tools.

FireFox eReader

https://addons.mozilla.org/en-US/firefox/addon/epubreader/

This is an add-on to donation funded FireFox Mozilla. It lets you drag and drop the ePUB files into it and will render them for you into a displayed version. It is useful for testing the layout works.

ePUBChecker

http://validator.idpf.org/

This ePUB checker comes from the people writing the ePUB standards. It will tell you if you file complies with the ePUB2 or ePUB3 standard. If you are planning to use a website that is a distributor of the resulting ePUB, then you will need to have a ePUB file that passes the tests in this. Even if you load the ePUB file directly to some eRetailers then a prerequisite is often that the file must pass this checker – so it is worth checking the files yourself before loading them. If you have a lot of files to check then you can download the ePUBChecker and run it with a Java command, or just use the website link to browse to the file you want to check.

Kindle Previewer

http://www.amazon.com/gp/feature.html?docId=1000765261

Although this is for Kindle formats rather than for ePUB, it is a useful final check that the file is ok. It will convert the ePUB into the required format depending upon the device you want to check it in, and will show you the format of the ePUB book as it will appear on different Kindle devices.

Other eReaders

There are other free eReading programs that work on PCs, tablets and phones, and it is worthwhile trying the file out in a few as different readers render the html slightly differently and some settings don’t work in one but do work in others – you may need a combination of approaches to satisfy as many eReaders as possible.
A search for ‘ebook reader’ will find many tools, or ‘ebook reader yourdevicename’ will find ones for a particular device.

7-zip

http://download.cnet.com/7-Zip-64-bit/3000-2250_4-10905593.html

As the ePUB file extension is basically a .zip by another name, a file unzipping program like 7-zip is also useful.


Standards


idpf

http://idpf.org/epub

This is where you can read more about the ePUB standards. It includes a list of the metadata fields that you can set, as well as the html that is in the standard, and the format of the different ePUB files.

Daisy

http://www.daisy.org/daisypedia/daisy-standards

Daisy standard also includes other metadata values possible; it gives information on making ebooks more accessible.


20 July 2014