Overview

A new text editor is available in ROES Web v5. It introduces the ability to individually control font faces, sizes, styles, and colors, while also allowing colors to be restricted to swatches defined by the lab.

ROES Web v5 provides four new attributes for controlling font-related selections available to users when entering text: font_styles, font_colors, font_faces, and font_sizes.

ROES Web v5 text editor with font controls.
If this image does not display, open it directly: KB_V5_TextEntry_1.png

font_styles

font_styles defaults to true. Add it with a value of false to dim the Bold and Italic buttons within the editor pane.

Example of the font_styles attribute.
If this image does not display, open it directly: KB_font_styles.png

font_colors

font_colors can be specified using rgb, rgba, hex triplet, and hex quad values. The swatch display is self-centering with a maximum width of 11 columns. The separator character is a semicolon (;).

If font_colors is undefined, the full range of colors is available.

Example of the color swatch palette when font_colors is defined.
If this image does not display, open it directly: KB_font_colors_palette.png

Example of the font_colors attribute value.
If this image does not display, open it directly: KB_font_colors2.png

font_faces

font_faces is a comma-separated string of font faces you want available for selection.

Example:

If font_faces is not defined, the available fonts are those defined in the lab overriding CSS file.

Example of the font_faces attribute.
If this image does not display, open it directly: KB_font_faces.png

font_sizes

font_sizes specifies which sizes are available in the size drop-down.

If font_sizes is not defined, the available sizes are the full range from 8 to 64.

Include 18 in the font_sizes list. Size 18 is the default starting size unless it is already set on the node. If 18 is not defined, the size drop-down will be blank initially.

Example of the font_sizes attribute.
If this image does not display, open it directly: KB_font_sizes.png

Selection Model

When accessing a text node, all default or previously entered text is highlighted. A change to font face, size, style, or color changes all text.

In v5, when no text is selected, a change to font face, size, style, or color changes all text.

Individual characters, words, or lines can also be selected and styled independently.

Expected Result

Users should see only the font controls and choices allowed by the configured text-node attributes, while still being able to style all text or selected portions of text as needed.

Escalation Notes

• Confirm the text node is being used in ROES Web v5.
• If style buttons should be disabled, confirm font_styles="false" is present.
• If color choices should be limited, confirm font_colors is present and uses valid separated color values.
• If only certain fonts should be shown, confirm font_faces is present and correctly comma-separated.
• If only certain sizes should be shown, confirm font_sizes is present and includes 18.
• If controls appear unrestricted, verify that the attributes are actually defined on the intended node.