The Rich Text Editor is called whenever you double-click on a text widget. Beyond (all?) other RT Editors available, it will enable you to include Google fonts in your web pages as well as system fonts. The subset of Google fonts available in webProg3 is listed HERE. Also, for technical reasons, most other RT editors offer only a very limited range of font sizes, but in webProg 3 the range goes from 6 to 200 pixels. The reasons for common limitations of rich text editor facilities, and costs of expanding them in the webProg3 Rich Text Editor, are explained more fully elsewhere on this website.

Here are some pictures and a few tips for working with the RT Editor:

Here is an example of rich text using the Google font "Flamenco".

Here....

Abril Fatface font

Architects Daughter font

As you can see, there are plenty of text sizes available.

They range from 6 to 200 pixels.

You can, of course, mix fonts of different types and sizes in the same text box.

However, you would be well advised not to overdo it!

One or two fonts is usually the best.

Here's the toolbar you will be working with.

If you move the mouse over the icons at the top, tooltips will appear to tell you what the buttons do.

In general, type your text and then select it with the mouse. Then click on whatever button or menu you require to enrichen the text. A good method is to type up your entire text first using a single font, and then go richening it up by selecting parts and modifying them as necessary.

A number of the buttons at the top are toggles. For example, select your text and click on the "Bold" button. So now you have bold text. If you re-select the same text with the mouse and click on the Bold button again, the text will return to plain.

CANVAS MENU

This menu is simply for you to choose the background colour of the entire text box.

A number of common colours are offered, but if you scroll down to the end of the menu list,

you will see "Other...". Click on this to open up the Colour Chooser.

The same thing applies to the "font colour", "font background colour" and "border" menus.

BORDER MENU

To achieve a border, you will have to open up the Border menu more than once: the first time

to choose the width of the border, the second time to choose the border type, and the third

time to choose its colour if you do not want black.

SYSTEM FONTS

If you use a system font, make sure it is available on your target platform(s). If not, it will be

substituted by a default font. However, the Google web fonts exist in order to avoid this

problem. Why not use those instead?

LINEBREAK OPTION

If you type ENTER at the ends of the lines to go to the next one, your rich text will be coded such

that each line is contained within its own DIV:

However, if you use the SHIFT key together with ENTER, the lines will be separated by <br>

within a single DIV:

This can affect the size of the spacing between lines.

The Padding Nudger enables you to increase or decrease the margins between the text and the sides of the containing text box. As you move the mouse over the little arrow buttons, a tool tip will appear to confirm the type of nudge it achieves, e.g. "Increase left" (margin), and a number in the centre of the nudger will tell you the current size (in pixels) of the margin. Clicking on an arrow button moves the margin one pixel at a time in the direction indicated.

Please note that it is not possible to adjust the bottom margin using the nudger.

Also, nudging the padding in the Rich Text Editor can actually affect the size of the containing text box, so after you have saved the text and returned to the webProg3 work grid, it might be necessary to use the main pixel nudger to adjust the size of the text box to the exact dimensions required.