Text / Label
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
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.
The supported HTML markup tags in content attributes are:
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: