Linux Format

Design and publish your very own ebooks

Nick Peers reveals how to turn any creative writing endeavour into a digital book that you can share with friends, family and your adoring public.

- Nick Peers dreams of republishi­ng his best work in book (or ebook) format. If only he wasn’t so lazy…

Nick Peers reveals how to turn any creative writing endeavour into a digital book that you can share with friends and family.

Ever wanted to become a self-published author? Looking for a simple way to create a digital publicatio­n – whether book or magazine – that can be read on a variety of devices? The solution lies in creating your book in EPUB format, which formats your book using familiar web languages (XHTML and CSS). The resulting content is dynamic and responsive, meaning it can be viewed on screens both large and small without needing adjustment.

The process of putting an EPUB document together from scratch might be daunting, were it not for the likes of Sigil (https://sigil-ebook.com), a powerful but userfriend­ly ebook editing tool. Even then, its array of features and options might be a little intimidati­ng, which is why we’ve done all the hard work for you, uncovering the key tips and techniques you need to create a book that can be easily shared or published digitally.

Sigil can be installed through the Ubuntu Software

Store, but the ubuntu-focal-universe version is outdated. Instead, be brave and install the latest version from source, which is simpler than you might think. If you’re running Ubuntu 18.04 or later, open a Terminal window and install the following dependenci­es:

$ sudo apt-get install build-essential git

$ sudo apt-get install cmake

$ sudo apt-get install qtbase5-dev qttools5-dev qttools5de­v-tools qtwebengin­e5-dev

$ sudo apt-get install python3-dev python3-pip python3-lxml python3-six python3-css-parser python3dul­wich

$ sudo apt-get install python3-tk python3-pyqt5 python3-html5lib python3-regex python3-pillow python3-cssselect python3-chardet

You’re ready to download the program’s source code:

$ git clone https://github.com/sigil-ebook/sigil.git

This will unzip the contents into a folder called Sigil

in your home directory. Time to build Sigil:

$ mkdir ~/sigil-build

$ cd ~/sigil-build

$ cmake -G “Unix Makefiles” -DCMAKE_BUILD_

Type=release ../Sigil

$ sudo make

$ sudo make install

Once installed, Sigil is accessible from the Applicatio­n Launcher. It’ll open to display a three-paned window: on the left is the Book Browser, which contains all the elements that make up your ebook. You’ll see a series of folders, plus two documents: toc.ncx, which contains your book’s table of contents, and content.opf, which is where your book’s structure is defined (and which can be left untouched). More on all of this later.

You’ll also see a series of folders, inside which you’ll find the individual files that make up your content – text (XHTML), styles (CSS), images, fonts and so on – are stored. You’ll see the Text folder contains one precreated element, Section000­1.xhtml. This is currently displayed in the middle pane – the editing window – while the right-hand pane displays a real-time preview of your book’s page as you edit it.

Putting together your ebook therefore requires a basic knowledge of the HTML code that underpins it – it’s pretty straightfo­rward, but we recommend bookmarkin­g www.w3schools.com as an excellent resource for understand­ing how each element works.

Thankfully, you don’t need to learn HTML from scratch to put your book together – you’ll see a range of buttons above the main display that simplify the process. Press the B for bold button for example and

Sigil will insert a tag inside of which your bold text is placed. Select some text before pressing B and the text will be enclosed inside the tags.

Basic editing

You can type directly into the edit pane if you’re writing your book from scratch or paste your content (as plain text) from another source. Whichever approach you take, Sigil is quite unforgivin­g: either you’re going to have to input HTML code as you go, or paste in a block of text and then manually add the HTML elements – including the all-important
(line break) and

(paragraph) tags yourself.

If all this sounds like too much hard work – and frankly it is – then check out the box (right) for details of installing the Pageedit companion tool, which gives you access to a WYSIWYG interface. Whether typing from scratch or pasting in text from another source, Pageedit makes the process much easier. The interface is similar to your word processor for starters, and if you paste in text here it’ll automatica­lly add the required paragraph tags to break it up for you.

Inject some style

Editing your text in Pageedit isn’t quite the same as editing it in your word processor, however. The crucial difference comes down to the way HTML styles and formatting differ from what you’re probably used to. First, you’ll see the only font options offered are a limited choice of styles: bold, italic, underline, strikethro­ugh, subscript and superscrip­t. At first glance there’s no means of changing font type or size, but we’ll cover that shortly.

When it comes to styling titles or section headings then your best bet is to make use of Headings. These six styles don’t simply change the way your text looks; they can also be used to create a hierarchic­al structure that will come in handy when generating your book’s table of contents.

Select your text and then either choose Format>heading or click the h* button on the toolbar.

There are six Heading styles available to you: Headings 1-3 produce text that’s larger than regular ‘body copy’ style, while Heading 4 is the same size, and Headings 5-6 are smaller.

Import images

Your ebook will likely need at least one image – for the cover – and probably more to populate the inside pages too. It pays to prep these separately in your image editor following these guidelines: choose RGB over CMYK if the option exists, and keep the dimensions to a manageable size: no more than 1,000 pixels on their longest side should be sufficient in most cases. Finally, save files in JPEG or GIF rather than PNG. All these steps should minimise the file size for each image, reducing the size of your book in turn. When it comes to naming your files, avoid spaces (so glabels_template. jpg rather than glabels template.png).

Once prepped, import your images: right-click the Images folder in the Book Browser pane and choose Add Existing Files… Once imported, you’ll see a > button appear next to the Images folder – click this to reveal the images. Right-click one for more options such as removing it (choose Delete), renaming it or setting it as the cover image for your ebook (more on that later).

To place an image in your book, navigate to the point where you’d like it to appear and choose Insert > File… A new dialog will open, displaying all files that you’ve imported into your document. Select your chosen file and click OK.

You’ll see a new tag referencin­g the image (src=) and giving it an alternativ­e name should the image go missing (alt=). The image should now be visible in the Preview pane, but you’ll immediatel­y see

the problem: it’s too large. While many ebook readers will automatica­lly shrink the size of the image to fit their screen (Calibre is one example), it’s a good idea to apply some CSS styling to ensure the image is always resized.

CSS files define rules to help standardis­e your book’s layout and format. Each rule – or ‘class’ – contains a number of ‘properties’ that defines its style and formatting. You then link the CSS file to your XHTML document before using the ‘class=’ attribute. The stepby-step guide (below right) reveals how to create a new CSS file, link it to your XHTML document and then add a class named ‘bodyimage’. As soon as you’ve created it and added class=”bodyimage” to the tag you’ll see the image resize to fit the Preview pane.

Changing fonts

If you want to use a specific font in your ebook – overriding the ebook reader’s own defaults – then you can specify a common font like Arial using the fontfamily property. If the font isn’t present, you have two choices: the first is to specify a fall-back font. You’ll typically choose the catch-all ‘serif’ or ‘sans-serif’ font, which instructs the ebook reader to use its own system default). Your choice depends on your original font, so if you’d picked a sans-serif font like Arial, you’d define font-family like so: font-family: Arial, sans-serif

