Steps and Stages. To avoid confusion, this chapter refers formally to each stage in the flow chart as a ‘stage’, whereas it refers equally formally to each sub-step within a given stage as a ‘step’.

Validation. Chapter Two, Resources, points out the importance of​validation during production. Hence, a number of the stages upon which the sections below expand involve a validation step, where you pass your content through an automated tool, which will detect errors in your code.

You might see these steps as pedantic and overly fussy, but this is not true because it is easy to mis-code some piece of HTML and/or CSS, such that it is not valid – it is all too easy to introduce an error with a slip of a finger on a key. This may cause some aspect of the styling or layout to fail, and given that you will have to fix such problems at some point, you might as well do that as early as possible, as that is the fastest way to proceed overall.

An Iterative Process. Do not attempt to do everything at once should this be the first time you have generated an e-book file, as you are bound to make mistakes that may prove discouraging. This chapter presents the production process in idealised form, which suggests that it is possible to navigate it successfully in a single pass, and while this is true, the overwhelming reality for us all is that production is an iterative process. That is, it requires frequent looping back to fix the problems that crop up, and to take opportunities to improve things.

In this light, do not expect to generate your deliverable in a single, flawless production run, because that simply will not happen. In fact, you will have a far easier experience if you take just a sample chapter initially, or even just a small portion of a chapter, and format that to generate the first version of your book file. Only after you have succeeded in that should you then attempt to format further chapters, but even then, it may be better to process those in an incremental fashion too, by adding each chapter one at a time.

Install Tools. Install a copy of Sigil, Calibre or whatever EPUB editor you intend to use, and then install any browser plug-ins such as an HTML validator. Following that, install Amazon's Kindle Previewer and Kindle for PCs, and then install the text editor you will be using.

Create Directory Structure. Create a directory (or ‘folder’) structure on your machine that looks like the diagram below the flow chart (where we assume that the title of your book is ‘Lorem Ipsum’). This structure can be a child of any appropriate directory on your machine, and remember that you can skip the Fonts directory if you will not be using custom typefaces. However, if you will be using one or more custom typefaces, you should copy the relevant font files to that directory.

Save Source Files without Smart Quotes. Word processors such as Microsoft's Word convert characters such as ordinary 'straight quotes' (the ones that your keyboard generates) to their ‘curly’ equivalents, and converts hyphens to n-dashes. This is to lend documents a more professional and elegant feel, however the encoding that Word uses for such characters is not part of UTF-8,​which is the standard encoding that you should use in any web- or e-book-related HTML that you create.

Text editors vary in the way that they save HTML code that contains such characters. Some editors convert them to ASCII straight quotes, others keep them as they are. In the latter case, those characters will not appear when a user agent renders the final deliverable, and will appear instead as what is known as Unicode's replacement character (often a rendered as white question mark in a black diamond).

Appendix F, Unicode and All That, goes into some detail​on this, but the essential production point here is that you should save your source chapter files without smart quotes (and any other so-called ‘smart’ characters). Suggested search terms for help on this are:

word smart quotes convert

Set Source Files to Read-Only. Once you pass the Set Up stage, you will not return to editing your word processor files, and you will make any further changes to the content (say, to fix grammatical or spelling errors) only by editing the HTML files. Moreover, you should preserve your original content in case you make a mistake when creating the HTML version, in which case you will need recourse to a master copy. Given this, you should mark all the word processor files as read-only, which will freeze them as they are, thus precluding inadvertent changes.

If you are unclear on how to make a file read-only, the suggested search terms are:

files computer read-only

To which you should append the name of your operating system or computer brand, such as ‘Windows’ or ‘Apple’.

Create Blank Page. Start the text editor that you have acquired and installed on your system, create a new file, and enter the code you see below, which replicates the​example given in the Page Anatomy section in Chapter Three, Structure.

<!DOCTYPE html>
<html>
   <head>
      <meta charset = 'UTF-8'/>
      <title>Lorem Ipsum</title>
   </head>

   <body>
   </body>

