Adding pictures to your book

Books are not just linear text—at least not all of them. Without getting into a philosophical discussion about the evolution of the book and what the next generation will look like, suffice it to say that we like pictures. Pictures and graphic elements are used to illustrate, illuminate, and decorate. In our fairytale book, The Obstructive Bridge, we are going to add a decorative initial cap to the first paragraph. In this lesson we will cover both the new html element (<img>) and additional styling that is needed to make it line up where we want it.

First, the .ZIP file “Bridge.zip” should be copied to your hard drive and unpacked. This new package has the same files as previous packages but also includes a decorative image named “o.jpg.”

1. In your text editor, open the file “content.html.” The image element is an empty element (has no end tag). It contains three necessary elements: The “img” element name, the url of the graphic, and alternate text (alt) that will be read by screen readers or displayed on mouse-over by devices that do not display images.


2. Locate the first <p> tag in the document. We are going to replace the “O” in ONCE with a graphic, so delete the “O.” Immediately following the <p> tag, insert the following line:
   

   <img src="o.jpg" alt="Once" />



3. The first line of the html file should now read:
   

   <p><img src="O.jpg" alt="Once" />NCE UPON A TIME,

   
   That is all that needs to be done to the HTML file, so save it and close it. Next we will work on the style sheet to indicate how we want the image to be displayed. Open “styles.css” in your text editor.


4. We will add two lines in the style sheet. One line will remove the indent from the first paragraph of text that follows a <h1> heading. The second will cause the image to “float” to the left of the paragraph. This means that it will line up with the top of the line of text and the text will wrap around it. At the end of the css file add the following two lines:
   

   h1 + p { text-indent:0; }

img { float:left; }



5. Save and close “styles.css.” Open “Bridge.opf” in your text editor. We need to add the graphic element to the manifest so that readers understand it is part of this eBook. Locate the “manifest” portion of the file and before the closing </manifest> tag add the following line:
   

   <item id="o" href="O.jpg" media-type="image/jpeg" />



6. Save and close the file, then drag and drop the three changed files into the OEBPS folder in your .ZIP file. Change the extension to .ePUB and open your book in a reader.

You have now added a graphic element to your eBook. We will deal more extensively with images in a future chapter and discuss some of the kinds of files you can use for images, different ways of displaying them in your text, and how to organize them in your document. Next, we’ll add several new chapters to the eBook.

Preparing a manuscript

I spent 3 hours Tuesday converting one chapter of a manuscript that was submitted to me to a propper HTML file for formatting as an ePUB. The authors inadvertently broke virtually every rule of manuscript preparation before giving it to me. I got to thinking that maybe people still don’t understand the fundamentals, so here are a few of the rules that I’d like to see adhered to when I convert a manuscript to ePUB or to a print/PDF layout.

1. No extra spaces of any kind. If you work in HTML or other W3C formats, you’ll discover that extra whitespace is ignored when the the page is laid out, so what is the big deal? It is confusing to see space in the source file that doesn’t translate into the layout. We use space (like indenting nested levels) to mean specific things in the source file, so don’t make the job harder by putting in extra space. I use search and replace to add the first batch of element tags into the file. If I replace all returns with </p><p>, I will get double paragraph spacing in the result. If this is the same file that you will submit to a publisher (like me) for print or PDF layout, all that extra space has to be stripped out to assure a good book design. Help us by not putting it in. What are extra spaces?
   • Double spaces after punctuation
   • Double enter after a paragraph
   • Tabs of all sorts (these are often converted to spaces in .TXT files)


2. Use styles. Distinguish between headings and body text by using the “Heading 1,” “Heading 2,” and “Normal” or “Body Text” styles on the paragraph. When doing a print layout, we can actually import these styles into the layout program and make the design of the book 100% easier to implement. When preparing for HTML, we can search the styles and add the appropriate element tags quickly and easily.


3. Don’t use a lot of custom overrides for font-styles to indicate different speakers, thoughts, places, times, emphasis, or sidebars. The only font-styles I want to see are:
   • Italics to indicate internal thoughts of a character, foreign words, book titles, and very occasionally a word for which the emphasis changes the meaning of the sentence. Don’t use italics for anything else. Ever.
   • Bold to indicate a lead-in sub-heading that is part of the paragraph. Bold may also be a part of a style (like Heading 1) to help distinguish a heading from surrounding text. Any font-style or font-weight that is part of a heading or other style definition is fine since that will all be subject to what I define the style to be when I do the layout. Rarely, bold may be used for indicating someone is shouting, or in non-fiction to indicate a class of information (like Warnings).


4. Never use underlining. If I see this, I automatically convert it to Italics, so unless you are typing a manuscript on a Royal manual typewriter that doesn’t have Italics, don’t use underlining. The only place I want underlining is in Web addresses and email addresses. These will be added automatically by your word processing program or by my layout.


5. Avoid ALL CAPS whenever possible. This can be used sparingly for shouted lines, but if you have a character who shouts all the time, let “he shouted” suffice. Anytime you use all caps (Shift Lock) when you type, I have to retype in lower case and then apply a style to it.


6. Use special characters. This is really critical because I have to read every line of your manuscript to check for this. Double dash (--) should be an em-dash (—). Check your typographer’s quotes. We use ' and " to indicate feet and inches and for special codes in XML elements. Quotes look like ‘ ’ and “ ”. If your word processing program converts these automatically, great! Just make sure they are pointing the right direction. The word processing program will convert 'Tis to ‘Tis instead of ’Tis. If your word processing file has these special characters in it, they will be preserved when I convert the file to a UTF8 text file.

Finally, a word about images. Yes, I want to see the images in the manuscript where they belong, but don’t do a lot of formatting to make them appear right. Just create a new paragraph with the image in it and continue. Don’t try to float the image, annotate it, or position it. I will need each original image as a separate file as well. When I do either the print/PDF layout or the HTML, I will have to import or link to the original images. This will have to be done manually. Don’t make the job harder.

Preparing your manuscript properly will cut as much as 30%-50% off the cost of converting it to either eBook or print. You could use the savings, and I could use the extra time.