Chapter 4
Fonts, Images, and Colors
Understand how to embed and use fonts Understand how to embed and use images
Learn about SVG images
Learn about the various color schemes
Learn how to determine grayscale from colors
Any EPUB can greatly depend on fonts to enhance it. Fonts need to be included within the EPUB file so all readers can have access to it. Images are also important. Many books include pictures, not counting the cover picture. There are many uses for pictures, including in comic books and magazines.
Scalable Vector Graphics (SVG) images are very small image files that can be useful in an EPUB.
Even though monochrome reading devices have no real need for color, using color is important. Colors will be displayed in various shades of gray. There is also the ability to know what color will look like in grayscale. In some cases, two colors may be similar when converted to grayscale and then will not be distinguishable from each other.
Fonts
Dealing with fonts in an EPUB can be one of the biggest differences in a reading experience. Imagine if, like on a PC, you could change your text to any font you wish. Well, it can be done with an e-reader. Most e-readers support True Type Fonts (TTF) and Open Type Fonts (OTF). Others may support SVG fonts and Web Open Font Format (WOFF).
TIP
It is usually best to stick with True Type Fonts to be assured of compatibility.
In an EPUB, fonts can be used to change all the text, certain sections of text, specific letters, or just to add flair. Some fonts may look great, but then some are not easy to read. Certain script fonts can be so embellished as to be undecipherable. Don’t go overboard with changing fonts.
Embedding Fonts
Hopefully, you have had time to look around in the Sigil application as shown in Figure 4-1. The left pane with the folders for Text, Styles, Images, etc., is the Book Browser pane. The right pane is the Table Of Contents pane. The lower pane is the Validation Results pane. The upper central pane is where you have access to the Code View and Book View. The Code View allows you to see the code for the XHTML file selected in the Book Browser pane. The Book View lets you see how the code may appear in an EPUB reading system. I say “may” because not all devices manage the XHTML and CSS code in the same manner, just as all browsers do not show content the same. To switch between Book and Code View, use the F2 key.
Figure 4-1 Sigil’s main screen
In the Book Browser pane you see a folder called Fonts. It is here that you place your fonts to be used by the EPUB. Of course, it’s not that simple; there is more to it. Now to get a font, you need to go to www.dafont.com. At the top of the page, do a search for “Great Victorian.” A font should be found called “Accents Euro Great Victorian,” and you should download it. If you cannot find it, download another font to use. The fonts are OTF, but should work fine on EPUB devices. The font file is compressed as a ZIP, but you can use 7-Zip to open it. Double-click the ZIP file, select GreatVictorian-Standard.otf, and drag it to a folder on your system. Back in Sigil, right-click the Fonts folder in the Book Browser pane and select Add Existing Files. In the box that pops up, find your font file and select Open. The font is now part of the EPUB.
CAUTION
Do not rename the font file. Fonts have an internal name that matches the filename. When the EPUB device accesses the font, it uses the font’s name, which is sometimes used as the internal name as well. If the two don’t match, the font may not work properly.
Now to make the font part of the EPUB, we need to create a style sheet and add the font to it. Right-click the Styles folder in the Book Browser pane and then select Add Blank StyleSheet. There should now be a CSS sheet called style0001.css in the folder. Click the new style sheet and make sure the Code View is selected in the center pane. Now the CSS entries can be changed. When you want to change the XHTML code, click the proper XHTML file in the Text folder. You should be able to see how things are organized.
On the CSS sheet, add the following code:
Every embedded font in an EPUB will have a similar section. They should be one after the other in any order. The @font-face should be placed in the CSS before all styles.
The font-family is how this font will be referred to within the XHTML files linked to the CSS. It is best practice to keep the font-family name small and, of course, unique. The source (src) is the location of the font file itself. In the example, the file is found in the parent folder (..), then in the Fonts folder where the font file itself is named.
How Does the Directory Structure Work?
File locations can be thought of as the file structure within the EPUB file. The folders listed in the Book Browser pane all exist within the OEBPS folder in the EPUB. Within the OEBPS are the folders you need—at least the ones that contain files. If you are using an XHTML file in the Text folder and want to reference an image in the Images folder, you must go up to the parent folder or the OEBPS folder. To do this, the two dots are used (..). Then, you go to the Images folder next, but the folder and filename must be separated by forward slashes (/). Once the proper folder is reached, then the file itself must be named, including the extension after the period.
Be aware that case can be important. For Linux systems that are running an EPUB app, the file structure names are case-sensitive. This includes filenames and extensions.
The font is now embedded and ready to use, so let’s set up a CSS style to use it. Let’s make a style called “fancy” that will set up no other styles with it, but uses the font:
This font-family name must match the one from font-face. If multiple fonts are used, make sure you use the correct font-family name from the correct font-face entry.
Switch over to the text files, select section0001.xhtml, and make sure it is in Code View. Add the following two lines to the body:
You can see the second line should be using our new font, but we have one more thing to change. At this point, our XHTML file is not linked to the style sheet. Without it being linked, the XHTML file cannot access the styles we specify. So, to fix this, right-click the XHTML file and select Link Stylesheets. Next a window should appear listing the style sheets available (there should be only the one), so place a check in the box next to it. Select OK and make sure you are in Book View to see the new font.
It’s a little small, so let’s make a simple change. Add the following line to the “fancy” style in CSS:
When you look back at the Book View, the line should be easier to read and should look different from the first line. If you have problems, look back over the code to make sure everything is typed correctly. If there is still a problem, download c04-01.epub from the McGraw-Hill website (www.mhprofessional.com/EPUB) and try it. If it doesn’t work, try a different EPUB viewer. If you are using an application, an app on a tablet, or other device, since they all work differently, a different app or device may work better.
What If My TTF File Doesn’t Work?
If this happens, the file most likely has been renamed. You may try to get another copy of it to make sure it wasn’t corrupted during a download.
The best thing is to get a free font maker program (I suggest Type Light 3.2). Type Light Free can be downloaded from www.cr8software.net/typelight.html. You need to pay for the full version.
Open the font in the font program and then on the menu, choose Font and then Rename Font. The default name should be listed after Family Name. Clear this box and then select File and Save As. Enter the name listed under Family Name. Delete the font file in your EPUB that doesn’t work and re-embed it with the new name. Change the CSS entry for the font-face style, and it should work now. If, for any reason, it doesn’t, check all of your CSS entries to make sure the font-family name is the same for the font face and the style you are using it in. Also, check the class name to make sure they match. Of course, make sure the path and filename of the font file itself is properly listed in the source (src).
If nothing works, try a different font. If the second font works, then something is wrong with the first one.
Any option for managing the font text can be included in the CSS fancy style. The style can include margins, indents, padding, and any other CSS properties that you need to have on all the text displayed. Try to always keep it simple by placing all the properties in one place.
If you need to use multiple style sheets, you can link an XHTML file to them. When you select the option to link a sheet, click more than one sheet to link it. Be aware that fonts should be loaded one time. Do not place a font face on multiple sheets and have one XHTML file linked to both. If both font faces were given the same family name, then they would not be unique. If multiple sheets are used, have one sheet for the fonts only and link all necessary XHTML files to it. Add other sheets as needed. See the example file c04-02 .epub from the McGraw-Hill website.
If you right-click a style sheet, you can rename it. When you rename it in Sigil, it automatically changes the name in all the links as well. This is also true of fonts and images, but do not rename the fonts this way. Right-click the XHTML files to rename them.
Now let’s try something a little different. Suppose we want to use the new font to change the first letter of each paragraph in a chapter. So, let’s start a new EPUB by going to File and selecting New in Sigil. Create two XHTML pages, each with a header 2 title: Chapter 1 and Chapter 2 (you can rename the XHTML file accordingly). Add two paragraphs after the headers. Embed in the font as we did previously (you’ll have to add a style sheet and link both XHTML files to it).
Hopefully, everything is good so far. Now in the CSS, add the following code, which should make sense now after the previous chapter:
As you can see, we are controlling the <h2> headers by centering them. Then we are taking the paragraph following any <h2> headers (we should only use them for chapter titles) and assigning them a style. The style indicates that the first letter of the paragraph will use the embedded font and be three times larger than the normal text. There are two reasons for making the text larger using a percentage. First, we want to make it larger so it stands out from the other text. More importantly, a percentage is used because we do not know the specific size on any device. Some people may set their EPUB device to default to small print. Others select a size closer to what a large-print book may be, and if we selected a specific size, our first letter may end up half the size of the rest of the text.
This can be seen in the example file c04-03.epub.
Some devices may not support the first:letter selector. In this case, you may need to create a workaround by spanning the first letters, as shown in the following code or in the example c04-04.epub file:
The changes should make it all work the same, except you have to go to each chapter and set the span on the first letter. This may be time-consuming, but should work on any reading system unless it does not support embedded fonts.
Shouldn’t All EPUB Systems Support Embedded Fonts?
Technically, they should. Unfortunately, they don’t. The main reason is that some tablet apps or PC applications are not fully International Digital Publishing Forum (IDPF)– compliant for the EPUB. Most companies in this case simply need time to update their programs to get everything working.
If you come across an app that doesn’t support what you need, find another one. Most of the best ones will be from device manufacturers that emulate their reading devices.
Important: The second generation Nooks from Barnes and Noble, do not support embedded fonts at the time of writing this book.
Other than using fonts that will be compatible on as many systems as possible by using TTF, another factor needs to be considered. File sizes can play an important part. TTF again does well here, even though SVG fonts do the best, but they do not have a wide range of support. For a better example, see Table 4-1.
Table 4-1 Font File Size Differences
Many changes can be made to an EPUB using embedded fonts. What it comes down to is that like any programming code, even HTML and CSS, the ability is limited only by your imagination.
Images
Images help enhance any book. EPUB 2 supports PNG, GIF, JPG, and SVG images. Most of these image formats are straightforward, but some people have not dealt with SVG. To play around with SVG, download InkScape for free from www.inkscape.org.
TIP
It is usually best to stick with JPG images to be assured of compatibility. SVG images are not fully supported yet by all devices.
Embedding Images
Embedding images is the same as embedding fonts within the EPUB. To start, you right-click on the Images folder, select Add Existing Files, and then select your image files to add. Now the images are embedded within the EPUB. Don’t forget to save the file.
To place images within an XHTML file, you use the <img> tag. To make things simpler, however, you can select the Insert Images button. Place your cursor over each image in the menu, and a tooltip will pop up telling you what the button does.
Using the Insert Images button causes a window to appear that lists all embedded images. If you select the image on the left, an area on the bottom right shows the image dimensions, file size, and whether the image is color or grayscale, as well as its color depth. An SVG image will not show the image itself, but the XML code for the image.
By selecting an image with the Insert Images button, the following would be placed within the XHTML code:
As you can see, Sigil fills in the necessary properties and values for the selected image. Keep in mind that if an image is renamed, all links to it in the image tags will also be renamed.
How Do I Get Dimensions of an SVG Image?
In Sigil, when you select the SVG image file, the code is displayed in the Code View. Somewhere in the top section you’ll see two lines showing width= and height=. The two values given in double quotes are the width and height in pixels.
Flowing Text
As discussed in Chapter 3, sometimes text needs to flow around an image. Usually, text will stop at the top of the image and continue at the image’s bottom. Some images that are small can have text flow around them. To start, place your image where you want it; then place the image tag within a division with a style called “illustration,” as shown:
Now, to set up the text flow, we need to set up the illustration style in CSS and make sure the XHTML file is linked to it. The CSS code follows:
The image is set to a width of 50 percent of the screen, but the value should match your image. The !important declaration makes sure the image width is not overridden by any other style. The image is then floated to the left, although it could be floated to the right as well. The margins are then set for the image to 3 pixels on the sides that are next to text. Again, the margins are set with the !important declaration so they are not overridden by another style.
Text should flow around the image just as it would in a book or magazine.
What About CSS Order of Precedence?
Normally, the order in which CSS styles have precedence is
Inline styles Styles placed within the tag itself using a style= attribute Embedded styles Styles placed in the XHTML <style> section at the beginning of the XHTML file
External styles Styles placed in the external CSS file
An inline style overwrites an embedded style, which overwrites an external style. When there are two styles for the same selector, such as <p>, the last one from the beginning of the external CSS style sheet overwrites the first.
The selectors have an order of precedence over one another. The first has priority over the second, which has priority over the third, and so on, as follows:
ID selector #style used in XHTML as id=“style”
Attribute selector The search selector [title=MonaLisa]
Class selector The .style-name selectors
Child selector Selector that selects an element of another (div > p); for example, a paragraph inside a division
Adjacent sibling selector Elements next to each other (h2+p); for example, a paragraph after a header 2
Descendant selector An element within another element (p i); for example, an italics element inside a paragraph element
Type selector Styles set for a tag (img); for example, a style set for all images
If a style isn’t working properly, check the order of precedence to see where the problem may lie. If you cannot correct the problem, place an !important declaration on the properties you do not want changed.
Cover Image
In an EPUB, you will want to add a cover if it doesn’t have one. Images should be 600 pixels wide and 800 pixels tall. They can be in color, since monochrome devices can usually display color images in grayscale.
NOTE
If you need to resize an image, try to keep the size in the same aspect ratio so the image is not “squeezed” in one direction. Most programs allow you to adjust the size and keep the aspect ratio intact. If needed, download a program called Pixresizer at
www.bluefive.pair.com. It works well and allows you to also change the format.
EPUB Note
In Sigil, it is usually best to keep all sections of the book separate. The cover, chapters, introduction, etc., should be individual XHTML files, which assures that a page break occurs between files. The title page should come after the cover and include the title in an <h1> tag. Chapter titles should use <h2> tags. Of course, this is all personal preference, but there are reasons for this that will be covered in Chapter 5.
If you have an existing XHTML file that you want to split into chapters, place the cursor where the break should be between files, and press CTRL-ENTER. Pressing CTRL-ENTER causes the file to end at that position and the remaining text to go to the next file. Right-click an XHTML file to rename it.
Section Breaks
Another issue with regular printed books is the section breaks. Some books just have a blank line, while others may use one or more asterisks (* * *) or some other method of signifying a section break. The main thing is that they are plain, and much couldn’t previously be done because of the cost. But now in the digital world, the choices are limitless. Look at Table 4-2 and you may see some familiar titles. A symbol also is included that represents the book. Some books may not have a symbol come immediately to mind, but usually there is something if you think about it long enough.
Table 4-2 Books and Possible Symbols
NOTE
Be careful with images from the Internet, as some may be copyrighted. For free images, try
www.openclipart.org.
In the EPUB, these images could be shrunk down to a height of around 100 pixels or less (keeping the aspect ratio). These can then be placed in as a section break with a margin above and below to give some blank space around it. The image can also be centered. An example follows:
When the margin-left and margin-right values are set to auto, then both sides are calculated and made equal. This causes the block element, set by the display:block, to be centered.
Some devices may not support this centering feature, but you can achieve this manually, as shown:
Both of these together should work on most, if not all, systems.
NOTE
To see an example of a full e-book, download Nada The Lily.epub from the McGraw-Hill website. It includes examples on images, fonts, and chapter layouts. It is also a great read.
Another option is to alternate pictures between every other section break. This may not work on all devices, but it is a cool trick for the devices it does work on.
First, pick two images and embed them in the EPUB. Then set up the image tags for each section break as shown:
If needed, place the code in paragraph tags to allow it to be centered as previously described. You should notice there are not enough attributes for the image tag, especially the source attribute. Don’t worry yet; we’ll take care of it.
You then need the following CSS styles:
The nth-of-type value of 2n+1 is for odd values and 2n is for even. Of course, these can be replaced with “odd” and “even” values. Also, you can see that code is set for img by itself, which centers the image. The content code is added to the HTML <img> coding for the even and odd images, overwriting any properties that are the same.
What happens is the content is added to the <img> that it finds in the XHTML files. It also sets the width and height for each image as needed. An example is given in c04-05 .epub on the McGraw-Hill website. Another example is also given in the EPUB to show a second way to place the images without depending on nth-of-type.
NOTE
By using the content attribute to complete the image tag, when you perform an EPUB validation check, it will show errors.
Comic Books
Color EPUB devices have built-in support for comic books (CBZ). CBZ, or Comic Book Zipped, is a ZIP file containing scanned images of the comic book. The built-in support allows for the images to be zoomed in. Older devices do not support this feature. The best way to handle this feature is to digitally cut out each square on each page and make it a single page. The images can then be enlarged for ease of reading. For an example, see c04-06.epub, which is a Robin Hood comic book. Public-domain comic books can be downloaded from www.comicbookplus.com.
Magazines
Magazines are usually set up similar to the CBZ files. The magazine is scanned as JPG files and placed in separate XHTML files. The main difference is that the magazine is usually left as a single page, requiring a newer device that can zoom in to view portions of the whole page.
Colors
Colors can be an important part of EPUB. As I’ve mentioned before, even on a monochrome device, colors appear as shades of gray. Don’t be afraid to use colors; just be aware how they look both in color and on a monochrome device.
Displaying Colors
There are five ways to express colors in an EPUB: six-digit hex, three-digit hex, RGB integers, RGB percents, and color names. Use whichever method you feel more comfortable with.
Six-Digit Hex
Hexadecimal values range from 00 to FF, which is 0 to 255 in standard numerals. Conversion from one to another can be accomplished by using a scientific calculator. Usually, you select decimal (DEC) and type in the number you want to convert to hex and then press the hexadecimal (HEX) key. The hex value should be shown on the display. Remember that hex counts 0 to 9 and then uses letters A to F for 10 to 15.
Hex values are ordered specifically based on red, green, blue (RGB) values. Each has an allowable range of 0 to 255 (00 to FF). The hex numbers are preceded by a pound (#) sign.
For example, red would be #FF0000, green would be #00FF00, and blue would be #0000FF. Then, of course, mixing colors like blue and red to make purple would be #FF00FF. Using a value of FF; produces a pure color and #FF00FF would be a dark purple. To lighten it to a medium purple, you would use a less-than-pure color, such as #880088.
Three-Digit Hex
Three-digit hex is similar to six-digit hex, but it uses only one hex value for each color. For example, red would be #F00, green is #0F0, and blue is #00F. Values are 0 through 9, then A through F. The higher the value, the more pure the color will be. For example, #F00 would be a bright true red, while #500 would be a deep dark red, almost black.
RGB Integers
The RGB value is similar to hex, but you can use the decimal values, which are separated by commas. For example, red is RGB(255,0,0), green is RGB(00,255,00), and blue is RGB(00,00,255). Mixing colors is achieved by setting values for more than one color. Purple, for example, would be RGB(255,0,255).
RGB Percents
RGB percents use percentages to represent the RGB values. Percentages can include a decimal and range from 0.0 percent to 100.0 percent. For example, red would be RGB(100%,0%,0%), green would be RGB(0%,100%,0%), and blue would be RGB(0%,0%,100%).
As before, the colors can be mixed to produce any color you wish to use.
Color Names
IDPF states that a device may render the XHTML 1.1 color names, of which there are 16. The reading system may render the CSS 2.0 color names as well, for a total of 147 color names. The 16 are listed here; the full 147 color names are listed in c04-07.epub. Also provided are examples using the different color expressions. The 16 colors are black, white, aqua, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, and yellow.
Grayscale
Converting to grayscale is a simple task. For my Nook device, the conversion looks like this:
If we have a color such as purple—RGB(255,0,255)—we would get a grayscale value of 102. Now we create a new RGB value of RGB(102,102,102). The gray produced by the grayscale value should match up perfectly to the purple if they were side by side on my Nook.
You may be wondering how I create the values for my device. Using the c04-08.epub file, you look through the color tables shown for red, green, and blue. Start with red and find where the colors match as perfectly as possible. Take that number—assume it is .28 in this example— and the equation would start with .28 * red. Do the same for blue—we’ll assume it is .60. Now, taking these two numbers and adding them (.28 + .60), we get .88. We then subtract this from 1.0 and get .12, which should be the number for blue. Be aware that blue is dark and most lower values all match. All three numbers found must add up to 1.0, so just subtract it from 1.0 and it should work. Now you have your own equation for your device. You can edit the end of c04-08.epub with Sigil to change the Rainbow section. Once done, place it on your device and all the colors should match perfectly. If, for some reason, they seem a little off, try the process again; be a little more careful—it takes some practice.
A listing of the grayscale values is shown in Figure 4-2.
Figure 4-2 Grayscale with decimal values
NOTE
The equation may produce a decimal value, such as 192.8. Drop the decimal place and round it as needed to 193.
