Introduction

Using the getComputedTextLength() method in an SVGTextContentElement, it is possible to determine the width of a string in pixels. Using that information, it is now possible to create textboxes in SVG.

This version of Textbox is quite simple. Support needs to be added to allow:

The user to change the color scheme. This includes the textbox area and the text.

Multiple blank lines.

Wrapping text between spaces

While were at, how about scrolling too?

Reference

Global Methods

TextboxKeypress(event);

TextboxKeypress() is an event handler that is called when a textbox has focus and a key is pressed.

event is the event object passed generated my the keypress event.

Object Variables

Textbox.VERSION

This is a number which represents the current version number for this implementation of the Testbox object. This can be used by scripts to check that the correct version of the object is being used.

Textbox.textboxes

An array of Textbox objects used to find the currently active textbox object.

Methods

x_position is the x position of the upper left-hand corner of the textbox.

y_position is the y position of the upper left-hand corner of the textbox.

width is the width of the textbox.

height is the height of the textbox.

parent is the element which will contain the textbox.

add_char - add_char(new_char) - add a character to the end of the textbox

add_char() is used to append a character to the end of the text in the textbox. This method will determine if the new character will cause the line to exceed the width of the textbox. If the text is too large, then a new <tspan> is created which effectively creates a new line in the text box.

new_char is the character to add to the end of the textbox. Please note that even though you can pass more than one character to this method, new_char() will not properly handle more than one character at a time.

delete_char - delete_char() - deletes the character at the end of the textbox

delete_char() is used to remove the last character in the textbox. If removing the character results in an empty line, then the <tspan> that represented that line is removed from the textbox.

add_tspan - add_tspan(new_char, [offset]);

add_tspan is an internal method used to assist add_char when a new row needs to be added to the textbox. There should be no reason to call this method directly.

new_char is the text used to initialize a new <tspan>.

offset is an optional parameter. When present, this is the new relative y-offset to use when the new <tspan> element is created. If this parameter is not present, it defaults to 1em.

Properties

width is the width of the textbox.

height is the height of the textbox.

parent is the element which will contain the textbox.

textbox is the <text> node of the textbox.

Use

Loading Textbox into your SVG document

In order to use the Textbox object in your SVG file, you will need to insert a <script> element inside of your <svg> element. Textbox uses Node_Builder, so you will need to include this object in a script element also. As an example, if Textbox.js is in the same directory as your SVG document, then you would include the Textbox object with the following text:

<script xlink:href="Textbox.js" />

Creating a Textbox

In order to create a new Textbox object, you need to know the following: the upper-lefthand corner of the textbox, the width of the textbox, the height of the textbox, and the parent node of the textbox graphics. The following line creates a textbox at (10,10) with a width of 100 and and a height of 100. The textbox is appended to the SVGRoot.

textbox = new Textbox(10, 10, 100, 100, SVGRoot);

Example

The following example shows two Textboxes. To activate a textbox, you must click it first and then begin typing. To see the complete details of this example, right-click (or control-click) the SVG file and View Source. (NOTE: if you are viewing this example with NN4, then please see the Known Problems section below.)

Known Problems

Unfortunately, this class does not function properly in Netscape 4.7. To work around the problem, do the following:

Create a <g> element in your SVG document

Add an onkeypress="TextboxKeypress(evt)" attribute to the <g> element

Use the <g> element as the parent node when instantiated the textbox object

I have not been able to determine the exact magical incantation that Netscape wants for the addEventListener method for keypresses. The steps above will force the keypress events to be sent to the class. Once that has been achieved, everything works fine from there.