WebDwarf Tutorials banner
WebDwarf logo
Editing and Formatting Text

Use the Text Editor to create formatted text, rendered titles, or to add code for HTML and scripts. This text is formed from a text object. It uses a word processor, the Text Editor, to create the text to be formatted on your HTML page.  In this tutorial, we cover the following topics:

Introduction
Word processor operations
Foreground color
Background color
The hyperlink editor (or link editor)
Expanded hyperlink view
Options and filters
Importing text
Adjusting the bounding box
Web-safe fonts
You can use any font for titles
New text object shortcut



Introduction

Create a new text object by selecting the green "Text" button on the Tools toolbar on the left of your workpage. Edit an existing text object by double-clicking the object.

If you were in your workpage before, you should now be in the Text Editor. The editor provides many of the formatting features you will find in most word processors.

You can select any part of your text and change it. Try making some text like
this red text by changing its color, style, size or any other attribute. The operations and dialogs to do this are located on the menu and toolbars in the Text Editor.

When done, select the Save and Close button at the bottom of the editor to save your changes and return to the workpage. Then preview to see the modified text as it will appear in your browser.

When you are finished previewing, close the browser to return to the workpage then double-click the text object again to return to the text editor.
Text Editor button
Text Editor Save and Close
Preview current page
Word processor operations

The Text Editor has these standard operations which need little further explanation:
The Text Editor is not meant to be a standard word processor -- its primary purpose is to create formatted text for export to HTML. Consequently, the editor may not include some typical word processing operations that are difficult or impossible to export to HTML. On the other hand, it does include several features that need a little explanation:



Setting colors

Foreground color

There are two ways to set the color of text from within the Text Editor:
Text Editor color buttons
Background color

The normal background color of a text object is clear [no shading] -- this will let the color of anything behind the text show through. To change the text background to a solid color, do this:
 The image shows the color sliders set to a very light yellow shade for this text object.

Text Editor Save and Close
Tool: Quick Editor
Setting a text object background
The hyperlink editor (or link editor)

The Text Editor supports hyperlink operations. The following underlined text is an active link to the www.VirtualMechanics.com web site. You could paste the text into a text object, preview your page and, if you are connected to the Internet, left click the link to connect to our home page.

The editor automatically creates a link if you type a recognizable URL. In the Text Editor, select a space in your text and then enter the URL for your favorite web site. After you enter a trailing blank, the editor will automatically create the link.  Preview again to confirm that the link is now in the web page.

A lot more on links in the Links tutorial.



Expanded hyperlink view

The Text Editor can expand all hyperlinks to their HTML format. To do this, select the "Make HTML links Visible" on the top toolbar to the right or from the Options menu. All links within the text object will be displayed as full HTML anchors.
 
You can modify the elements of the link directly within the editor. This is convenient if you wish to make more than one change or if you wish to examine the links without having to continually enter the link editor. It is also useful in copying and pasting text that includes links -- it avoids copying or pasting only partial links. Be careful not to invalidate the links by changing the HTML tags -- the editor expects to find the links as you see them in the expanded format.
Link button
Preview current page
Text Editor expand hyperlink
Text Editor Options and Filters
Options and filters

One of the issues with displaying text in HTML, is that certain characters in HTML have special meaning. These are:
If you place text on an HTML page with these characters, they can cause mayhem on your HTML page -- being incorrectly interpreted as special HTML commands.

Therefore the normal operation of the Text Editor is to filter these characters -- i.e. turn them into a harmless form that will display correctly in HTML and at the same time won't upset the HTML.

Occasionally you may want to include actual HTML in your text, then you have the option to selectively turn these filters off, and let the raw special characters through. 

But for the most part, leave these settings as shown in the image above.

As an example, let's look at quotes in particular. The same logic applies to angle brackets <>, and the ampersand &.  Normally WebDwarf converts any double quote marks you enter in the Text Editor to &quot.

Double quotes get an extensive workout in the published HTML code, where they have special meanings to browsers. If you could enter the same kind of quotes directly in your text, browsers would misinterpret them as HTML commands and cause havoc on your page. When WebDwarf converts quotes to &quot, it avoids this problem -- that's the normal default operation. Whenever a browser meets a &quot in HTML, it automatically displays it as the quote mark ".

Occasionally, you want to type a real HTML command into your page (perhaps to display an inline image). In this case, you would disable the "Convert tag brackets" filter, because then you really do want the <> brackets to be interpreted as HTML.

You don't need to worry about those filters unless you want the text you are importing to be interpreted as HTML. For normal use, turning them off would be a Bad Thing -- some of your text might be interpreted as HTML and give strange results when you publish.







Importing text

The Text Editor formats text using the Rich Text Format (.rtf) standard --  supported by the majority of word processors. You can transfer formatted text from most word processors using Copy and Paste:
You can also import text from a .rtf file:
Rich Text includes some formatting that is not supported by the Text Editor or by HTML. These include embedded pictures, columns and more. The Text Editor will try to ignore these unsupported formats.



Adjusting the bounding box

In the Text Editor, the width of the text object is displayed on the ruler at the top of the editor. Use the slider to change the width of the text object within the editor. When you exit the Text Editor, WebDwarf will create a bounding box on your workpage big enough accommodate the full text.

Like any other object, position a text object within your workpage using your mouse. Unlike titles, text objects cannot be rotated or scaled. If you adjust the size of the bounding box however, the text will wrap to fit the new width.

Exit the editor by selecting the Cancel button below and then use your mouse to move a text object and change the size of the bounding box. Preview to see your changes.

Text Editor cancel button
Preview current page
Web-safe fonts

When displaying text, browsers generally rely on the fonts already installed on a computer and use those. If you specify a font on your page that your visitor does not have, their computer will substitute the "nearest equivalent". Sometimes that equivalent is not very near. It may be a different size and have a different line spacing. As a result, the page which may look beautiful on your computer may look nothing like that to your visitor.

It makes sense to use a font that is likely to be installed on most computers. These fonts are much less likely to suffer from unwise substitutions. Hence the name "web-safe" fonts. WebDwarf displays web-safe fonts in the Text Editor font lists with a green "WS".

Below are some fonts which are generally regarded as web-safe. Stick to these for text and you won't go far wrong.

The following fonts are commonly available on Windows, Apple and Unix systems. They are among the safest to use:
Arial
Times New Roman
Courier New

The following fonts are commonly available on Windows and Apple systems. Only about half of Unix systems have them -- so they are a little less safe overall. But because of the low percentage of Unix based browsers out there, they are still very web-safe:
Arial Black
Verdana (we use it here)
Comic Sans MS
Impact
Trebuchet MS
Georgia



You can use any font for titles
Because titles are published as image files, you can use whatever font you like for them - web safety is not an issue for text converted into images. 


Web-Safe font icon
Title Editor button
New text object shortcut

While in the Text Editor, you can quickly start a new text object with:
Hold the Ctrl key down then press S and N in quick succession
There is also a "New Text Object" button in the top left of the tool bar


See also:
Working with Text FAQ




Button: new text object
< Tutorials Home
Virtual Mechanics Logo
WebDwarf
®

Tutorials
Web-Safe font icon