Table of Contents

Text / Label

Overview

Text / Label element is the name used to describe an element that displays static text content.

Text / Label elements are often used for the following content:

Input Element Labels
Large blocks of text that contain information or instructions for the user using the form.
Section headings when the the number of nested sections is greater than 2. These will have to be styled to make them visually distinctive as a section header.

To add a Text element, go to Base Types > Text and add it to the canvas.

Applying content to the Text Element

To apply the text you would like to appear in a Text element, you will use the content_<language> attribute. If the form will only have a single language, please use the content_en-CA attribute.

To understand how language specific attributes are applied, please read our article on Language Support in the Editor.

The content attribute natively only accepts plain text, with no styling applied. If you would like to apply styling like bold, italics, and underline, please see our section on Styling Text Elements below.

Sizing Text Elements

The important size for Text elements is width. The text will only go as wide as the elements width and wrap to a new line as necessary, but will overflow the elements height.

While the text will vertically overflow the Text elements boundaries, it is a good practice to properly size the height of the element for the content entered. For the standard clevr text size, a height of 15 pixels per line of text should be applied.

This behaviour is especially important to consider if you use a nested <b> tag in your content attribute. There is a difference in the way Chrome/Edge and Firefox render <b> tags. Chrome/Edge considers them to use the weight “bold”, while Firefox considers them to be the weight “bolder”. This means that text in these tags will be wider in Firefox than in Chrome/Edge. For this reason, it is a good idea to always leave some horizontal buffer space between the visual end of your text and the width of your Text element, to allow for cross browser variation in text sizing.

Styling Text Elements

Style Attribute

Styling a Text element can be done using CSS in the style attribute. Styles applied to the Text element in the style attribute can only be applied to all text content in the element. If you need to selectively apply styles to the content, please read the section “Nested HTML Markup” below.

For more information on styling using CSS, please read our article on CSS Styles in clevr.

Common styles used on containers include:

color : A hex code or colour name used to define the color of text in the Text element.
border-bottom : A series of 3 properties that define a border that will appear below a container. A very common use of this style is border-bottom: 1px solid black. This will create a single black line on the bottom border of the element, which can be useful for Headers.
font-size: A number followed by px, which denotes the size of the text in the Text element. The default value for font-size is 12px.
font-weight: A text value that sets if the text content is bold. The normally used values are normal and bold.
font-style: A text value that sets if the text content is italics. The normally used values are normal and italic.
font-decoration: A text value that sets if the text content is underlined. The normally used values are normal, underlined, line-through, and overline.

Nested HTML Markup

The content attribute accepts nested HTML markup. HTML markup is defined in the content by placing an opening and closing tag around the content that will be modified by the tag.

An opening tag is defined as a tag name surrounded by greater than and less than symbols. For example, a bold (b) opening tag would look like <b> .

A closing tag is defined as a tag name surrounded by greater than and less than symbols, but with a backslash before the tag name. For example, a bold (b) closing tag would look like </b> .

Below are a few examples of HTML Markup in content attributes.

Content Attribute	Output
<b>Course Categories</b> <i>(Pick one)</i>	Course Categories (Pick one)
Please read and focus on <u>underlined</u> text in the following paragraphs.	Please read and focus on underlined text in the following paragraphs.
Please limit your select <u>to only <b>THREE</b> options</u>	Please limit your select to only THREE options

The supported HTML markup tags in content attributes are:

Tag Name	Style	Notes
b	Bold	N/A
i	Italics	N/A
u	Underline	N/A
span	N/A	An advanced HTML markup tag. It should only be used by those with experience writing HTML. The use of this tag can often be avoided with the use of multiple Text elements. Used in conjunction with its own style attribute. All styles noted above can be applied to a span tag: <span style=”font-size: 8px;”>Small Text</span>
br	Line Break	An advanced HTML markup tag. It should only be used by those with experience writing HTML. The use of this tag can often be avoided with the use of multiple Text elements. A tag that doesn’t use a closing tag. When used in a content attribute, it will apply a line break at the location of the br tag. br tags should not be surrounded by spaces. Text on first line<br>Text on second line

If an opening tag is used in the content attribute of a Text element, then a closing tag must be included in the same content attribute. Failing to include the closing tag can cause erratic form and editor behaviour.

If an element is selected and has neither an elementId or an Options Table, that is a symptom of another element on the form having an unclosed HTML tag.

The solution is to try and find the element that is missing the closing tag and applying a closing tag.

Tags can be nested within each other to apply multiple styles to text. However, nested tags much be closed before their parent tag.

A few examples of these errors are:

Invalid	Valid	Reason
<b>Bold and <i>Italics</b> Text</i>	<b>Bold and <i>Italics</i></b><i> Text</i>	The i tag must be closed before the b tag. To have the non-bolded text italicized, you must start a second italics tag.
Please pick <b>one	Please pick <b>one</b>	The bold tag was not closed in the content attribute.
<bold>School Name</bold>	<b>School Name</b>	<bold> is not an acceptable HTML tag. Please only use the tags listed above.
<b>Indicate your preference:<b>	<b>Indicate your preference:</b>	The closing tag in invalid because it is missing the / .