</html>

Do replicate the indentation, where you indent each child element by three spaces, but do not use tabs, just hit the space bar three times (or set your text editor, if possible, to insert three spaces for each stroke of the tab key). Using spaces rather than tabs is preferable because, if you pay attention laying out your code properly,​you will find that tab characters tend to cause sudden jumps in alignment when you are deleting excess spaces. The same applies when you use <pre> elements to lay out textual sections, where you wish the spaces in the rendered content to match the corresponding spacing in the HTML.

Save this file in the Text directory you created for Step B above, under the name ‘BlankPage.htm’ (or similar). You will use a copy of this file as a template for each new chapter you convert to HTML format.

Copy Blank HTML File. For a given chapter in your book, make a copy of the BlankPage.htm file you created in Step D in the previous stage, and change its name to the name of the chapter.

A valuable tip here: it is very good practice to prepend a number to the beginning of the filename that corresponds to the chapter ordering. For example, if your first three chapters are called Lorem, Ipsum and Dolor respectively, then you should name the corresponding HTML files, ‘01_Lorem.htm’, ‘02_Ipsum.htm’ and ‘03_Dolor.htm’. Similarly, you should name any front matter such as the title page, the table of contents, and any introduction as ‘00a_Title_Page.htm’, ‘00b_ToC.htm’ and ‘00c_Introduction.htm’.

This ensures that the files take the correct order automatically when you view the contents of the directory that holds those files. Equally, they will also take the correct order in the EPUB automatically when you import them into Sigil. Moreover, the ordinal numbering will match the cardinal numbering. That is, the first chapter's prefix will be ‘01_’ the second's ‘02_’, and so on.

To develop this point: if any chapter contains one or more images, you should give each image the same prefix and name as the chapter to which it belongs. Thus, if ‘02_Ipsum.htm’ has two JPG images, you should name them ‘02_Ipsum_00.jpg’ and ‘02_Ipsum_01.jpg’. As with the chapter files, they will then appear in the correct order in the directory that contains them, and in the EPUB when imported into Sigil; and these two practices help greatly in avoiding confusion during the production process.

To develop this idea still further, you may have images that are shared among multiple chapters, in which case giving them a chapter numbering does not apply. One approach here is to prepend ‘00_’ to each image's filename.

Note here that there should be no spaces, slashes or colons in any filename. So, if the first source chapter file is called, for example, ‘Lorem Ipsum.docx’ the corresponding HTML file should be called ‘01_Lorem_Ipsum.htm’ or ‘01_LoremIpsum.htm’ (whichever takes your fancy, but do be consistent in applying the nomenclature you adopt). Note also that every HTML chapter-file should reside in the Text directory that you created in the previous stage.

Open HTML File. Open the newly-created HTML file for the chapter in question in your text editor.

Open Source Word Processor File. Open the corresponding word processor file for the chapter in question.

Select, Copy and Paste Content. Select all content in the file within the word processor (there is no need to use the mouse, Ctrl-A will suffice). Copy the selection, and then paste the content into the <body> element within the corresponding HTML file in the text editor. That is, you should paste the content between the <body></body> tags, as shown in the code sample below.

<body>

<!--

Your chapter content should
go here and nowhere else.

-->

</body>

Note that if your content looks like this in your word processor:

…it will paste into your text editor looking like this:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

…where each paragraph takes up just one line. Do not let this worry you, as it has a positive rather than deleterious effect on the production process, as the next section below explains.

Place Chapter Title in <title> Element. A self-evident step: enter the title of the chapter into the <title> element. Unlike the filename restriction mentioned for the previous stage, spaces, slashes and colons are perfectly acceptable here.

Delimit Titles and Subtitles. Place <h1></h1> tags around the chapter title, and <h2></h2> tags around any subtitles etc. See the​Headings section in Chapter Three, Structure.

