Copy text
What is a Copy text Block?
Copy text is a Block type that formats and styles text.
Note: This does not mean you should copy and paste content from a website, Teams content, or any other tool that may create unnecessary formatting in the source code of the text. If you choose to copy external content, paste the text onto Notepad or another tool that will strip the formatting before pasting the content to a Web page.
Note: When copying and pasting content from a Word document, a window stating “The text you want to paste seems to be copied from Word. Do you want to clean it before pasting?” will appear. Select Ok so that the copied text is stripped of any formatting that may interfere with web content functionality.
It is best practice to apply formatting directly in the text editor, such as applying bullets, bold, headings, etc. to ensure the content will not interfere with functionality.
For more information on the block, visit Copy text in our Block library.
Create Copy text
A Web page must be created first to add a Copy text Block.
From the administration bar, select Workbench, and then select My Dashboard.
Navigate to the Content list panel and select the content you wish to add Copy text to.
Select the Layout tab.
Select + Add section if applicable, then Select + Add block.
From the Choose a block list on the right, select Copy text.
Enter a Title. Select whether you want the Title to display by checking/unchecking the Display title checkbox. The Title will appear as the heading for the Block if Display title is checked.
Under Copy text, add the desired content in the text editor.
Select Add block.
Select Save layout.
Copy text elements
All copy text elements can be found when Configuring a Copy text Block. To Configure a pre-existing Copy text Block:
On the intended web page, select the Layout tab.
Select the Pencil icon on the top right of the intended Copy text block, then select Configure from the drop-down menu.
Abbreviation tags can be used to provide abbreviations or short forms of an element. When the user hovers over the abbreviation, the full text is displayed as a pop-up text.
How to use Abbreviation tags
Select the Source button in the top left corner of the text editing window. The text editing window is now displaying the HTML code for your page.
Insert the abbreviation tags where necessary.
For example, to make an abbreviation tag for the acronym UK, find "UK" in the source code.
Insert the opening tag to the left of the acronym and the end tag after the acronym,
<abbr title="United Kingdom">UK </abbr>Ensure that the title appears in quotation marks.
Find all the acronyms you wish to use the abbreviation tag for, and complete steps 6(a) through 6(c).
When finished, select Add block (or Update if this is a pre-existing Block).
Select a state from the Change to: drop-down menu.
Select Save layout.
Anchors are used to mark the location of an element within a page. Anchors can link to both internal and external elements.
How to add/link to Anchors
Place your cursor in front of where you want the anchor inserted.
Select Anchor from the toolbar.
Enter an Anchor name.
Only use lower-case letters, numbers and dashes (-). Dashes should be used to separate words when naming anchors (e.g. sample-1). Note: Anchor names cannot begin with numbers (e.g. 1st).
Select OK.
Highlight the text you want to link to the anchor, then select Link in the toolbar. Note: Avoid highlighting punctuation marks/white space at the beginning or end of the text.
Enter the anchor URL.
When linking to an anchor on the same page, the URL must begin with a pound/hashtag sign (#) followed by the name of the anchor (e.g. #sample-1).
When linking to an anchor on a different page on the same site:
Copy the URL of the page being linked.
Remove the "https://uwaterloo.ca", from the beginning of the copied URL and paste the remainder.
Append a pound/hashtag sign (#) to the pasted text.
Append the anchor name.
e.g. http://uwaterloo.ca/web-resources/communications#sample-1
Select Save.
Select Add block (or Update if it's a pre-existing Block).
Select state from the Change to: drop-down menu.
Select Save layout.
Bulleted lists can be used to list objects that have no sequential order. Numbered lists can be used to list objects that have a sequential order.
Create a bulleted list
Select the text you would like to be organized as a list and select the Insert/Remove Bulleted list button in the toolbar.
You can also use the tab key or Increase indent button to create sub-list items.
Select Add block (or Update if it is a pre-existing block).
Select a state from the Change to: drop-down menu.
Select Save layout.
Note: To remove the list, select the text which has been ordered in a list and re-select the Insert/Remove list button.
Create a Numbered list
Select the text you would like to be organized as a list and select the Insert/Remove Numbered list button in the toolbar.
You can also use the tab key or Increase indent button to create sub-list items.
Select Add block (or Update if it is a pre-existing block).
Select a state from the Change to: drop-down menu.
Select Save layout.
Note: To remove the list, select the text which has been ordered in a list and re-select the Insert/Remove Numbered list button.
Horizontal rules are used as dividers within a page. Careful use of horizontal rules can make pages easier to read and are visually appealing.
Create a Horizontal rule
Select the Insert horizontal line icon in the editing toolbar.
Select Add block (or Update if it is a pre-existing Block).
Select a state from the Change to: drop-down menu.
Select Save layout.
Highlight text is used to draw attention to specific words or phrases. It should be used sparingly to keep a page visually accessible.
Changing text style to Highlight
Enter the text you wish to highlight, or select it if it already exists.
Select the Formatting styles drop-down menu in the editing toolbar and select Highlight from the list.
Select Add block (or Update if this is a pre-existing Block).
Select a state from the Change to: drop-down menu.
Select Save layout.
Images can be used to clarify information presented in the copy text content. All images require Alternative text for accessibility purposes. Guidelines on how to properly write Alternative text can be found on the Brand page.
Adding images to a Copy text block
From the editing toolbar, place your cursor where you would like the image to appear and select Insert from media library.
Select the Image tab on the left side.
There are two ways to add your image:
Reference existing: Select the image that has already been uploaded to your site from the list on this tab. This prevents numerous copies of the same image from being uploaded and stored.
Add file: Find an image using the file browser to upload from your computer.
Enter a name for the image.
Add alternative text to the image.
Optionally, crop the image and/or enter a caption.
Select Save.
With the image selected, select Insert selected at the bottom left.
Select Add block (or Update if it is an existing copy text block).
Select state from the Change to: drop-down menu.
Select Save layout.
Note: After selecting Insert selected and adding the image to the body, it may not appear in the Copy text Block editor window. If this occurs, save your progress and refresh the page.
Important note about image size
If an image selected is too large for the WCMS, an error message indicating so will appear. Please attempt to upload a lower resolution version of the image. The initial error message will still appear on the WCMS screen; however, the photo URL will have updated. Please select Upload to add the lower resolution version of the asset.
After inserting images in a Copy text Block, you may want to align or resize them to better integrate with your Web page content.
Insert the desired image following the Adding images to body content steps.
In the Layout tab, hover over the pencil icon and select Configure next to the block you want to format the picture in.
Select the Edit media button on the left-hand side of the image, then a pop-up window will appear.
Select left, centre, or right alignment depending on how you would like the image to display.
The height and width of the image can also be updated to better fit within the copy text content. If only the width or height is entered and the image will scale itself automatically.
Select Save.
Select Add block (or Update if it is an existing copy text block).
Select Save layout.
LaTeX equations are used to format mathematical equations so they can appear properly on a page.
Add LaTex equations
Place your cursor where you would like the LaTeX equations inserted.
In the editing toolbar, select the Math icon.
Write your equation under Write your TeX here.
Select OK.
Select Add block (Or Update if it is a pre-existing block).
Select Save layout.
Note: The LaTex equation can be moved within a block by dragging by the crosshairs that appear when hovering over the LaTex equation.
Related Links:
Link text can be used to link to other pages both internally and externally. The different types of links will be reviewed further on this page.
It is important to remember accessibility when adding Link text. The Writing Style Guide states that the word or phrase you choose to link from (your hypertext) should provide context and be relevant to the action you want the user to take. Avoid ambiguous Link texts such as “click here” and “read more”.
External links
Highlight the text you want to link. Do not select any trailing punctuation or white space.
Select the Link icon from the editing toolbar and a pop-up window will appear.
If the page is an External link (not within the site), enter the URL.
To link to an Email address, type "mailto:" and enter the email address, e.g. mailto:wcms@uwaterloo.ca.
Select Save.
Select Add block (Or Update if it’s a pre-existing block).
Select state from the Change to: drop-down menu.
Select Save layout.
Advanced Email Syntax (Mailto links)
Other email fields can be predefined; so when a user selects the link, these fields will auto-populate. “cc=”, “bcc=“, “subject=”, and “body=” are the variables to add to the end of the mailto URL. Multiple emails can be separated by a comma. For spaces use “%20” and for linebreaks use “%0A” in the URL.
Syntax: mailto:[email@address.ca]?[1st variable][value1]&[2nd variable][value2]&…
E.g. mailto:wcms@uwaterloo.ca?subject=Email%20Subject&cc=another@uwaterloo.ca,second@uwaterloo.ca
Internal links
Internal linking occurs when a site links to other URLs on the same website, whereas external linking occurs when a site links to URLs on a different website. Internal links help users to navigate your website and establish a strong information hierarchy. When linking internally, it is not the best practice to utilize node numbers. Linking to content on your own website gives you full control over the content as opposed to an external website.
Highlight the text you want to link. Do not select any trailing punctuation or white space.
Select the Link icon from the editing toolbar and a pop-up window will appear.
To link to internal content, begin typing the title and select it from the drop-down menu that appears. The title is the name of the page, and not the URL path. It is not necessary to enter a '/' before the title.
To link to an Anchor on the same page, add a pound/hashtag sign (#) in front of the anchor name, e.g. #anchor-name.
Note: The anchor name must be spelled out correctly as there is no automatic drop-down menu to choose from.
To link to a File or an Image that exists on your site, begin typing the name of the File or Image and then select it from the drop-down menu that appears.
Select Save.
Select Add block (Or Update if it’s a pre-existing block).
Select state from the Change to: drop-down menu.
Select Save layout.
Internal links to listing pages
When linking to an internal listing page, you must use the internal path and are unable to select the listing page from the link drop-down function.
Highlight the text you want to link. Do not select any trailing punctuation or white space.
Select the Link icon from the editing toolbar and a pop-up window will appear.
Enter the internal path including the site name of the listing page you wish to link to. The correct path to enter of the default news listing page on a site is bolded in the following example: https://uwaterloo.ca/grebel/news.
Select Save.
Select Add block (Or Update if it’s a pre-existing block).
Select state from the Change to: drop-down menu.
Select Save layout.
Note: To link to a filtered version of a listing page, you must first filter said listing page and then copy the internal path. If you were linking to an internal filtered news listing page, it may appear similar to this: “grebel/news?title=&date_type=%3D&date%5Bvalue%5D=&date%5Bmin%5D=&date%5Bmax%5D=&audience%5B1%5D=1”.
A long description is a way to provide long alternative text for non-text elements, such as images. Generally, alternative text exceeding 250 characters, which cannot be made more concise without making it less descriptive or meaningful, should have a long description. Examples of suitable use of long descriptions are charts, graphs, maps, infographics, and other complex images.
As with alternative text, long descriptions should be descriptive and meaningful. It should also include all text that is incorporated into the image. A long description should provide visually impaired users with as much information as sighted users would understand from the image.
There are four components to creating a long description in the Waterloo Content Management System (WCMS):
A web page containing the long description.
Alternative text that describes the overall image.
A URL to the web page in the "Long Description URL" field.
A link to the long description web page for sighted users (recommended).
Create a long description web page
From the administration bar, select Workbench, and then select My Dashboard.
Navigate to Content types.
Next to Web page, select Add.
In the Title field, enter the heading of the page where the image will reside, and add "alternative text" at the end.
Enter a Description of content.
Leave the Place in site hierarchy box unchecked.
Select Save.
Select the Layout tab.
Select +Add block and select Copy text Block.
In the Title field, enter "long description" and uncheck Display title.
Add the long description into the text field.
Select Add block.
Navigate to the Change to: menu and select Published.
Select Save Layout.
On the page where the image will reside, insert the image and enter alternative text that describes the overall image.
Note: The image must be inserted through a Copy text Block so that it may be linked to the long description Web page.
Add the long description to the image.
Select the image in the Copy text Block and then select the Link icon in the editing toolbar.
Search and select the long description page title.
Select Save.
Select Update.
Select Save layout.
Deleted text and inserted text can be used to markup updates and modifications in a document. Browsers will normally strike a line through deleted text and underline inserted text.
Add markup for Deleted text
Create or configure the intended Copy text block.
Select the text you want to mark as deleted text.
Select the Styles icon in the editing toolbar.
Under Inline Styles, select Deleted text.
