Speech-enable HTML5 content-editable elements

You can speech-enable <div> elements by adding the HTML5 contenteditable attribute.

Because the mapping of GUI text and selection points to HTML code is ambiguous, Dragon Medical SpeechKit needs to remove sources of ambiguity to ensure that recognized text isn't inserted in an unexpected location.

During the initialization of speech-enabled edit controls, when you call NUSA_initialize(), NUSA_initializeVuiForm() or NUSA_reinitializeVuiForm(), the HTML content of contenteditable elements is normalized as follows:

• All comments are removed from the HTML content.

• All whitespace that's not displayed on the control's GUI is removed from the HTML content.

• Empty paragraphs (that the user can't see or navigate to) are removed.

HTML element handling in a content-editable div

When speech-enabling a content-editable div, Dragon Medical SpeechKit interprets the HTML content as a sequence of plain text.

The following HTML elements have limited support when they occur in this text:

• <br>
• <p>
• <div>
• <h1>-<h6>
• <span>
• <img>
• Inline text-formatting elements such as <b>, <i>, <strong>

These elements don't prevent speech recognition functionality, but when the user deletes or overwrites text within the content-editable div, these elements can also be deleted/overwritten along with any style attributes applied to them. When this occurs, voice commands such as 'undo that' can restore deleted text but can't restore deleted HTML elements (except for <p> and <br> elements).

Using any HTML elements not listed above causes incorrect word and selection detection and makes the content-editable div unusable for speech recognition.

Paragraph structure in a content-editable div

Dragon Medical SpeechKit inserts recognition results into a <p> element. When the user says 'new paragraph', a new <p> element is created and the text cursor is moved into it.

Programmatically adding text or HTML elements between paragraphs isn't supported; this causes incorrect word and selection detection and makes the content-editable div unusable for speech recognition.

Cursor position in a content-editable div

When the user places the focus in a content-editable div (for example, by pressing the tab key or saying navigation commands), Dragon Medical SpeechKit doesn't interfere with the browser's default handling of setting the selection. Exception: When the div is focused for the first time, the cursor is placed at the end of the text.

The browser default can vary but the cursor is often placed at the start of the control rather than the end. To override the browser's default handling and place the text cursor at the end of the text, do the following:

• In the NUSA_configure function, set NUSA_contentEditableDefaultSelection = false;