Text (container) overview v. 0.1

The text container is used to hold text elements such as paragraphs, headings, and lists. It establishes vertical spacing and optimizes the reading experience.

Use When 

• You need to present paragraphs and blocks of text

Don’t Use When 

• Text forms part of the component semantically (e.g. don’t use a text box in a button or tab component where the text label already established).

Related/Similar Components 

• Text snippets (note this is not within the MVP, but there is a need to create insertable, repeatable snippets of content within text). Think for example how a bank needs to insert the home load interest rate inline a paragraph and be able to change the value of that snippet in one place and have it cascade through all pages. One particular Reckitt use case would be to create a snippet for brand naming, complete with language definitions, so that in the middle of a Spanish phrase, a text editor could insert a <span lang=en>Vanish OxiAction<span> content.

Key Content  

 *Discussion needed on where to draw the line between specifically a text box and a Rich Text Area which (with the CMS) allow embedding of other content types such as images, videos, etc).

Visual Style 

Some text elements with a specific semantic use will have a specific visual style such as an article or product overview (where the text is specifically formatted). Must of the text across the site stylistically will be formatted based on the components they sit within. This use case is therefore mainly for “casual text” with no semantic content model that might be needed (e.g. to write article content, etc).

The default style for a text container is effectively an unstyled div with no background or padding, etc. There may be a use case to style the container, but perhaps this can be delivered under container styles.

The visual style of text must deliver on styling for all common text treatments. Many of these will take browser defaults, but some will be specifically styled.

• Bold & Strong

• Italics & Emphasis

• Underline (though this will be removed from Content Editor options and limited to links)

• Superscript & Subscript

• Strikethrough

• Lists (discussion needed around styling & browser defaults vs stylised lists)

• Mark

• Selection

• Any others of core relevance.

Note that some elements such as blockquotes and pull quotes, etc are likely to sit as separate components and whilst they will utilise text boxes, won’t be available for “casual” non-semantic text.

Behaviour 

• Styles for selected text should appear once the text is selected (e.g. click and drag of mouse)

• Inline links must adopt all link styles including hover, focus, active, visited, etc.

• External links should be styled with an external link icon.

• The maximum width of any line of text has a master design token control (e.g. max text width) which is likely to be a ch unit (e.g. 80ch). This value will change depending on the font selection.

Editorial 

• To be completed at a later stage. Not necessary for development phase.

Accessibility 

• Where headings are utilised, they must be delivered in a logical order, showing hierarchy.

• Whilst headings would have a default visualisation, their appearance (CSS) must be separated from their semantics. It must be possible to apply the heading level independant of the style choices of the font.

• For readability, a max-width is applied to all text.

• For non-English sites, support is needed to address mixed native and English text across the site. This is most commonly seen in brand names which will often take an English presentation whilst the additional text (e.g. stain remover) is in native language. Defining the language allows screen-readers to take the correct pronunciation of the term.

  Open

  

  Vanish Brasil presents the brand name in English with the product type in Portuguese

Analytics & Data 

• None anticipated

Future Expansion 

Wider Conversations that may impact this 

• Heading Control: How to deliver programmatic control over headings so that content can be reused across the site in different contexts without being tied to HTML structure.

Inspiration from elsewhere 

• Adobe Experience Manager text component

Examples

Insert here

Useful links