opubWriter

CSS (Cascading Style Sheets) is just one of the many open standards that are used to build epub books and, like XML, it follows the long-established aim of separating content from presentation. The content documents of epub books should contain just that – content, meaning words and images. How the content is presented should be a combination of the author’s intentions and the reader’s preferences.

The author/publisher can define the style for a book in terms of its fonts, colours, and its positioning of text and images. This might be a publisher’s house style or the idiosyncratic whim of the author. Following the CSS approach, these style decisions are encapsulated in files with a .css extension which are referenced in content documents using <link> statements (unseen by the wysiwyg editor user). An example might be:

<link rel=’stylesheet’ type=’text/css’ href=’css/my_favourite_styles.css’ />

What actually happens is that your ebook is loaded into a reading system – a smartphone, Sony Reader, Kindle etc. – and is subject both to how the reading software uses and presents your styles and how much freedom they give to the reader to set their own preferences. Your styling efforts may come to nought when the reader selects taupe text on a puce background.

However, this article is about how to add, modify, and apply stylesheets using opubWriter. After you login to opubWriter and select a book in your library, you can click on the Styles menu option to see which CSS stylesheets are part of the book. The following screenshot shows the Styles screen for a sample book.

The screenshot shows there are two CSS stylesheets in the book; these are called ‘titlepage-css’ and ‘book-css’. The book-css stylesheet is selected for display in the editing window. It’s in this window that you set the styling of the elements that appear in your documents and where you define new classes of styling that will apply to all elements associated with those classes.

I can’t pretend that CSS is easy or intuitive and the average author may have no interest or aptitude in using it. However, for a book designer in a publishing business CSS is of paramount importance for the presentation of epub books. This article can’t teach you CSS, it can only show you how to use your knowledge of CSS to control the look and feel of books prepared using opubWriter.

The following screenshot is a reminder of the copyright document that’s inserted by default into every new opubWriter ebook.

Notice that the text is black, Times New Roman, and left-justified.

In the following screens, this tutorial will show how to upload, modify, and apply CSS styles.

There are two screens to help this process.

The Styles screen lets you manage which CSS files are in your book and lets you define the styling in each file.

The Style Usage screen lets you control which CSS stylesheets are applied to which content documents – remember, each content document has embedded in it some <link> statements saying which stylesheets to include – and there may be more than one. The following screenshot shows the results of uploading a stylesheet called red.css.

Stylesheets don’t get much simpler than this. The line:

* {color:red;}

says, effectively, “make everything red”.

In order to apply this stylesheet to the Copyright document, we click on the Style Usage menu option which, as the following screenshot shows, creates a table in which the rows are the content documents in your book and the columns are the available stylesheets.

The checkboxes show which stylesheets are used in which content documents.

In this example, you can see that the titlepage-css.css stylesheet is used only by the title page document and the book-css.css stylesheet is used by the copyright document.

The red.css stylesheet, which has only just been uploaded, is not used anywhere.

The next screenshow shows that you can select and deselect stylesheets for any or all documents in the book by checking and unchecking the checkboxes.

Having made these changes, it’s important to click on the Save button to apply these settings to each affected document. opubWriter checks and modifies each content document to ensure it has the appropriate <link> elements to match your decisions.

To check what has happened, we go back to the Content screen and select the Copyright document.

The results are shown in the following screenshot. Notice how the text is red becasue the red.css stylesheet was applied.

The next lesson in this tutorial demonstrates that you can apply more than one stylesheet to a content document.

The results aren’t always what you might expect because the Cascading feature of CSS means that there may be several ways in which a given element might be rendered by the display software. This arises because there may be several contradictory declarations applying to the given element.

The display software, whether it’s a browser, a dedicated ebook reader, or a phone, has to decide what to do and it uses measures of inheritance and specifity to decide which styling to apply. In the example that follows, both the titlepage-css.css and red.css are applied to the Copyright document.

In this screenshot you can see that, on the Style Usage screen for the example ebook, both of the stylesheets have been checked.

Clicking Save and returning to the content editing screen, the following screenshot shows the Copyright document in the editor window.

Now the text is centred, as specified by the titlepage-css styling, but the text is in red, following the styling in red.css.

It might not always be this straightforward to get the exact styling that you want, which is where the specifity aspect comes into play. If you create a CSS class e.g.

.myStyle {font-family:Verdana; font-size:1.1em; color:blue;}

then apply that style to some selected text, the style will take precedence over any more remote, less specific declarations.

The following screenshots demonstrate how this works in opubWriter. First, we go to the Styles screen and select red.css. Remember, this makes every element red. We add a style class like the one written above which specifies a slightly larger, blue, Verdana font.

Save these changes and, on the Style Usage screen, select only red.css for the Copyright document.

Go to the editing screen and select the Copyright document. As before all of the text is shown in red.

Now, find the styles dropdown list in the top toolbar of the editing area. This lists the style classes that are available across the available stylesheets. In our case, there’s only one style called myStyle.

If we select the first line of the Copyright document and select the myStyle style from the dropdown, that style will be applied to the selected text. This is shown in the following screenshot.

This tutorial has shown how opubWriter lets you work with CSS styling. You have seen how to add stylesheets to epub books, how to edit the styles by, for example, adding new CSS classes.

You have seen on the Style Usage screen how to select which styles are applied to which content documents, and you have seen how to apply an individual CSS class to some selected text.

Finally, if you decide that you don’t want to use a stylesheet you can delete it from the book by clicking the delete button next to the stylesheet name on the Styles screen - provided it’s not referenced by any of the content documents. If it is used and you still want to remove it, go to the Style Usage screen and find out where it’s referenced. You can remove any references you find, but consider first how those documents will be styled after you deselect the stylesheet you want to delete. You might want to apply another existing stylesheet, or perhaps upload a new one first.