Ideally, our components in AEM are configured to accommodate the authors needs and do not require special characters or HTML "cheats". However, there are instances where workarounds are required.
Special characters
Below is a reference guide for the special characters you can use in most text fields in AEM to render trademarks, registration marks, non-breaking spaces and very importantly, a non‑breaking hyphen so hyphenated words are not broken across two lines.
Spacing and word breaks
(Note that the special character cannot be typed out on this page without turning into a symbol or hyphen or whatever the code is for. The code should be the red characters shown without any space between.)
- & followed by #8209; (no space)
- & followed by nbsp; (no space)
- & followed by ensp; (no space)
- & followed by emsp; (no space)
- & followed by #8201; (no space)
- & followed by #8239; (no space)
- & followed by #8288; (no space)
- Non-breaking hyphen
- A space (non-breaking space)
- EN Space
- EM Space
- A half space
- A narrow no-break space
- A “word joiner”—it prohibits a line break
Formatting tags
- & followed by lt; (no space)
- & followed by gt; (no space)
- & followed by amp; (no space)
- & followed by copy; (no space)
- & followed by trade; (no space)
- & followed by reg; (no space)
- < - Less-Than Symbol
- > - Greater-Than Symbol
- & - Ampersand, or 'and' sign
- © - Copyright Symbol
- ™ - Trademark Symbol*
- ® Registered trademark symbol*
* You may need to use superscript tags (<sup> .... </sup>) before and ] after these symbols to ensure they are superscripted properly.
Text styling
Formatting
- <b> [desired bold copy] </b>
- <em> [desired italic copy] </em>
- <u> [desired underlined copy] </u>
- <sup> [desired superscript character] </sup>
- <sub> [desired subscript character] </sub>
- <strong> [desired bold copy] </strong>
- <span style="color: blue"> [desired color copy] </span>
- Bold Text
- Emphasis—shown as Italics in most browsers
- Underline Text
- Superscript—used for Stat %, ©, ™, & ®
- Subscript—For type below a baseline, ex. H20
- Strong—shown as Bold in most browsers
- Span—used to color part of a text
Section divisions
- <div> [insert copy section] </div>
- <p> [insert para copy] <p>
- <br>
- <nobr> [nonbreaking words] <nobr>
- Division (or Section) of Page Content
- Paragraph of Text
- Line Break
- Keep a series of words together (check all viewports)
Images
- <img src="url" alt="alt text" title="title text"/>
- Basic Image
Linking tags
- <a href="mailto: jdoe@nuance.com">Jon Doe</a>
- <a href="url"> link text </a>
- <a target="_blank" href"url"> link text </a>
- Email address (no space between colon & address)
- Basic Link
- Link that opens in new tab
Nuance.com linking conventions
Links: Open in current or new tab?
Please follow these UX guidelines for consistency in how links behave across all pages on nuance.com.
The only links that should open in a new tab are:
- External links that go outside of nuance.com ecosystem (including Nuance properties that do not have global navigation or not fully integrated).
- Links to PDFs (like case studies, white papers, etc.)
- Nuance store is an exception: https://shop.nuance.com should open in the same tab for a seamless buying experience.
Formatting external vs. internal links in AEM:
- For external links: full URL starting with http://www.url.com
- Internal/in-line links: within the url field, navigate to the page you want to link to. Add .html to the end of the url if it is not added.
Anchor linking in AEM
To anchor link to a section of your product or campaign page:
- The brick that you are anchor linking to must be created first.
- Choose the metadata tab in the component configuration. In the brick ID field, give the brick a descriptive one or two word ID. The ID should be lowercase, and requires a hyphen if there are 2 words. Using more than 2 words may produce a null result.
- In the brick that you want to link from, your link or button url would be the brick ID preceded by a # sign. For example, if you gave a brick ID of "stats", your url would be: #stats.
- To anchor link to a brick on a separate page: insert the url of page you are linking to (with .html) + #brickID. Example: http://www.nuance.com/healthcare.html#stats
More AEM tips & resources
To play a YouTube video in an overlay in a Resource component list item or Multicolumn list item:
- In the ‘Link Page URL’ field, paste this url: //www.youtube.com/embed/4xV_aQWz4IU?autoplay=1
- The red text is an example of the video ID--place the appropriate video ID with the one you need followed by ?autoplay=1 as shown.
NEW To play a Vidyard video in an overlay in a Resource component list item, Multicolumn list item, or testimonial url:
- In the ‘List item URL’ field, paste this url: //play.vidyard.com/2Rzw8fJ7YyFsKpDAvTzTXu.html?
- The red text is an example of the video ID--place the appropriate video ID with the one you need followed by .html? as shown.
UPDATED For linking phone numbers in Resource bricks of list links:
- The url= tel:XXX-XXX-XXXX
(please note there is no space between the colon and the phone number, this will generate an error in the AEM system log)