[ARCHIVED] Heading Spacing in Canvas Pages

[snugent]

I thought I was going nuts for awhile but in this test page I have noticed that Heading 2 and 4 seems to have proper spacing between the lines but heading 3 as more spacing. Does everybody else see this? We haven't done much customization so I don't think it is that but wasn't sure.

Test page: Canvas Instructor Tutorials

[kona]

Yep, this is what we're seeing as well:

[Chris_Hofer]

Showing similar results here, too.

[ajohnson]

I see it, too. I thought it was our custom CSS doing it!

[snugent]

Deactivated user​ or  @scottdennis ​ do you know why the heading 3 has extra space?

[jordan]

Whoa! Nice find, Susan! I wonder if it's always been like this, which appears to be something that should be filed as a bug.

[snugent]

Deactivated user I need to submit a ticket? Or is this some you will report?

[kona]

snugent, you would want to file a ticket on this. Actually anyone who is bothered by this should go ahead and file a ticket for this.

[jordan]

[kub26]

I've noticed this too because of the HUGE spacing that would happen whenever a header had to wrap around (especially on smaller screen sizes). So, I started using the "line-height" attribute to fix it, and it's been working out pretty well. Here's the link to W3 school's section on line-height if you're interested in playing around with your HTML on the page.

[cholling]

I reported this to our local Tier 2 support back in February and received a response in mid-March that Instructure told them it was fixed. I responded that all of the other heading levels were fine but that H3 still had extra space. I haven't heard anything further from them although the message was that when Instructure reported a fix they would let me know.

[teri_wright02]

We are experiencing the same thing. I noticed it when we switched to the new UI.

[Sylvia_Ami]

I experience the same thing snugent​ on my desktop. But then I wondered how it would look on a mobile device. So I took the page you created and put it in my test course and looked at it on my Android phone. See the image below. It looks evenly spaced. What do you think?

[don_bryn]

This looks like a simple error in the CSS file.  That would explain why it doesn't show up in the mobile version. (Different media queries will cause different CSS files to be loaded, depending on the screen of the device being used to view the page.)

Has anyone done an "inspect element" to see exactly which CSS rule is causing the H3 to have more space?   It's probably line-height, but it could be padding or margin too. .    This would be a simple 2-minute fix if we find exactly which CSS rule is causing the error.

[don_bryn]

OK, so I had 5 minutes. . .  I inspected the elements and here's the css properties as defined in the "common" CSS file:

	Header 2	Header 3
font-size	25px	21px
font-weight	300	normal
line-height	37px	63px
margin-bottom	6px	21px
margin-top	6px	21px

As you can see, both line-height and top/bottom margins are much larger for Header 3.   It looks like initially they were designed for a specific use where Header 3 needed more space above and below, but that's not intuitive for css that will be used by a lot of people.   Definitely needs a help ticket.  Should be a quick fix as long as the Canvas coders themselves aren't using this HTML tag for a specific use in the Canvas design itself.   Then they would have to re-class all their tags. . .

[James]

 @don_bryn , thanks for the table. The offending lines set the top and bottom margin to 1em and the line-height to 3.

From _g_instructure.scss​

.user_content h3,.user_content .h3,.mceContentBody h3,.mceContentBody .h3 {
    margin-top:1em;
    margin-bottom:1em
}

By the way,  there's a note at the top of this file.

// DO NOT ADD ANYTHING TO THIS FILE
// there is certainly a better place to put whatever it is that you were thinking
// about putting here. Ask the UX team if you need advice.
//
// In fact, you will get a cookie for anything that you safely remove from this.

I want my cookie, preferably chocolate chip and not the small piece of data a website stores in a browser.

and (the best I can tell)  _bootstrap_overrides.scss​​​ sets the line spacing for h1, h2, and h3 to be double the base line spacing, which is 1.5. So this shows up in the CSS as line-height 3:

h1,h2,h3 {
    line-height:3
}

The line-height:3; doesn't affect h1 and h2 because a few lines later in _bootstrap_overrides.scss there is a line-height specified for h1 and h2, but none for h3. The h3 just contains the font-size definition.

Very limited testing (Firefox and only with inline styles) show that if you set the following styles it should fix it (possibly not within the rich content editor, but I'm not as worried about that as I am what students see).

.user_content h3, .user_content .h3 {
     margin:6px 0;
}
h3, .h3 {
     line-height: 1.5;
}

You will note that I didn't include the .mceContentBody. The Rich content editor uses .mce-content-body and the only place in the source code that mceContentBody shows up is in the _g_instructure.scss file.