Text Styling

Options for styling inline text allow you to customize specific parts of the text differently from the rest. By selecting text within a paragraph or heading, you can apply enhancements such as bolding, italicizing, linking, or styling that particular text segment.

Steps to Apply Text Formats

To style inline text, simply highlight a portion of text within a text element. A text formatting toolbar will then appear above the selected text, offering various options:

• Strong
• Emphasize
• Superscript
• Subscript
• Insert hyperlink
• Embed within span
• Reset format

Click on the desired formatting option(s) within the text formatting toolbar to implement them on the highlighted text.

Note: The rich text feature includes a distinct inline text formatting toolbar.

Customizing Inline Text

When applying any inline text formatting, a nested element is created within the primary text element. You can further style these nested elements using the Style panel.

You have the flexibility to apply multiple text formats to the same selection. For instance, you can simultaneously make a word bold and italic. As you adjust and incorporate these style attributes, the text remains inline within the main text element.

Styling Bold and Italic Text

Designating text as bold applies a default bold font style. While you can customize this nested element by defining a class, you may opt to style the All Bolds tag to set the default appearance of all bold text throughout your website.

To style the All Bolds tag:

1. Select the bold text element
2. Access the Style Panel
3. Enter the Selector field
4. Choose the All Bolds tag
5. Fine-tune the styling

Assigning text as italic imparts an italicized style. Similarly, you can style this nested element using a class, or opt to style the All Italics tag to define the default appearance of all italic text on your site.

To style the All Italics tag:

1. Select the italic text element
2. Access the Style Panel
3. Enter the Selector field
4. Choose the All Italics tag
5. Adjust the styling

Nice to know: If your font lacks bold or italic versions, the browser generates substitutes which may not render accurately.

Implementing Superscript or Subscript Text

Important Tip: Screen readers do not explicitly announce superscript or subscript characters. To enhance usability and facilitate screen reader differentiation, include descriptive text visible to screen readers through ARIA attributes. Explore ARIA attributes further.

Designating text as superscript raises the text half a character above the normal line, portraying it in a smaller font size. You can customize this nested element with a class, or prefer styling the All Superscripts tag to alter the default appearance of all superscript text on your site.

To style the All Superscripts tag:

1. Select the Superscript text element
2. Access the Style Panel
3. Enter the Selector field
4. Choose the All Superscripts tag
5. Adjust the styling

Designating text as subscript lowers the text half a character below the normal line, rendering it in a smaller font. You can style this nested element with a class, or choose to style the All Subscripts tag to customize the default appearance of all subscript text on your site.

To style the All Subscripts tag:

1. Select the Subscript text element
2. Access the Style Panel
3. Enter the Selector field
4. Choose the All Subscripts tag
5. Adjust the styling

Inserting an Inline Hyperlink

Insert Link converts the selection into a hyperlink. You can then configure the link settings for this selection from the Element settings panel. By default, the link inherits its styles from the All Links tag. Learn more about styling tags.

Enclosing Text in Span for Further Styling

You can utilize inline styles to swiftly apply bold, italic, supscript, or subscript without additional styling. However, for additional text enhancements like underlining or creating a highlighted effect with a background, you can utilize the Wrap with span feature to wrap the selected text in an element that’s customizable using Style panel properties. You can also create a class and apply it to multiple span elements.

Illustrative Example – Underlined Text

Typically, you would modify the text decoration property of a chosen word or phrase within a paragraph to underline it:

1. Double-click the paragraph to edit
2. Select the desired text to underline
3. Choose the Wrap with Span option
4. Verify the text span selection
5. Add the underline text decoration in the Style panel

Clearing Formatting

To eliminate any custom formats:

1. Double-click the text element
2. Select the formatted text
3. Click Clear formatting

You have the flexibility to clear formatting from individual text portions or select the entire paragraph to remove all formatting with a single click. This action removes inline styles, spans, and links.

Non-Breaking Space

When working with paragraphs, you may encounter situations where a single word remains on the last line. By utilizing a non-breaking space, you can connect words while preserving the space, preventing word wrap. To insert a non-breaking space, press Shift + space between words that you wish to keep together.

Important: Exercise caution when using manual line breaks or non-breaking spaces. While they may resolve text layout issues on larger screens, they could create problems on smaller screens.