SVG 1.2 - 27 October 2004

Previous | Top | Next

6 Text enhancements

6.1 Editable Text Fields

SVG 1.2 introduces editable text fields, moving the burden of text input and editing to the user agent, which has access to system text libraries.

6.1.1 The editable attribute

The text and flowDiv elements have an editable attribute which specifies whether the contents of the elements can be edited in place.

editable = "true" | "false"

If set to "false" the contents of the text element are not editable in place through the user agent. If set to "true", the user agent must provide a way for the user to edit the content of the text element and all contained subelements which are not hidden (with visibility="hidden") or disabled (through the switch element or display="none"). The user agent must also provide a way to cut the selected text from the element and to paste text from the clipboard into the element. If no value is given for this attribute, the default value is "false".

Animatable: Yes.

In general, user agents should allow for the inline WYSIWYG editing of text with a caret that identifies current position. They should also support system functions such as copy/paste and drag/drop if available.

For WYSIWYG editing the following functionality must be made available:

For devices without keyboard access, the equivalent system input methods should be used wherever possible to provide the functionality described above.

The content of the DOM nodes that are being edited should be live at all times and reflect the current state of the edited string as it being edited (except for the state associated with an Input Method Editor window).

6.1.2 CSS pseudo class for editable text

To match the two states of editable text and flowText elements, SVG user agents that suppport CSS style sheets must support the ':edited' pseudo-class. It is used to style the currently editable text field. As such, it is equivalent to the following CSS selectors:


6.2 Text Selection

The SVGSelection interface and the {"", "selection"} event allows change notification and access to details on the current text selection. When text selection changes (e.g., a new selection is made, the selection is modified, or an existing selection goes away), whether due to user action or because of DOM calls, the {"", "selection"} event is dispatched to the top-level svg element.

interface SVGDOMRange : range::Range
   // ***ElementInstance fields are non-null only when the corresponding 
boundary of the
   // range is on an instance of a <use> element.
   readonly attribute SVGElementInstance startContainerElementInstance;
   readonly attribute SVGElementInstance endContainerElementInstance;

interface SVGSelection : SVGDOMRange
   readonly attribute boolean       active; // true if something is selected

The interface corresponding to the {"", "selection"} event is as follows:

// sent to the top-level svg element when selection changes in any way
interface SVGSelectionEvent : events::Event

The following attribute is added to the SVGSVGElement interface:

interface SVGSVGElement
         readonly attribute SVGSelection selection;