Your second choice is to embed the font in the document itself. This will work with most ebook readers out there, but keep the ‘sans-serif’ or ‘serif’ fallback in place – just in case. If you go down this route, be sure to only choose fonts you can distribute freely – typically open-source fonts from the likes of Google Fonts (https://fonts.google.com) and Open Foundry (https://open-foundry.com/fonts).

Fonts are supplied as families – with multiple typefaces covering italic, bold and other variants. Save all these to your hard drive, then extract the .otf or .ttf

files from the zip before using File>add>existing Files… to select all the fonts you wish to include – after clicking Open you’ll see them all listed under the Fonts folder. Expect a single font to consume around 100KB of space, with a family consuming up to 1MB – with this in mind, limit yourself to one or two font families.

Once imported, each embedded font needs to be defined in your CSS file using the @font-face class.

Doing this by hand is fiddly, so why not take advantage of Sigil’s support for plugins? Visit the plugin index at www.mobileread.com/forums/showthread. php?t=247431 and click the Cssfromfon­ts link. After downloadin­g the zip file, select Plugins>manage Plugins in Sigil and click Auto to set the path to Python (/usr/ bin/python3 in most cases).

Click Add Plugin to select the plugin zip file, which should appear in the list. After clicking OK, choose Plugins> Edit>cssfromfon­ts and all your fonts will be added to your CSS file, with bold and italic variations grouped as part of the same family for ease of use.

If you want to change the default font across your document, add a ‘p’ class (note there’s no period mark before the p, unlike with custom classes) to your CSS file. The same rule can be applied to multiple classes simply by separating each one with a comma – the following example sets the default font for body text, headings 1-3 and bulleted lists: p, h1, h2, h3, li { font-family: ’Open Sans’, sans-serif }

Advanced editing

Need to caption your text? This can be done with the help of the

and
tags. You can style your image and caption further by creating a .figure class within your CSS document. Like so much HTML and CSS, it’s quicker to cannibalis­e existing code than type your own from scratch – go to www.w3.org/style/ Examples/007/figures.en.html to see some HTML5 code you can paste into Sigil and then adapt to your own needs.

The following class – which we’ve called toptip – defines a text style that renders your text smaller than in the surroundin­g body copy, enclosed in a light blue box with border:

.toptip { background-color: #ACE5EE; font-family: ‘Open Sans Light’; font-size: smaller; text-indent: 0; border: thin silver solid; margin: 0.5 em; padding: 0.5 em }

Put your book together

You can incorporat­e your entire book in a single XHTML document, but it’s a good rule of thumb – particular­ly with larger works – to split it into multiple documents, one per chapter or section. Once you’ve finished your first document, create your second by right-clicking the first under Text and choosing Add Blank HTML File to create a new document from scratch or Add Copy to create a copy of your existing document if you plan to use that as a template. If you create a new document from scratch, don’t forget to link it to your stylesheet.

Once your chapters are all in place (you can drag and drop them to change their running order), it’s time to move on to the cover, table of contents and (optional) index. Start by prepping a suitable image. Remember that the book is likely to be in portrait format, so use an aspect ratio of 2:3 or 3:4. Follow the same set of rules for prepping images for the book itself, but experiment with a larger image – say 1,500 pixels high – to allow for a better-quality cover image.

Once that’s been done and you’ve imported the image into your ebook, right-click it in the Book Browser pane and choose Cover Image so ebook readers will know to display it as your book’s cover in their library. Next, choose Tools>add Cover… to create a cover.xhtml document with your chosen image – this will appear at the front of your book when it’s opened.

Next, create a table of contents: choose Tools>table Of Contents>generate Table Of Contents and you’ll see a list of headings from each document. You can untick any individual headings you don’t want to include, or click the