cancel
Showing results for 
Search instead for 
Did you mean: 
snorton
Community Member

Line spacing on Pages

Jump to solution

Hi.  Does anyone know how to change the line spacing when you're typing something into a Page you've created?  On the bar, I see Font, Alignment, Indentation, etc, but not Line Spacing.  (Sometimes when I try to just use the Enter key to create more space between paragraphs, it looks fine on the Edit screen, but reverts to totally single-spaced once I save.)

Thanks very much!

Susan

Tags (3)
1 Solution

Accepted Solutions
James
Community Champion

CSS is the way to accomplish this.

  1. Click on HTML editor
  2. Find the opening tag for the section you want to change.
  3. Add a style attribute to the tag

Example, to add extra spacing after a single paragraph, do something like this.

Instead of

     <p>This is a paragraph that needs extra spacing after it.</p>

change it to

     <p style="padding-bottom: 1em;">This is a paragraph that needs extra spacing after it.</p>

The padding-bottom could be margin-bottom. The 1em is basically an extra line and is relative to the font size rather than the absolute pixels that a lot of people use. You could do 0.5em to add an extra 1/2 line.

Yeah, it's not ideal. You can't add a blanket CSS style that covers the entire page. If you could, you could wrap it in a div tag and then have it be inherited.

But I'm not sure if your example was just that or something easier to explain than what you're actually trying to do . There is usually enough space between paragraphs unless someone has overridden the default Canvas styling. I use extra padding at the bottom of tables so the text doesn't butt up against it, but the paragraphs haven't been an issue.

If you're talking about the actual spacing between lines, not just between paragraphs, then you should use style="line-height: 2em;"

If you want the lines double spaced and then extra spacing between the paragraphs, you could use style="line-height:2em; padding-bottom: 1em;"

However, if you have an entire block of paragraphs that you want to double space, you could wrap them in a <div style="line-height: 2em;"> ... </div> tag. This works because the paragraph tag <p> doesn't specify a line height override, so the <div> wrapper works for all things inside of it, but the paragraph tag does specify margins and padding, so those need applied to each paragraph so you need to override them each time.

So, if you have a bunch of paragraphs that you want double spaced and then an extra space between them, you could this:

<div style="line-height: 2em;">

<p style="padding-bottom: 1em;">This is paragraph 1</p>

<p style="padding-bottom: 1em;">This is paragraph 2</p>

</div>

You can't do anything that you want it to do, Canvas is picky about what it will take on a page. Part of that is to keep a consistent look and feel, which is better for the student experience.

View solution in original post

9 Replies
James
Community Champion

CSS is the way to accomplish this.

  1. Click on HTML editor
  2. Find the opening tag for the section you want to change.
  3. Add a style attribute to the tag

Example, to add extra spacing after a single paragraph, do something like this.

Instead of

     <p>This is a paragraph that needs extra spacing after it.</p>

change it to

     <p style="padding-bottom: 1em;">This is a paragraph that needs extra spacing after it.</p>

The padding-bottom could be margin-bottom. The 1em is basically an extra line and is relative to the font size rather than the absolute pixels that a lot of people use. You could do 0.5em to add an extra 1/2 line.

Yeah, it's not ideal. You can't add a blanket CSS style that covers the entire page. If you could, you could wrap it in a div tag and then have it be inherited.

But I'm not sure if your example was just that or something easier to explain than what you're actually trying to do . There is usually enough space between paragraphs unless someone has overridden the default Canvas styling. I use extra padding at the bottom of tables so the text doesn't butt up against it, but the paragraphs haven't been an issue.

If you're talking about the actual spacing between lines, not just between paragraphs, then you should use style="line-height: 2em;"

If you want the lines double spaced and then extra spacing between the paragraphs, you could use style="line-height:2em; padding-bottom: 1em;"

However, if you have an entire block of paragraphs that you want to double space, you could wrap them in a <div style="line-height: 2em;"> ... </div> tag. This works because the paragraph tag <p> doesn't specify a line height override, so the <div> wrapper works for all things inside of it, but the paragraph tag does specify margins and padding, so those need applied to each paragraph so you need to override them each time.

So, if you have a bunch of paragraphs that you want double spaced and then an extra space between them, you could this:

<div style="line-height: 2em;">

<p style="padding-bottom: 1em;">This is paragraph 1</p>

<p style="padding-bottom: 1em;">This is paragraph 2</p>

</div>

You can't do anything that you want it to do, Canvas is picky about what it will take on a page. Part of that is to keep a consistent look and feel, which is better for the student experience.

View solution in original post

