Text editing effects
Work in progress
This page is a work in progress.
Please file an issue or submit a pull request if information or coding is missing, incorrect or out of sync with the main repository (wet-boew/wet-boew).
Purpose
Use to indicate text edits on a page.
Design and coding
Basic use
Marked text
Use to highlight a section of text for reference purposes, due to its relevance in another context.
Appearance
Regular text plus marked text .
Correct use
Compliance point(s):
- Use to mark information that is important in another context
- Highlight text to show matching search terms or to show text in relation to something else
Incorrect use
Compliance point(s):
- Do not use this component in a way that conflicts with the preceding compliance point(s)
- Do not use in place of bold (
<strong>) text- This tag is not meant to simply highlight key words, phrases, numbers or amount totals
Code
<p>...<mark>...</mark>...</p>Deleted text
Use to indicate text was deleted.
Appearance
Regular text plus deleted text.
Correct use
Compliance point(s):
- Use to show recently deleted text
- Use sparingly, as it makes a page difficult to read
- Use to show record changes to an official document, such as meeting minutes or a law
- Use as a temporary effect on a page
Incorrect use
Compliance point(s):
- Do not use this component in a way that conflicts with the preceding compliance point(s)
Code
<p>...<del>...</del>...</p>Strikethrough text
Use to indicate text that is no longer relevant.
Appearance
Regular text plus strikethrough text.
Correct use
Compliance point(s):
- Use to show something is no longer accurate or no longer relevant
- Use sparingly, as it makes a page difficult to read
- Use to show record changes to an official document, such as meeting minutes or a law
- Use as a temporary effect on a page
Incorrect use
Compliance point(s):
- Do not use this component in a way that conflicts with the preceding compliance point(s)
Code
<p>...<s>...</s>...</p>Inserted text
Use to indicate additions to a document.
Appearance
Regular text plus inserted text.
Correct use
Compliance point(s):
- Do not use this feature
- It mimics the visual appearance of a link, which causes usability problems
- Non-links should not look like links
Incorrect use
Compliance point(s):
- Do not use this component in a way that conflicts with the preceding compliance point(s)
Code
<p>...<ins>...</ins>...</p>Underlined text
Use to underline text. Do not use this feature on webpages.
Appearance
Regular text plus underlined text.
Correct use
Compliance point(s):
- Do not use this feature
- It mimics the visual appearance of a link, which causes usability problems
- Non-links should not look like links
Incorrect use
Compliance point(s):
- Do not use this component in a way that conflicts with the preceding compliance point(s)
Code
<p>...<u>...</u>...</p>Some of the code and documentation for this page is sourced from Bootstrap (external link)
- Date modified: