Guide to the text editor bar

The text editor bar appears in many places in the admin side of Citizen Space, and offers a range of options for presenting information to respondents. 

We’ll be looking at the following options in the text editor bar:

• Text formatting
• Headers
• Undo/redo
• Structuring and highlighting information
• Hyperlinking
• Embedding media
• Editing source code
• Maximise

Text formatting

The first 4 options on the text editor bar allow you to bold, italicise, underline or remove formatting from text. Once you've finished typing, highlight the text you wish to alter and select the relevant button. The Remove format button can also be used to strip out formatting from text that you’ve copied and pasted from elsewhere, such as Microsoft Word.

Headers

This option offers a choice of 3 text sizes, allowing you to add subheadings to your text. Using a heading hierarchy improves the visual readability of larger pieces of text by breaking it up into manageable sections, but also improves the experience for people using screen readers. Read our article on accessible headingsto decide which heading option is the best to use.

Undo/redo

This option lets you undo or redo any edits you have made (until you select the save button).

Structuring and highlighting information

The next 3 buttons provide ways to improve the presentation of information and make the content of your activity easier for respondents to digest. All of these can be used before or after entering text.

Numbered list

The first option on this section of the toolbar lets you create a numbered list within Citizen Space.

1. This
2. can
3. help
4. make
5. content
6. more
7. structured

Bullet list

Next is the bullet point icon, which is particularly useful for getting small pieces of information across quickly:

• such
• as
• statistics
• or
• key
• facts

Block quote

The last option on this part of the toolbar allows you to block quote text to draw attention to information you'd like respondents to read, or highlight a relevant quote. 

Using this button after entering text will always apply it to whichever paragraph is highlighted. 

Hyperlinking

These buttons are for adding or removing a link to a web page, document or email contact from text in your activity.

Our managing hyperlinks article takes you through this feature step by step. 

Embedding media

The 'Embed' button on the text editor bar are for embedding different types of media into your activity.

The types of media you can embed include:

• Images: This can help break up chunks of text and keep a respondent engaged in the information you're providing. For accessibility reasons, always include alternative text when embedding images. There is a detailed guide on how to use this feature, including how to add alternative text.
• PDFs: This provides in-built document display functionality within the application for PDF documents which is explained in this article.
• Rich media: Adding interactive media, such as videos or maps, to your activity is another great way to keep your respondent's interest and present information in a more appealing format. Our article on embedding rich media will guide you through the process.
• Tables: This option makes creating accessible tables in Citizen Space simple and swift. Use this tool to select the number of rows and columns you need, and a table will be created directly in your activity ready for content to be added. 
• Fact banks: This adds a fact bank that can be used to provide more information, such as background context, definitions, or supplementary guidance.
• Maps: This allows you to display fully interactive embedded versions of maps hosted elsewhere on your Citizen Space, either within the same or activity or a separate activity.

Editing source code 

The source button allows you to edit the HTML source code of a text field. Only use this feature if you're confident editing and creating code as it can cause unintended consequences otherwise! If you do use this to change the format or appearance of any text, make sure that accessibility is considered before finalising any changes.

Maximise to full screen

This is for full screen editing and is useful when working with large blocks of text. In order to leave full screen mode, select the same icon again.