Stefanie
Community Team
Community Team

 @snorton ​, there isn't a line spacing control on the Rich Content Editor, and as  @James ​ has said, the Canvas RCE only supports certain HTML (he provided a link to the Canvas HTML Editor Whitelist above). If you're looking to add extra space between paragraphs, you can switch to the HTML Editor and add one or more <br /> elements to the end of the paragraph.

snorton
Community Member

Thank you so much, James and Stefanie, for taking so much time to explain.  I was surprised (because it sounded so complicated) but I did it!

You're welcome,  @snorton ​. I backed into the wonderful world of HTML just by trying things out and being pleasantly surprised when they worked! If you're interested in pursuing this further, I hope you will consider joining the Instructional Designers​ group, where you'll find lots of tips and tricks about how to beautify your Canvas pages.

MikeM
Community Participant

Thanks very much for providing these detailed instructions on line spacing! It took me a couple tries to get it to work but I think I got the hang of it now.

Unsolicited Rant: As a new user of Canvas I am disappointed that I have to learn HTML basics for a very simple edit like line spacing. End of rant. :smileyangry:

The problem seems to come when using different styles. Here is a screen shot of some text on a page in canvas. Lecture support is styled with heading 3 and the bullet list is styled as a paragraph. I'm trying to do my part for screen readers but it seems to mess up the spacing for visual readers:

195971_pastedImage_0.png

Let me know if there is something I am missing or perhaps a better place that this comment/question can go.

Thanks!

James
Community Champion

 @MikeM ​,

There is an issue with the level 3 heading right now. You can find more information here: Heading Spacing in Canvas Pages

As for simple things like line spacing not being on the toolbar, many people have expressed items they would like to appear on the toolbar. There is no room for everything and so some of the less frequently used things get left off. I'm okay with that because I also believe that a lot of people want to design the page so that it looks good for them on their computer, but Canvas picks a reasonable setting for the styles so that they are usable on a multitude of browsers and devices.

In fact, they've already set the line-height to 1.5 (one and a half spacing). Here's what the line spacing looks like in Canvas now at 1.5.

195915_pastedImage_1.png

And here is what it would look like if the line spacing was 1

195916_pastedImage_2.png

Here's what it looks like at 2

196001_pastedImage_3.png

To me, the 1.5 looks pretty good. But changing the line height on div or p elements isn't going to fix the other issue because the headings have the line height specified as part of the CSS styling, so the specificity on the headings will override anything you try to do to the div and p. What you need to do is fix the heading.

Towards that end ... when I type in what you've typed in, I get this:

196003_pastedImage_5.png

The ridiculously large space around the level 3 heading is what I was talking about earlier, but I'm not seeing the overlap of it onto the list. It's possible that your school has overridden the CSS for H3 in an effort to fix it and done it incorrectly. It might be related to something you've done as you tried to fix it. So even though it looks terrible right now, I'm leaving it alone because I know at some point it will get fixed. Other people insist on invalid nesting and using headings for stylistic purposes rather than semantic purposes, but the purist in me won't allow me to do it.

In the meantime, if you really want to fix that issue, then modify the h3 element to specify the style, rather than changing the line-height on the surrounding material. There are a couple of styles attached to h3 that aren't attached to others. One is that they set the top and bottom margins to 1em rather than 6px like the others. Another is applied to h1, h2, and h3, but seems to only affect the h3 and that's a line-height=3.

add style="margin:6px 0; line-height:1.5;" to each h3, it should fix the spacing issue.

For example,

<h3 style="margin:6px 0; line-height:1.5;">Lecture Support</h3>

Looks like this

196005_pastedImage_8.png

But yes, you're going to have to edit the HTML to make that fix. And I really hope Canvas gets it fixed soon.

MikeM
Community Participant

Thank you very much  @James  for your detailed response! I think I am starting to get the hang of these HTML edits. Thanks for the link as well, I will monitor the Re: Heading Spacing in Canvas Pages for updates on this issue.

You have moved to the top of my list of people to ask my HMTL questions! Smiley Happy

Thanks again!

James
Community Champion

Thanks for the kudos, but there are lots of people here in the Community who provide excellent answers. As Stefanie mentioned below, the Instructional Designers​ group people who do some fantastic things with Canvas that I would never think of.

ghanson
Community Member

I have the same problem and so I use the simple Paragraph style and if I press Enter, I will get a double space; if I press SHIFT+Enter I get a new line without adding space. Hope this helps.

Line 1 Enter

Line 2 Enter

Line 3 Shift Enter
Line 4 Shift Enter
Line 5 Shift Enter
Line 6 Enter

Line 7