Indent and outdent buttons in an ASP.NET Core rich text editor

The editor toolbar with indent and outdent buttons

Indenting moves a paragraph in from the margin, or makes a list item a sub-item. The buttons are indent and outdent, in the default and full toolbars.

Add them

<richtextbox name="Body"
             toolbar="{indent,outdent,insertorderedlist,insertunorderedlist}|{undo,redo}"
             height="300px"></richtextbox>

What is saved

In a paragraph, indent is saved as a margin:

<p style="margin-left: 40px">Indented paragraph</p>

In a list, the item moves into a sub-list, which is a nested list.

Indent is not a quotation

Use the quote button for a quotation, since it is saved with a tag that means quotation. Indent is only for layout, and it says nothing about the text. Equally, an indented paragraph on your published page uses the margin in its style, so it still shows if your CSS changes.

Tab and keyboard users

Inside a list, Tab indents an item. Elsewhere, people who use only the keyboard need a way out of the editor, or they would be trapped in it. Pressing Escape leaves the editing area, so Tab moves on through the page as usual.

Phones

A 40-pixel margin takes a large share of a narrow screen, and repeated indents can squeeze text into a thin column. If your readers use phones, keep it to one level.