Delimit each Paragraph. Place <p></p> tags around each paragraph in the chapter, as shown in the​Basic Structure section in Chapter Three. That is, and using the example from the previous stage above, if your pasted content looks like this:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

…it should look like this after you have emplaced the <p></p> tags:

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>

<p>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>   

This is why the fact that your paragraphs paste-in as single, long lines of text is of benefit because all you need do is paste this fragment:

</p>

<p>

…between each line, using no more than a keystroke to paste before you move the cursor down one line. Avoid using the mouse and all that tedious left- and right-clicking; on a Windows machine, you need press only Ctrl-v then the Down-Arrow-key, which is far faster (other operating systems will have similar keystroke conventions).

It follows that you need only repeat that keystroke combination until you reach the end of the file, and so remember here that Chapter Two, Resources,​champions the use of an independent, professional, text editor because such tools give rich support for what are known as ‘macros’. That is, a decent editor will allow you to record a set of keystrokes, such as those spelt out above, such that a single key-press will execute those keystrokes in a single step. Once recorded, you need only position the cursor at the correct point in the file before hitting the replay key repeatedly until you reach the end of the file.

This too is where​columnar selection is so valuable. Once you have applied the <p></p> tags, you can use that feature to indent the contents of the body element by three spaces in a single action.

Apply Italicisation etc. Refer back to the​Text Effects section in Chapter Three for this step. Remember that super-scripting includes changing ordinal numbers like ‘1st’ into ‘1^st’, and ‘2nd’ into ‘2^nd’, which is a simple matter if you use the search and replace functionality in your text editor. However, do remember that the cardinal value ‘eleven’ is written ordinally as ‘11^th’ in English, and so you should remember to do a search/replace on the first three ‘teen’ ordinals too in a given chapter. That is, you must convert ‘11th’, ‘12th’ and ‘13th’ to their superscripted equivalents too.

Convert Special Characters. Referring back to the​Character References section in Chapter Three will help with this step. Remember to change any plain single-/double-quotes and apostrophes with their ‘printer's’ equivalents (‘curly quotes’). Similarly, where you have used hyphens as en dashes and em dashes (that is, ‘-’ instead of ‘–’ or ‘—’) then you should change them accordingly. You should also convert any exotic characters to their character-reference equivalents.

Note that executing this step satisfies in part Rule​Two, Produce Professionally.

Insert <img> Elements. You can skip this step if your book does not use images internally. That is, if the only image in the book is the cover, you can go to Step G below, as you should not include the cover art using an <img> element (as pointed out below in Stage 4). However, if the content does employ one or more images you need to include those by inserting <img> tags, and so you may need to refer back to the​Images section in Chapter Three for details on this.

Remember also that​KindleGen converts all standalone​PNG images to their JPG equivalents, so it is better if you do that conversion yourself using a tool such as​GIMP, such that you import only JPG images into your EPUB editor. This will give you control over the compression ratio you employ, which will give you control in turn over the size of those image files. It will also improve KindleGen's performance, in the case of image-heavy books, as it absolves that tool from performing the conversion itself, which can slow the compilation process considerably. See Appendix B​if you are unsure about image formats, and the significance of this point.

Insert all Other Elements. If your book's content comprises more than text, headings and images, and contains elements such as sidebars, tables and the like, insert the HTML that implements these.

Validate. Save the file and then drag-drop it on to your web browser. After giving it a cursory visual check, run the validation tool that you have installed, or validate it by using an online resource such as that provided by the World Wide Web Consortium (the ‘W3C’, the body that develops and maintains the HTML and CSS standards).

The search-terms suggestion for this is:

w3c html validator

You can validate a tract of HTML in three ways using this resource. You can:

Create Stylesheet.css. Create a new file in your text editor, and save it under the filename ‘Stylesheet.css’ or some other meaningful title to which you give a ‘.css‘ extension. The decision here is yours, as you can use any legal filename (‘legal’ meaning ‘acceptable to your computer’ rather than ‘law of the land’). Ensure that you situate this file in the Styles sub-directory described in the Set Up section above.

