Rich Text Behaviour

Accessibility & Rich Text Behaviour

Workbooks Rich Text fields are designed to be fully accessible, ensuring that all users can read, navigate, and format content comfortably. This page documents how Rich Text fields behave, how accessibility is maintained, and includes an advanced section for HTML behaviour and keyboard interactions.

Key Accessibility Features

• Users can adjust text size, and spacing via Start > Preferences > Look & Feel, improving readability without breaking the layout. Default font within a rich text field will use the Theme’s settings as per Preferences.
• Within Emails using default text and size, will also be reflected within the recipient’s email client with their default settings too.
• Icons, tables, and interface elements remain aligned and centred even when text size changes.
• Enter and Shift+Enter behaviour prevents unwanted blank lines and ensures predictable navigation through paragraphs, lists, quotes, and table cells.
• Tables, images, and embedded media can be inserted in a way that remains accessible across devices and email clients.

Default Font and Size

• Rich Text fields use the Theme default font and size, and in emails, recipients see the font and size set by their email client.
• Explicitly choosing a font or size is preserved when saved or sent.
• Older templates or snippets may contain specific fonts like Arial 9pt, these can be reset to Default for accessibility, or set to a branded font while leaving the size Default.

Table Behaviour & Alignment

• New tables have no alignment by default and usually appear left-aligned.
• Use the table properties menu to set alignment, e.g., left, centre, or right, and the table will appear accordingly in the editor and when sent or saved.
• Tables created in earlier versions without alignment remain technically unaligned but appear left-aligned.

Enter Key Behaviour

• As per standard CKEditor5 behaviour, Enter works in the following ways:
  • There is a selection, it replaces the selection with a blank line, but the type of blank line depends on the selection content.
  • The Shift key is pressed (soft Enter), in a paragraph it adds a new line, in a list item it may outdent, and similar for other elements.
  • The cursor is not in a soft-breakable element, currently defined as CKEditor5 paragraph elements, but this definition can be expanded or tightened.
  • The cursor is at the start of a paragraph, a new paragraph is started according to standard CKEditor5 behaviour.
• If the previous element before the cursor is not a softBreak (<br>), a softBreak is inserted, otherwise the existing softBreak may be removed. This allows control over how blank lines are handled.
• Example of behaviour with blank lines:
  • Three lines in a paragraph with the middle line empty. Pressing Enter on the empty line will create a new paragraph with the blank line preserved.
  • Users can use Shift+Enter or Delete to adjust behaviour in the new paragraph as desired.

HTML Tags & Advanced Behaviour

For advanced users, Rich Text fields allow you to inspect and edit the HTML source using the toolbar. Behaviour is influenced by CKEditor5 rules:

• Block and inline elements follow CKEditor5 parsing, meaning some custom inline styles may be overridden.
• Soft-break behaviour (Shift+Enter) is handled programmatically to avoid creating unexpected empty lines, and respects paragraph structure and list nesting.
• Embedded media and images maintain accessibility and alignment across devices, with alt text recommended for images.
• Understanding the underlying HTML structure can help with troubleshooting spacing, blank lines, and table alignment.

The table below summarises Enter/Shift+Enter behaviour for different scenarios:

HTML Examples

For clarification, here are some HTML examples:

Paragraph with text:

<p>
Paragraph with text
</p>
<p>
Enter<br>
Soft Break
</p>

Which displays as:

Lists:

<ul>
<li>
List item
</li>
<li>
Enter<br>
Soft Break
</li>
</ul>

Which displays as:

Block Quotes:

<p>
<q class="inline-quotation">Block Quote</q>
</p>
<p>
<q class="inline-quotation">Enter</q><br>
<q class="inline-quotation">Soft Break</q>
</p>

Which displays as:

Tables:

<figure class="table">
<table>
<tbody>
<tr>
<td>
<p>
Example Table
</p>
<p>
Enter
</p>
</td>
<td>
Example Table<br>
Soft Break
</td>
</tr>
</tbody>
</table>
</figure>

Which displays as: