or Connect

Document Design

post #1 of 7
Thread Starter 

This is really the nuts and bolts of your ebook. This is where you determine how your recipes will display in the ereader. 

 

In a word processor program, you create paragraph and text formats and apply them to your text to determine the formatting. XHTML has some predetermined formats but they're not particularly flexible. However, XHTML supports Cascading Style Sheets (css) that let us customize the formats and extend them in ways we find useful for our documents. 

 

One of the things I like about epub as opposed to pdf for example is that epub is a reflowable format. This means that as my screen size changes or if I rotate my phone or tablet, the text can reflow to fit the new dimensions. Or if you prefer, you can fix the layout and text flow completely so it matches a printed page. For my purposes, I like the reflowable concept and my design will reflect that choice. 

 

Thinking about some books I've read on my phone, here a few design choices that bothered me that I'll want to avoid at least in my own epub. 

 

  • Full justification. On a phone in portrait mode, you might get 3-6 words per line with some oddball spacing. It really interrupts the flow of reading. In English, a left justification with a "ragged right" is considered the easiest to read. 
  • Large Margins. The particular book I'm thinking of had about .5 inch margins top, bottom and side. Coupled with the full justification, I really disliked how this particular book was laid out. And the publisher had locked in these aspects of the design so I couldn't change it in my reader. Ereaders do support font resizing and some margin control for the most part, but is still subject to the design concepts embedded in the document. 

 

You'll end up writing a custom .css file for your book. While there are many fine points to css, for the purposes of this group, you'll be able to work with a template we create together and that you can modify to your own preferences. 

Palace of the Brine -- "I hear the droning in the shrine of the sea monkeys." Saltair
Reply
Palace of the Brine -- "I hear the droning in the shrine of the sea monkeys." Saltair
Reply
post #2 of 7
Thread Starter 

Spacing: Fixed or Proportional

 

If you've worked in Word Processors in a Desktop environment, you're used to working with fractional inches and points. These are fixed values that are the same on the page. This gave rise to the WYSIWIG word processors, What You See is What You Get. PDF files are very good for electronically sharing files laid out this way. With an epub the thinking changes somewhat as our delivery paradigm is not a standard sheet of paper, but screens of varying sizes, resolutions and uses. 

 

For working in an electronic world the spacing measure changes from inches and points to pixels or for proportional spacing, em and ex. In print and typography, these are common concepts. Em refers to the space an m takes up in the font in use. And ex to the x spacing. A lot of us were taught to double space after periods for documents when we learned to type. For something that was going to print, this double space would have been converted to a single m-space. And the spaces between words would remain as an n space. Usage has changed now to ex instead of en spaces. 

 

Proportional fonts have different widths for each of the characters and display and read well. There are, of course, monospaced fonts where every character takes the same width but are used mostly to represent computer code in text any more. 

 

 

Palace of the Brine -- "I hear the droning in the shrine of the sea monkeys." Saltair
Reply
Palace of the Brine -- "I hear the droning in the shrine of the sea monkeys." Saltair
Reply
post #3 of 7
Thread Starter 

Font Choices

 

Ereaders supply a few choices of default font. Specific fonts can be included in an EPUB as well and the ereader will display that font for that epub. For personal use, you can probably use what your want. If you plan to share or sell your cookbook, you should verify you have the rights to distribute the font in your EPUB. The version 3 standard of EPUB supports Open Type Fonts (OTF), which is where TrueType and PostScript fonts have evolved. There are some freeware fonts for this purpose as well for you to consider. 

 

In print, the standard has been serif fonts for the body of the work and sans-serif fonts for headings. Serif fonts are generally considered easier to read in print. On-line, that  is reversed because the resolution of a 24" Full HD screen is only 94 pixels per inch. Quality printed material is about 600-1200 dots per inch, so much finer resolution. In the future, this may reverse again as high end displays push ever denser pixel resolutions. 

 

With an epub, this is something easily changed as it becomes an issue. 

 

ufonts.com offers many font options that should be free for this sort of use, even commercial redistribution in an epub. I think. 

 

If you want to include a font in your book, be sure to include all the necessary font family variations. While an ereader or web browser can apply crude Bold or Italic effects for example, it's best to include the Bold and Italic fonts to properly render the letters. 

 

Take a look at the Bookman font page at ufonts  http://ufonts.com/search/bookman

 