Note that, if you use one or more custom fonts in your book, you should implement the workaround for the ‘font-stripping’ bug that Chapter Four, Style,​documents. That is, the only stylesheet that your HTML files should import should be an intermediary that contains one or more @import directives, which cause the user agent to pull-in the stylesheet file(s) that stipulate the stying and layout for your book. If you do use the workaround, references in the rest of this section to Stylesheet.css should be interpreted accordingly.

Insert Link Elements. This step applies to the Table of Contents file as well as to the chapter and other files, and the code for the <head> element in each file should look like the following:

<head>
   <title>Lorem Ipsum</title>

   <link rel  = 'stylesheet'
         href = '../Styles/StyleSheetImporter.css'
         type = 'text/css'/>

</head>

Create CSS Definitions. Create within Stylesheet.css the styling and layout rules that will control the appearance of your book, in accordance with the material in Chapters​Four and​Five.

Insert <style> Element. This conditional step applies only if your content requires styling and layout rules that are specific to individual chapters. It entails inserting a <style> element into the <head> element, as Chapter Four​demonstrates, and the code should look like the following:

<style type = 'text/css'>

/*
Your CSS code goes here.
*/

</style>

Create Page-Specific Definitions. If you do follow Step D, you should populate each <style> element you have inserted with the CSS definitions that will control specific points of styling and layout within the chapter in question.

Validate. You should validate your CSS at this point, and fix any problems that become evident before continuing with Stage Six. As with validating your HTML, you can use an online service provided by the W3C, which operates in exactly the same way as their HTML validator. That is, you select all the code in your Stylesheet.css, copy it and then paste it into the form on the W3C site. Clicking ‘Validate’ will then yield a report that indicates any errors in the code. The search-terms suggestion for locating this service is:

w3c css validator

Optimise SVGs. If you are using SVG images, remember to convert them to their optimised forms, and to change the corresponding href attributes in the HTML file you have created to indicate the optimised image files. Do consult Appendix E​for the relevant details on this in respect of validating the EPUB you generate.

Import HTML Files into Text Folder. On starting Sigil, you will see a set of folders displayed in the left hand part of the window. This represents the structure and content of the EPUB file that Sigil will write out every time you instruct it to save your work. Remember here that the folder structure you see does not represent any folder structure that exists on your machine (as​pointed out in Chapter One, Strategy), and that you should not think of it in this way.

To proceed, right-click on the Text folder you see to the top left of the display, or select ‘File/Add/Existing Files’ on the menu. A file selection box will appear (which does reflect the directory structure on your machine), through which you should navigate to the directory where the HTML files for your chapters reside. Select those files that you wish to import, and click ‘OK’.

If you are using Sigil, you do not have to import the stylesheet file explicitly, nor the image files to which <img> elements point, as the tool will analyse the HTML files as it pulls them in, and will detect any such dependencies, causing it to import images and stylesheets automatically. Currently, however, it does not import image files to which any CSS definitions refer (which is a defect in Sigil), so see Step D if you are using images as element backgrounds. If you are using Calibre, however, importing an HTML file does not cause that tool to import image and stylesheet files automatically, and so you will have to import all such files yourself, as detailed in Step D below.

Note that, if you have not followed the advice given above about prepending a number to each filename, you will now have to order the chapters manually by clicking and dragging in the chapter listing in Sigil. That is, numbering them prior to this stage is a great way to obviate a rather tedious process, because Sigil orders the files alphanumerically as it imports them, where 0, 1, 2, 3 etc. come before anything else.

Delete Section0001.htm. The file you see in Sigil called Section0001.htm is simply an empty placeholder that forms part of every new EPUB file that Sigil generates. It is present at the outset because Sigil does not allow an empty Text folder and so you should delete it.

Import Auxiliary Images. If, as mentioned in Step B above, your CSS code makes use of images (and you are using Sigil), you should import these explicitly. The same applies to all images if you are using Calibre, irrespective of any CSS.

