[ARCHIVED] Why is font-weight being stripped from the RCE???

[and-hu]

.

[Kelvin_Dean]

This is a huge problem for us when designing pages. I've been using this every time when doing some pages on credit rolls, like the one shown on the right (rendered in Responsive Layout).

In fact, the "font-weight: lighter;" code makes the page more artistic, using thinner typography for the headers.

Sample split-screen credits roll concept, with light-weight fonts for the headers.

[Shar]

I'm replying to this topic to hopefully bump it into discussion again. I remember a few months ago seeing someone comment on a release note (if I recall correctly) about font-weight: bold getting stripped out and the answer was to just use strong. Ugh.  😓 It was pointed out that strong is good for short words but not for large batches of text; I use it for menu items and long titles.

And now I see your use case for font-weight: lighter and yikes, there's no easy work-around for that case. @Kelvin_Dean and @and-hu you can ask your Canvas admin to add CSS classes to get the correct font-weight applied. I use be-bold:

.be-bold {
	font-weight: bold;
	}

But if you're sharing courses between different accounts or different subaccounts with their own custom CSS, then the class will not work.

Have either of you submitted Canvas help tickets regarding the stripped out font-weight?
Cheers - Shar ⭐

[and-hu · Accepted solution]

I deleted my responses and initial post because the whole thing frustrated me, but suffice it to say I went back and forth with Canvas about it and their final L1 response is that it is intended and to point to the HTML Allowlist (which has the font property on it, which is itself a shorthand property for several other properties, including font-weight - meaning you can still change font-weight with it - all of which you can still use independently except font-weight despite not being explicitly mentioned on the Allowlist).

There is no chance of our big university admin changing or adding CSS rules for us. But if you need a class for bold, using “ui-priority-primary” works, at least for me. The only thing rule I see for it in the Canvas CSS is in fact “font-weight:bold”

[Shar]

Thank-you @and-hu for the tip on the class="ui-priority-primary" and the info about the font property is itself not being stripped out, just the font-weight. Ugh! c'mon New RCE.

I think I'll have to stick with the font short-hand declaration so that it also shows up in mobile. Here are some tests I just did and checked in the Canvas Student app.

Webpage displayCanvas student app display

@jdick1 Pages with existing font-weight: bold will keep that property in it and continue to work. But if you edit that page, the (new) RCE will strip out the font-weight even if you put it back in through the HTML editor.

@Kelvin_Dean You can still get the lighter font by using style="font: lighter 1rem Lato, sans serif" and thanks for the tip in using lighter font weight "in credits" for some contrast.

Cheers - Shar ⭐

[jdick1]

This is very disappointing. Good news is that it doesn't appear to be retroactive. I just checked a page where it was used, and it's still displaying correctly.