HTML Editor: Tips and Troubleshooting

1. Problem: Font is Different Sizes

When you create your content in Word (or any similar program), you generate content and computer codes. The codes run in the background and manage the "style" of your document, handling elements like font size, line spacing, typeface, margins, and so forth. When you copy content from the word processor, you also copy the embedded code. When you paste your content, the HTML editor tries to integrate the embedded code into its own style template. The result may be inconsistent or unintentional formatting.

Note: For a deeper dive into styles, formats, and copying, check out this blog post from Shauna Kelly.

Prevention:

  1. Create your content directly in the HTML editor, using the toolbar to format your text.
  2. When given the option, remove formatting when pasting your text.
  3. Use the following shortcut keys (on your keyboard) to paste your text:
    1. PC: CTRL+SHIFT+V
    2. MAC: COMMAND+SHIFT+V
  4. Or, first paste your content into a text editor (which removes formatting), and then copy it from the HTML editor before pasting it into the HTML editor:
    • On a PC, use Notepad.
    • ON a MAC, use TextEdit.

Correction 1:

  1. Highlight the problematic text.
  2. Click on the Format icon to open the dropdown menu.
  3. Select Format from the menu.menu

     

  4. Repeat steps 2 and 3, this time selecting the kind of format you want to use.

Correction 2:

  1. Highlight and copy the problematic text;
  2. Open a text editing program;
    1. Notepad on a PC;
    2. TextEdit on a MAC;
  3. Paste the text into the text editing program;
  4. Then, copy that same text again from the text editing program;
  5. Paste it into your HTML editor (you can either paste it over the old text, or paste the new text in and then delete the old).
Close

2. Problem: HTML Window is Too Small

The size of the HTML editor adjusts to the size of your Internet browser. If you do not have enough workspace, you can always make the HTML window larger. 

You have two options:

  1. Click the Toggle Fullscreen button (click it a second time to exit fullscreen mode and save your work).toggle fullscreen icon

     

  2. Use your mouse to grab the lower right corner and drag the window open.drag window open icon

     

Close

3. Problem: Missing Toolbar Icons

Sometimes not all of the buttons in the toolbar will be visible to you. That happens when the toolbar is wider than your screen. To access the rest of the toolbar, simply click the Show all components button.

show all components button

 

Close

4. Tip: Use Replace Strings to Customize Content

Replace strings are "instructions" D2L uses to insert customized text. For example, you can personalize a generic email by telling D2L to automatically insert recipients' first name in the salutation.

Note: Replace strings are particularly useful when creating Homepage Widgets, custom Navbar links, mail templates, and grades when adding bulk feedback.

Close

5. Tip: Ensure Video is Responsive

Responsive content shifts and adjusts to fit any screen, from a smartphone to a desktop computer. Even though Brightspace is mobile responsive, the video you add may not be. Students can still see it; it just won’t resize to fit on a phone or tablet.


Test, is it responsive?

  1. Navigate to the content you wish to test
  2. Use your mouse to grab the edge of your Internet’s browser window (you may have to click the maximize icon in the upper right corner first).maximize icon
  3. Drag the edge inward.browser window

     

  4. Does your content shift and resize to fit the changing dimensions of your browser window? If so, it is mobile responsive. If some of your content disappears outside the edges of your browser window and a scrollbar appears, it is not mobile responsive.

If not, you can fix it.

  1. Check out iframely.com. Click the Refresh button. Then, on the lower left, you can copy the embed code; it looks like this:iframely.com example

     

  2. This HTML code contains all the instructions for making videos responsive. To use it in D2L, open any HTML editor. In your content, for example, click the down-facing triangle and select Edit HTML.dropdown menu

     

  3. Place your cursor where you want the video to be, and click the Insert Stuff button.insert stuff button

     

  4. Select Enter Embed Code from the list, and paste your code into the Enter Embed Code field. Replace the link (highlighted in the image below) with the link to your video. Do not delete the quotation marks.embed code example

     

  5. Click the Next button.next button

     

  6. Click the Insert button.insert button

     

  7. Be sure to Save your work.
Close

Back to Top