Rich Text Fields Usage

Rich Text Fields Usage

The Problem

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>...)

Proposed solution

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. "&raquo;")
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.