This tutorial explains How to Create Superscript and Subscript Markups, in HTML Form Word Processor with Spelling Check. The HTML container for all the text typed, is a div element with the "contenteditable='true' " attribute. This div element and an associated textarea element, are part of an HTML form. When the submit button is clicked, JavaScript copies all the modified content with HTML tags added, from the contenteditable div, into the textarea element, and then sends the name of the textarea element and the textarea content, to the web-server.

To have a superscript or subscript in the word processor, select the text that is to go up or down respectively (with the mouse pointer or using the shift and arrow key), then drop down the correct select element; and then choose the superscript option or subscript option.

There are still many commercial HTML form word processing out there, that do not do spelling check. Well, with this tutorial, such spelling check can be done automatically. The spelling of the selected text to be marked up, can be corrected before or after the text is marked-up . All the major browsers today, allow correction of spelling in the contenteditable div, by the client, automatically. The web-developer does not have to write any program to check spelling.

All the knowledge given in this seven part series is free, for anybody to read.

The project is done in a minimal webpage, assuming that, that is the webpage that will be displayed at the client's browser. This is the second part of a seven part free tutorial series. At the seventh part of the series, the reader can download the complete code of the project, for use for his/her personal or commercial website. The reader is free to modify the complete code before employing into his/her website.

The author bears no responsibility for any problem that the complete code can encounter, when applying the complete code.

The reader should have read the previous part of the series before coming here, as this is a continuation.

The textarea and contenteditable div Code

The HTML code for the textarea and contenteditable div elements is:

            <textarea id='article' name='article' hidden></textarea>
            <div contenteditable='true' id='wordProcessor' style='height:300px; overflow:scroll; border:solid 1px black'></div>

The reader should read through the code if he/she has not already done so. Currently both elements are empty. The client types and edits (do word processing) into the contenteditable div, and not in the textarea element. When the submit button is clicked, JavaScript copies all the modified content with HTML tags added, from the contenteditable div, into the textarea element, and then sends the name of the text-area element and the textarea content, to the web-server.

The textarea element is always hidden from the client, in the whole typing and editing (word processing) activity.

The div for Buttons and select Elements

Just above the textarea and contenteditable div code, is an ordinary div element. This div is present in the complete code, but not shown above. The content of this div consists of the button and select elements to be clicked to have the markup.

Each button has a tool-tip which gives instruction to the end user (client) on what to do.

Select Element for Superscript and Subscript

Instead of a button, there is the select element to produce superscript and subscript. The select element code is:

                <select name="spsbScript" id="spsbScript" title='Select text, then click here.'>
                    <option value='' onclick="superscript()">Superscript</option>
                    <option value='' onclick="subscript()">Subscript</option>
                </select> 

Read through the code, if that is not already done. The tool-tip for the whole select structure is 'Select text, then click here.'. This is the value of its title attribute. The two option commands are Superscript and Subscript. When the Superscript command is clicked, the superscript() function is called. When the Subscript command is clicked, the subscript() function is called.

JavaScript Coding for Marking Up

Superscript

A bit of text has to be selected first by the client, then the Superscript select option is clicked, before the selected text becomes super-scripted . The JavaScript function for that is:

                function superscript() {
                    let selection = window.getSelection();
                    let range = selection.getRangeAt(0);
                    let newParent = document.createElement('sup');
                    range.surroundContents(newParent);
                    range.collapse();
                }

The first line in the code obtains a JavaScript memory object that represents the selection. The next line obtains the range object from the selection object. A range is the starting and ending points of a string of HTML code. The next line creates a superscript node object in memory. The line after surrounds the selected text with the start superscript tag (^{) and the end superscript tag (}), and produces the effect on screen, without any reloading. The selected text remains selected. The last line removes the highlight of the selection that indicates that the text is selected.

Subscript

A bit of text has to be selected first by the client, then the subscript select option is clicked, before the selected text becomes sub-scripted. The JavaScript function for that is:

                function subscript() {
                    let selection = window.getSelection();
                    let range = selection.getRangeAt(0);
                    let newParent = document.createElement('sub');
                    range.surroundContents(newParent);
                    range.collapse();
                }

The first line in the code obtains a JavaScript memory object that represents the selection. The next line obtains the range object from the selection object. A range is the starting and ending points of a string of HTML code. The next line creates a subscript node object in memory. The line after surrounds the selected text with the start subscript tag (_{) and the end subscript tag (}), and produces the effect on screen, without any reloading. The selected text remains selected. The last line removes the highlight of the selection that indicates that the text is selected.

Conclusion

A bit of text has to be selected first by the client (end user), then the subscript select option is clicked, before the selected text becomes sub-scripted.

In the corresponding called JavaScript function, the selection memory object is made. Then the range object from the selection object is obtained. A range is the starting and ending points of a string of HTML code. Then a node for the element to surround the selected text is created in memory. Then the surrounding is done, and made effective at the screen, without any reloading. The selected text remains selected on screen. Lastly, the highlight of the selection that indicates that the text is selected, is removed.

The complete code for the project, to be downloaded free, is at the end of this tutorial series.

Chrys