WordPress – How to tab indent text using TinyMCE WYSIWYG editor

When using the visual editor in WordPress (TinyMCE) you’re composing content in HTML.

Whilst it may be as easy as writing a document in Microsoft Word, it is still limited by what HTML can support – most importantly, there is not such thing as a tab indent in HTML.

There are however several options:

  • Bulleted or numbered lists
  • Tables
  • CSS
  • Add space entity codes, e.g.  

Bulleted or numbered lists

If there is only one “level” of information, or the structure is relatively simple you could use bulleted or numbered lists to present the data.

For example:

  • Item 1
  • Item 2
    • Item 2.1
  • Item 3

Tables

If there is more than one “level” of information a table may better suit the information.

For example:

Number Items
1 Item 1
2 Item 2

CSS

CSS is the styles given to the HTML content – this method is similar to using a ‘blockquote’ – because blockquotes are automatically given styles, however blockquotes can be displayed inconsistently across different browers.

For example:

<span style="margin-left: 30px;">This text has a 30px margin on the left</span>

This text has a 30px margin on the left

Add space entity codes

Finally, if none of the above options are suitable you could also carefully add the HTML entity codes for a space – ensuring that TinyMCE will not “clean them up” and remove them.

The manually enter a space entity code, use the ‘text’ button at the top right to switch to the HTML editor (or semi-HTML because it doesn’t show all tags, such as <p> or <br>) and enter the following where you would like the tab space to be:

&emsp;&emsp;

If this option works for you, you could apply a filter so that when the tab key is pressed in the editor these are inserted automatically – however note that this could have accessibility implications because it disables the tab button from moving outside of the editor.

For how to do this see: WordPress – How to make tab key create tabs in TinyMCE WYSIWYG editor