Introduction
Over the years, I’ve set up hundreds of Canvas sites using HTML and CSS. I’ve collected some tips and tricks along with the way that make my job a lot easier. These tips will be referencing the Canvas rich text editor, which is used when creating/editing a page in the LMS. In most scenarios, instructors are working under restrictions regarding advanced CSS and HTML set by the sub account. In other words, there’s an existing inline styling system in which to create unique content pages. Inline styling can be challenging to work with, especially as you are making updates as you teach.
Make sure your Copy and Paste is clean
When I work with faculty to build course sites, much of the work for the course is done in Word documents, and this content is copied into a Canvas course sandbox. For our 10-week quarters, that can be a lot of copying and pasting. We also have built simple page templates using inline CSS, HTML tags, and Bootstrap’s Grid System, but when using the copy and paste feature in any browser, the text comes with its own set of styles and formatting. Suddenly, your font looks different with extra spacing before and after the text. We all want consistency with no strange formatting errors while designing our content pages. If an instructor were to go in and change the content, they could end up breaking any layout you may have designed for that page.
Ideally, I want to clean the content before copying and pasting it into my layout because the cleaner the HTML/CSS is, the less of chance there will be formatting errors down the road.
Here is an example of copying and pasting text from a document:
Not-so-clean HTML
Here’s an example of what clean HTML looks like:
Clean HTML
There are a few ways to make sure your text is clean and neat when it is pasted into your content page:
- Keyboard shortcut: Copy without formatting
- Windows for Chrome, FireFox, and Edge:
- Ctrl+Shift+V
- Mac:
- Command-Option-Shift-V
- Using a HTML-Cleaning Tool. This is one of my favorite tools to use. Just copy and paste the text into the rich text editor and adjust the tool’s settings to fit your needs.
- Here are the typical settings I use for this tool:
- Clear formatting in the Rich-Text Editor (use with caution)
- There is a feature in the Rich-Text Editor called “Clear Formatting” that only leaves HTML tags behind, but it will erase all custom HTML and CSS you programmed yourself.
Made a mistake? Simply hit the undo keyboard shortcut!
Breaking your carefully crafted HTML content page within the Rich Text Editor can be a frustrating experience. Before you hit that back button on your browser, if you made a mistake, just simply hit the undo button in your browser.
Too many nested tags? Use a code editor!
Using the HTML Editor in Canvas isn’t always the easiest, even with the “pretty HTML viewer”. A browser’s find function doesn’t always work, and scrolling through long wall of HTML code can be daunting to find an incomplete tag. For complex layouts, I have designed using the Bootstrap Grid System and my own inline CSS, I use a free code editor like Visual Studio Code. That way, I can troubleshoot and find and replace easily within the HTML code. I also keep some of my pre-made HTML layouts in one file for easy referencing.
If you want to learn more, feel free to book a DL Consultation with me!