The Compare view can be used a number of different ways. It is most commonly used when an approver is reviewing their maintainer’s workflow submissions. However, it can also be used to compare differences between the current live version of a page and older versions of it, as well as comparing the live page with your current draft if you wanted to see changes you have made that you have not yet submitted. First, this documentation will cover those three methods for comparison, and then it will cover the information that Compare with Current displays.
Workflow: Viewing Compare with Current Changes
Compare with Current displays changes from the previous version (or “PV”) of a page, and the workflow revisions submitted by a maintainer. This proposed version of the page currently in workflow is known as the “CWC” version, for the “Compare with Current” version. This is required before approving a workflow which then transforms the CWC version into the Live Version (“LV”). To view the CWC version, go to the page you want to view.
Step 1
Click the More dropdown and select “Compare with Current.” You should see the page begin to reload, but it will never load.
Step 2
Now, click the Output dropdown, and select the “Compare” option. The page will now properly reload the CWC version.
Viewing the CWC will display:
Component notes
Item section borders within a component
Highlighted red deletions with a strikethrough and without an H#
Highlighted red deletions with an H# and without a strikethrough
Highlighted orange poor formatting
Highlighted purple changes
Highlighted green additions
Step 1: More Dropdown ---> Compare with Current
Step 2: Output Dropdown ---> Compare
Versioning: Viewing Compare with Current Changes
Step 1
To compare changes between the current live version of a page and a previous version of the page, click the More dropdown and select “Versions.”
Step 2
You will see a popup display. Select the version you would like to compare by clicking the small checkbox for that particular version. Click the “Compare with Current” eyeball icon.
Step 3
You should see the page begin to reload, but it will never load. Now, click the Output dropdown, and select the “Compare” option. The page will now properly reload the CWC version.
Step 1: More Dropdown ---> Versions
Step 2: Select Version ---> Compare with Current Eyeball Icon
Step 3: Output Dropdown ---> Compare
Component Notes
Component notes now display, making it easier to understand the sections of a page.
Items Within Components
Items within a component are now separated by thin black lines, making it easier to understand which items are part of which component and how many items are within a component.
Red Markup with Strikethrough
Red Markup Without an “H” Tag Suffix – Text which appears red, and does NOT have a small tag at the end reading “H#” like “H2” or “H5,” etc. means that the red data, which was in the previous version, has been removed from the submitted workflow version. This version is known as the “Proposed Current Version,” or PCV.
Red Markup with an “H” Tag Suffix
Red Markup With an “H” Tag Suffix - Text which appears red, and DOES have a small tag at the end reading “H#” like “H2” or “H5,” etc. indicates a misused heading tag. Generally, this happens because a user wanted to emphasize certain text by “making it bigger,” and so they used the formatting option to manually override the heading of that text. For legal reasons regarding accessibility, headings must progress in a “logical order,” meaning that H4s fall under H3s, and that H3s fall under H2s, etc. You should never use an H1 on a page because the name of a page, and ONLY the name of a page (again, for legal reasons) should be an H1. This helps people with vision problems use screen readers so they can use our website as well.
Standard text within a text field, known as “paragraph text,” should not contain a heading of any kind.
The screenshot displays the entire area of text with small h#s boxed in red to the side.
Orange Markup
Orange borders around text means that “bad code” has gotten into the text field. It generally comes from copying and pasting text from somewhere else. Select all of the text (the keyboard shortcut Control + A on a Windows PC or Command + A on a Mac will select all of the data in a field) and then click the top-most “Format” dropdown and select “Clear formatting.” This will remove any inappropriate “ghost code.”
The entire bottom of this screenshot has orange bordered markup. Along with the red h# markup, this allows you to know that bad ghost code has been pasted into the text field on this page.
Purple Markup
Purple text indicates that something has changed between the previous version of the page and the CWC version. Usually, this indicates that the link on an image or text has been changes to a different link.
When hovering your cursor over a link, the link’s URL destination appears on the bottom left of most browsers.
Green Markup
Green markup indicates new data. Usually new text or a new image.
