Word Processing Commands


The word processing commands are presented in the toolbar:

Command buttons


Toggle boldness of selected text.
Toggle italic of selected text.
Toggle underline of selected text.
Toggle strike-through of selected text.
Toggle subscript of selected text.
Toggle superscript of selected text.
Make text left-align
Make text center-align
Make text right-align
Make selected list item to be a child item of its previous sibling.
Make selected list item to be a sibling of its parent list item.
Move selected list item up in the list sequence
Move selected list item down in the list sequence
Make selected text a hyper link
Clicking this button will add a space outside the end of current element so that you may enter new contents outside of the current element.

Font Attributes


Use font family dropdown to set font family for selected text:

In this sample, selected text "World" and you can see that the font family is applied to it. Actually a "span" element is created for setting font family to the selected text:

As you can see, a span element not only contains font family, it also contains lots of other attributes. When you change those attributes, they apply to text World. Element-editing will be explained later.

Headings

A dropdown is provided for making different headings:

How a heading is created depends on the cursor position and whether there is text selection. If there is a text selection then the selected text will be used to create a new heading. For example, suppose we select text World and choose a heading:

A new heading with text World will be created:

If there is not a text selection then the whole element under the cursor will be turned into a heading. For example, suppose we put the cursor in the word Hello and choose a heading:

The whole element, which is a paragraph with id p1, is turned into a heading:

Note that the fonts for words Hello and World are the same before and after creating the heading. That is, in such a process the properties of original elements are preserved.

Text Color

On the toolbar there is a small spot, color spot, for showing and setting text color:

Click the color spot to select a color:

How a selected color is applied to the web page depends on the cursor position and whether there is a text selection.

If there is a text selection then the selected color will be applied to the selected text:

If there is not a text selection then the selected color will be applied to the whole element. Suppose we put the cursor inside word “Hello”, then the selected color will be applied to the whole paragraph:

Color value

On the toolbar there is a text box for showing numeric color value. You may click the text box to select a color. The numeric value for the selected color will be displayed on the text box. The color selection will not be applied to the web page. It is just for viewing purpose.