To do this, follow the equivalent steps that you took when importing the HTML. That is, right-click on the Images folder in Sigil (or select ‘File/Add/Existing Files’ on the menu), then navigate to the directory where your book's images reside, and then select the files on which your book's CSS draws. (If you are using Calibre, you should select ‘File/Import Files into Book’ on the menu.)

Import Font Files. If you use custom typefaces, you must also import those explicitly too (whether using Sigil or Calibre), using the same approach that you used to import the HTML files.

Import Cover Image. Import the book's cover image in the same way that you import auxiliary images in Step D.

Set Cover-Image Semantics. Locate the cover image in the Images folder that you see in Sigil's display, and right-click on it. A menu will appear, in which you should click ‘Add Semantics’. You should click on ‘Cover Image’ in the sub-menu that appears. (Note that this is an identical process in Calibre – you right-click on the image name and select the correct option on the menu that appears.)

Set Metadata. Click ‘Tools’ on the main menu, and click ‘Metadata Editor’. A dialog box will appear, into which you need enter only the title of your book into the Title field, and the names of the author(s) into the Author field. Obviously, if your book is not in English, you should also select its principal language from the drop-down list. Then click ‘OK’.

Create Logical ToC. The ‘logical’ table of contents is not the HTML file that contains the table-of-contents links to the book's chapters. It is an internal block of information (the ‘NCX’ file) that governs the chapter and section listing that you see when selecting Go To (or similar, such as a button marked ‘≡’) on a software or hardware e-reader, and it is mandatory.

To complete this step, select Tools again on the main menu, and select ‘Table of Contents/Generate Table of Contents’. A dialog box will appear, which lists all the <h1>, <h2> etc. elements in the chapters in your book. You can configure this listing by clicking ‘Select Headings to Include in ToC’, and choosing one of the options that appears. You can also elide items from the main listing by clicking on the check boxes that you see in the ‘Include’ column. If you make a mistake at any point, simply click ‘Cancel’ and repeat this entire step from the start.

Click ‘OK’ when you are satisfied with the table of contents that you have created, and save the EPUB by choosing ‘File/Save’ on the menus (there is a button that will do the same). Once saved, you will have on your machine an EPUB – the first version of your book in electronic format.

Validate. To validate the EPUB, you can use the validators that are built-in to Sigil and Calibre. In the case of Sigil, select ‘Tools/Validate EPUB with Flightcrew’, on the main menu. A supplementary pane will appear in the application's window, which will give a report on any problems discovered. If you are using Calibre, click the ladybird icon in that application's EPUB editor.

A far better alternative to the in-built validators, however, is the online resource provided by IDPF (International Digital Publishing Forum), the search terms suggestion for which is:

epub validation idpf

On arrival at the IDPF's site, you will need to locate on your machine the EPUB you have created, and then tell the validator to get cracking. You machine will then upload the EPUB to the validator, which will provide you subsequently with a report. As with the built-in validators, it is impracticable to enumerate here all the possible problems you may discover, so you will have to read any error notifications you receive and act accordingly.

It requires passing a physical device of some sort (e-reader, laptop or tablet computer) to your proofreader, which precludes your using it again until proofreading is complete. That is, you cannot pass across just the EPUB or Mobi/KF8 file because any annotations created for that file are stored in a separate file on the user agent. This would mean that your proofreader(s) would have to pass back the annotations file, and there is scope here for error, as this assumes that your proofreader has the requisite technical understanding.

You never see the final work in hard copy, which will cause you to miss out on seeing the material in a new light, and thus to miss an opportunity for product refinement.

It is a lot faster for a person to use a good-old-fashioned pen or pencil to annotate the work – at times, there really is such a thing as too much technology.

The text selection feature does not work on user agents like the Kindle Touch in the context of​floated text. That is, if you touch and hold on the screen on a textual element that is floated to the left or right, you will find that dragging your finger does not have the usual effect of marking out a stream of content. This precludes proper electronic-only proofreading on at least some devices.