Superscript and subscript buttons in an ASP.NET Core editor

The editor toolbar with superscript and subscript buttons

Science, maths and footnote marks need text above or below the line. RichTextBox has a button for each, named superscript and subscript.

Add the buttons

<richtextbox name="Body"
             toolbar="{bold,italic,superscript,subscript}|{undo,redo}"
             height="300px"></richtextbox>

They are on the full toolbar, and in the More panel of default and basic.

The saved HTML

<p>Water is H<sub>2</sub>O. E=mc<sup>2</sup>.</p>

These are real HTML tags with real meaning, so screen readers and Word export understand them, unlike text made small with CSS.

Numbers and footnotes

For a common mark such as ² or ™, the character itself is often simpler. Special characters has them in its Common set. For real footnotes that number themselves and link to their text, the full toolbar has insertfootnote, which is better than a number you maintain by hand.

Line spacing

A superscript can push a line apart in some fonts. If that bothers you on your published page, add this CSS for the area where you show content:

.article sup, .article sub { line-height: 0; }