Rich Text Fields Usage
When rendering a page that contains one or more RTF, there is always a dilemma about the right way to do it - depending on what you expect to be in the content of that field, i.e.
- If the field does not contain paragraph elements <p>...</p>, the page code should add them to render the page properly. Otherwise the styles defined for the body copy will not apply to it.
- But if the field does contain these <p> elements, adding an additional outer <p> usually breaks the page - modern browsers do not allow nested paragraphs, and the first closing </p> closes all open paragraphs.
- In addition to that, other layout elements (i.e. <div ...>) are usually not handled properly by the style sheets - because there's now way to anticipate their presence.
- But in some cases, lists are necessary (i.e. <ul><li>...</li>...)
From the get-go, define a standard usage for Rich Text Fields and a different one for Single-Line Text fields, so both content editors and code developers know what to load / what to expect in each situation.
Proposed usage for Single-line Text fields
- They should usually be plain text with no embedded HTML
- They should never contain <p>, <div>, <span> or any layout-rendering element.
- They should never contain style-related elements (i.e. <em>, <strong>) - the style should be handled by the style sheets.
- Whenever possible, special characters like "»" should be pasted as visible characters instead of using their HTML equivalent (i.e. "»")
In some special and limited cases, i.e. some title fields, they might contain:
- Selected character-formatting elements like superscripts, subscripts (i.e. <sup>)
- Line breaks (<br>) to signal where to break the phrase.
Note that the page code should "know in advance" that a certain field may contain these HTML elements - the default will be not to handle them.
Proposed usage for Rich Text Fields
- They should be composed as a sequence of one or more paragraphs (<p>...</p>) and/or lists (<ul>...</ul> or <ol>...</ol>)
- Nothing should be nested inside a paragraphs. Lists may be nested.
- They should not contain images, <div> other layout block elements - with the exceptions listed in the next section
- They should not contain extra spacing at the end (i.e. <br/> or <p></p>) - the spacing should be fixed on the style sheets, when necessary.
- They might contain style-related elements (i.e. <em>, <strong>) to emphasize certain parts of the text.
- They might contain internal or external links, built with the Sitecore wizard - at least for the internal links - to ensure they use the item GUID instead of relative paths.
Special elements allowed inside RTF
Headings: Subheadings (typically H3 or H4) are allowed - outside a paragraph.
- Note that H1 and H2 are usually reserved for the main visual elements of the page, handled with special fields - not inside a RTF.
Tables: They are allowed in special cases - i.e. for displaying the Agenda on an Event page
- Note that their styling should be defined in the common CSS style sheets, not inline.
Images: In certain cases, small images that need to be inline with the code - like an icon - may be placed in a RTF with these limitations:
- The image media must be included in the media library and referenced by its GUID using the wizard - not manually defined, or pulled from some cloud location.
- Do not use embedded images for significant illustrations of a page - use separate media fields and render them appropriately for the different devices.