I'd want to include Bookman, Bookman Bold, Bookman Bold Italic and Bookman Italic. Bookman Italic is on page 2 so you you might have to dig a bit find all the best matching fonts to include. 

 

 

 

Palace of the Brine -- "I hear the droning in the shrine of the sea monkeys." Saltair
Reply
Palace of the Brine -- "I hear the droning in the shrine of the sea monkeys." Saltair
Reply
post #4 of 7
Thread Starter 

The Available XHTML Formats

 

There are 9 basic paragraph types in XHTML

 

  • Headings level 1-6 
  • Paragraph 
  • List (bulleted or numbered)

 

Heading 1 should be the title of the book and only appear once in your document. Heading 2 and maybe Heading 3 should be Section and/or Chapter titles depending on the organization of your book. The rest of the heading levels serve as subsection or minor topics within the body of the text. 

 

Paragraph contains the primary content. 

 

Lists display short sections of content in ordered (numbered) or unordered (bulleted) also indented to help visually organize the content. 

 

There are a few text formats for bold and italics, superscripting and such as well. 

Palace of the Brine -- "I hear the droning in the shrine of the sea monkeys." Saltair
Reply
Palace of the Brine -- "I hear the droning in the shrine of the sea monkeys." Saltair
Reply
post #5 of 7
Thread Starter 

Extending the Formats

 

CSS allows us to create classes for the different default formats giving some more control over how content can be displayed and differentiated.   In a cookbook, the body text of the book has maybe 5 common different paragraph types and possibly more.

 

Recipe Name

Intro

Ingredients

Directions

Notes

 

Sticking with the default types, you could use Paragraph and Bold on the Recipe Name, Paragraph for the Intro, directions and notes. You might use Paragraph again for ingredients, but it would be nice to differentiate that list. Using numbered lists would be confusing with amounts and bullets would be ungainly. And it would also be useful to have different leading between these paragraph types to help visually distinguish what each paragraph type is doing. 

 

Ok, leading. This is an old printers term that made it into desktop publishing. It was literally strips of lead to create space between paragraphs. In most people's typing, this is managed with double or triple spaced returns/enter strokes.  In the days of manual typing, this was reasonable, and these spaces were converted at the printer into leading. As far as writing for epub, or even in well designed desktop publishing, multiple returns is sloppy, increases file size and may render poorly. 

 

Our paragraph classes can handle this spacing for us with much more elegance than a simple return or line feed. 

 

Applying the classes is not as elegant in Sigil as it is in a normal Word Processor. I suspect this will be confusing for some. 

 

One of the benefits of this method is that you can change the style sheet and the changes automatically ripple through your epub. As long as you use the same class names, you can have differen css for different uses without ever rewriting anything. Simply swap in a new css file with the same name. 

Palace of the Brine -- "I hear the droning in the shrine of the sea monkeys." Saltair
Reply
Palace of the Brine -- "I hear the droning in the shrine of the sea monkeys." Saltair
Reply
post #6 of 7
Thread Starter 

Just some quick samples from Sigil to show  what I'm talking about. Click on the images to see things more clearly.

 

The image above shows the five possible custom Paragraph Classes as they might appear in an ereader. Mostly I'm playing with indentation to show recipe organization. No special font or leading or such involved yet.  Next up, the css that generates this effect. 

 

 

This css creates the 5 classes of Paragraph for formatting a recipe and sets the indentation level for each class. The template we'll use for formatting our books will be more extensive than this, but it's mostly about setting the particular values you want to control

 

 

And lastly, the gory XHTML itself. This shows how the <p> </p> Paragraph tag is extended with our custom classes. If you remember using Reveal Codes in Word Perfect, this is much the same idea. 

 

Just to list out some of the possibilities of what you can control custom classes, see http://www.w3schools.com/cssref/default.asp

Palace of the Brine -- "I hear the droning in the shrine of the sea monkeys." Saltair
Reply
Palace of the Brine -- "I hear the droning in the shrine of the sea monkeys." Saltair
Reply
post #7 of 7
Thread Starter 

Here is a css template page for you to copy and paste together your own bits and pieces of needed classes and such. 

 

http://wiki.mobileread.com/wiki/CSS_template

Palace of the Brine -- "I hear the droning in the shrine of the sea monkeys." Saltair
Reply
Palace of the Brine -- "I hear the droning in the shrine of the sea monkeys." Saltair
Reply