blog.booki.cc

In the last tutorial, I mentioned that before we started manipulating the CSS for our test books, we needed to learn how to assign different parts of our chapter to different Elements so we could make style changes to the individual elements. In this weeks tutorial we are going to cover Paragraph Formatting which includes assigning elements to paragraphs.

The difference between font and paragraph formatting is that font formatting can be applied to an individual character such as making a single letter in a word blue while settings like text alignment just wont work if you try to align the first letter of a word to the right of the page the second letter to the left and the third letter to the center. This latter formatting that has to be applied to a larger group as a whole is paragraph formatting.

As I mentioned in the Font Formatting tutorial, while there are several aspects that can be altered in Booki’s Chapter Editor it is more flexible to leave the chapter as plain as possible and use CSS when exporting to format the Book.

Paragraph Formatting

The standard Booki installation includes the following paragraph formatting options:

• Paragraph Alignment
• Bulleted and Ordered lists
• Changing the paragraph indent
• Applying a style to a paragraph

Paragraph Formatting Buttons on the Tool Bar

Note: Depending on the installation of Booki that you are using, not all options may be available.

Paragraph Alignment

Similar to a word processor, Booki contains 4 Paragraph Alignment settings: Justify Left, Justify Center, Justify Right and Justify Full. The left center and right options are pretty straight forward the line up the text in your paragraph down the

left margin,

in the center of the page,

or down the right margin.

The Justify full setting is a little different, it creates a paragraph that is aligned down the left and the right margins. It does this by increasing the spaces between the words on each line to push the final letter on the line out to the right margin. The most common place this type of formatting is seen is in Newspaper articles and Novels.

Bulleted and Ordered Lists

These two format settings are usually added to a series of paragraphs that are listing items, the style that you choose depends on how you want your list to stand out. If you want your list to represent it’s items in a sequence (say largest to smallest) then using an ordered list helps to show each item’s ranking in the list. A bulleted list only shows that each item is a part of a list.

Bulleted Lists – to add a “Bullet” character to the front of each item on the list press the Bulleted List button. The default bullet is the standard black dot, however CSS can be used to alter this setting during export.

Ordered Lists – to add a sequential Numerical character or Letter to the front of each item on the list press the Ordered List button. The list items will default to a Decimal list, however the List Type dropdown box on the toolbar can be used to change it to use Roman Numerals or Letters.

Paragraph Indenting

There are two buttons on the tool bar that adjust paragraph indenting, they are Increase Indent and Decrease Intent. The first moves the start of the paragraph away from the margin and the second button moves it back towards the margin.

Paragraph Styles

Preset formatting can be applied to different sections of your chapter using the Styles dropdown box.  The options are Heading 1 to Heading 6, Normal, Address and Formatted. By changing the formatting using the Styles you will ensure that all Headings use the same formatting and the Normal text of your chapters is all the same.

More importantly when setting a style to a paragraph it is marked in the HTML code with a tag, <h1> for Heading 1, <h2> for Heading 2, <p> for Normal and so on. HTML uses these tags to mark out your chapter into different elements. The Address style not only adds an italic effect to the paragraph, it also labels it with the <address> tag and is used to mark paragraphs that provide contact information. The Formatted style not only changes the paragraph to a fixed-width font and pale orange background, it also labels it with the <pre> tag, which is used to display content where the spacing between characters is important such as blocks of code, guitar tablature and ascii art.

We can then use a CSS style sheet to set and change the different designs for these elements.

Have a Go!

Right, before we get started make sure you have a chapter in your practice book that contains lots of paragraphs, you will want some paragraphs that cover several lines and other paragraphs that will be part of a list so we just want a single item on each line.

To begin we will apply some alignment formatting, apply one type of alignment formatting to each  of your first four paragraphs (Justify Left, Justify Center, Justify Right, Justify Full). Notice the difference between each style and think about where (if anywhere) you might use each style.

Now we go to our paragraphs of list items, select all of your list items and then click on the bulleted list button. You will see a black dot added to each item and the entire list is slightly intended. Now lets click on the ordered list button, you will see the bullets change to numbers. Now we don’t have to stop there, click on the list type dropdown box and choose one of the options, and then do it again to see some of the different styles that can be used.

Now we have had fun with with our lists it’s time to go onto indenting our paragraphs, either keep your list selected or choose a new paragraph.  Then click on the increase indent button, then try it 2, 3 or 4 more times and watch how the paragraph moves across the page.  If you go too far click the decrease indent button to move the paragraph back towards the margin.

Finally we go to paragraph styles, first go to the top of your chapter and click on it’s heading, you will see the paragraph style dropdown box change to Heading 1 (Note: Only the chapter heading should be set to the Heading 1 paragraph style, as the Heading 1 style is used to create the Table of Contents and Chapter Headings when your book is exported). Next click on one of your paragraphs, the paragraph style dropdown box changes to Normal. If you now click on one of your list items the display changes to – format – showing that the paragraph isn’t conforming to a particular style. So, if you want find out what the style of a particular paragraph is, click on the paragraph and see what is displayed in the paragraph style dropdown box.

Now it’s time to change our paragraph styles.  Select one of your paragraphs, then click on the paragraph style dropdown box and select Heading 2. Notice how the entire paragraph has changed font size and had the bold effect applied. Now go to the next paragraph down and select a different Heading style (except Heading 1), then go to the next paragraph and select yet another Heading style and compare the differences between the three paragraphs.  To wrap up this tutorial change two more paragraphs to the Address style and Formatted style to see the different formats that are applied.

If you have any questions or need any help using Booki send an email to booki@lists.booki.cc.

You can also join the discussion by signing up at http://lists.booki.cc/listinfo.cgi/booki-booki.cc

Have fun and happy writing.

John Curwood

Booki User Guide maintainer.