Rich Text

Macaw allows you to add inline styles to text inside your text elements. This is done by applying styles to a tag or node within your text. Each text element can contain its own styles for each node that will be globally applied to all like nodes within that text element. Rich text styles are also responsive and can have styles per state.

NOTE: Currently Macaw only allows for the creation of nodes one level deep restricting the creation of nodes within nodes.

Available Tags/Nodes

Macaw allows you to add nodes with tags of span, a, em and strong. All tags have been stripped of their default styling to allow for the most customization.

Creating Rich Text Node

You can do this by doing the following:

1. Begin by going into edit mode for your text.

2. Select the text that you want to style.

3. Using the inspector panel on the right select the tag you wish to wrap your selection.

4. Style the new node using the palettes on the right.

Selecting Nodes

When a text element contains nodes you can select an entire node's contents by double clicking on any of the text inside it or by placing your cursor anywhere in it's text. In addition if a selection is made that partially contains a node the selection will be updated to either contain just the node OR to contain the text without the node. This is to ensure that the code inside your text element is as clean as possible.

Styling Text Nodes

Styling text nodes within text elements is as easy as placing your cursor anywhere inside the node OR selecting the entire nodes contents (double click anywhere within the node's text). Once a node is selected you can use the palettes on the right to style the node.

Shared Styles

All nodes that share the same tag will share styles within each text element. This just means that if you create a blue link in the text all anchors in that text element will be blue. In the event you update that link to be red all anchors within the text will be updated as well. This is to allow you to edit styles quickly across entire text elements.

Example

Initial styles for spans within the text.

After changing color and text decoration for a single span all other spans were updated.

Copying Rich Text Styles

In the event you have two text elements that should contain the same rich text styles you can use the "Copy Visual Attributes" command to copy both the element's styles and all its rich text node styles over to the other element.

Changing a Node's Tag

An existing nodes tag can be changed at any time by selecting the node and using the tag buttons at the top of the inspector. On change of the tag if any existing styles exist for the new tag they will be applied to the node.

Deleting a Node

Nodes can be removed by first selecting the tag and clicking the "No Tag" button located in the inspector.