Make the RCE font units internally consisten

0 Likes

The RCE shows the font size of text in multiple units, such as pt. px. rem, ...   These make no sense, especially since one cannot request that text be formatted in these units. Let's stick with one font unit, like pt. Let's also make it possible to specify the font size or text. Often when I ask for a different font size, nothing changes.

 

🔎 This idea has been archived. While this idea isn't open for comments, it is an important part of Instructure’s idea conversations and development process. Contributions like this are valuable as Instructure prioritizes work on new or existing features.

9 Comments
Stef_retired
Instructure Alumni
Instructure Alumni

 @russ_abbott ‌

Would you please provide the location in the RCE where you're seeing this? When I access the dropdown, this is what displays:

354101_rich content font size.png

Thanks.

russ_abbott
Community Member

Here's my screenshot. As you can see, the current font size is shown as 17px; yet the dropdown options are all in pt.

James
Community Champion

 @russ_abbott  

I am able to duplicate what you're seeing if I specify a custom font-size in the HTML.

354169_pastedImage_1.png

354179_pastedImage_2.png

Since I'm no longer using a standard size, Canvas is showing me what is there and using the proper units that I've specified. Good job Canvas!

This situation could easily happen without you being aware if you copy/pasted content into the RCE from another source.

I would open the HTML editor using the < /> link at the bottom of the editor and check your code.

Alternatively, if you just want to clean it up, you can select the text and then use the Clear Formatting option. It is near the end of the menu bar.

354180_pastedImage_3.png

russ_abbott
Community Member

Here's a completely blank page! And I didn't do anything to the HTML. I just created the page and got this, Yet it has the same problem. 

James
Community Champion

 @russ_abbott  

That was going to be my original response, but it was lengthier, so I thought I'd try the easy route first.

You don't say which browser you're using, but I'll demonstrate from Chrome on Windows.

Canvas doesn't use point sizes, they use rem units. A rem of 1 means 100% of the size relative to the <html> (root) element.

354196_pastedImage_1.png

The 1 rem gets converted into pixels based on your browser's settings. In my case, it becomes 16px.

354203_pastedImage_2.png

The 16px is because my brower's font size is "Medium (Recommended)"

354204_pastedImage_3.png

If I change that to "Small", then the font size shows up as 12px

354205_pastedImage_4.png

This is reflected in the New Rich Content Editor (RCE)

354206_pastedImage_5.png

If I go into the browser's appearance settings and change it to Large, then I get 20px. However, if I change it to Very Large, then I get 18pt in the RCE menu.

If I customize the size of my fonts then I am able to get 17px in the RCE

354207_pastedImage_6.png

354208_pastedImage_7.png

You can quickly check this in Chrome by going to the Settings > Appearance. If you have a custom setting, then the Custom option will be there (it was not there before I set custom font sizes)

354209_pastedImage_8.png

What appears to be happening is that the font size in points is set to match what your browser is computing. If it does not match one of the values in the list, then it shows it with the correct units.

This is why I think Canvas should do away with the font size selection in terms of points. It's not good from an accessibility perspective. If I have trouble seeing small print, and I do, I should not be locked into a font size because the content creator decided they wanted 8pt because they can see clearly. Canvas should use the relative sizes (xx-small, x-small, small, medium, large, x-large, xx-large, xxx-large), but that's not human friendly.

It still looks like the 17px is because of your browser settings and resetting them should restore your point settings instead of pixel settings. The whole thing is messed up, but Canvas considers what people expect (point size not relative named sizes) when they program stuff. It shouldn't matter what your browser settings are when you're creating content for other people. What you should do mentally is treat the sizes as x-small, small, medium, large, x-large, xx-large, and xxx-large rather than 8, 10, 12, 14, 18, 24, or 36 pt. It's not an exact match up, though, I just mean those in the relative sense.

You can actually enter a font-size: x-large inside your HTML. If you do, that's how the RCE displays it.

354210_pastedImage_9.png

When you do that and look at the computed font size, it's actually 24px. 

354211_pastedImage_10.png

However, if you're using a large font in the browser, then it shows up as 30px. What x-large is is 125% of normal size.

Now, let's say that I have my custom font size set at 17px, but I go in and make my font size 14pt. Here the first part is 1rem and the second part is 14pt.

354212_pastedImage_11.png

The 14pt is 18.6667px while the default [17px for you, 12pt/16px for the Medium] is 17px.

Here is a Medium browser setting. Each letter is a menu choice 8pt (AAA), 10, 12, 14, 18, 24, or 36pt (GGG). The XXX doesn't have any styling applied to it, so it is 1rem. In this case, that's 12pt or 16px.

354213_pastedImage_12.png

Now, with your 17px base font size, notice the XXX is not the same size as the CCC (12 pt)

354214_pastedImage_13.png

See the problem here? Let's say you set your custom font size to 24px because you need things really large. Because 24px is 18pt, you'll see "18pt" in the menu for the default size, but now it's actually bigger than the DDD at 14pt. It's the same size as EEE (18pt).

354215_pastedImage_14.png

So, if you're developing and you say, "Oh, I need this a little bit smaller than normal" you're going to pick 14pt (DDD). But to the typical user who has the default Medium font in the browser, it will actually appear larger, not smaller.

Canvas works best when you have a Medium (Recommended) font size picked in the browser. Then everything works as expected.

I still don't think they should let people pick font sizes. My experience is that leads to people using font sizes when they should be using headers and that's bad for accessibility. It also exacerbates the issue where the developer isn't using Medium (Recommended).

I have a macro I run when I am creating content. It goes through and removes every <span> element from the HTML. Yes, there are rare cases where I might need it, but mostly it's crap like the font size that has no business being in the editor.

russ_abbott
Community Member
James,
Thanks for finally understanding my point. As you say, there are many ways to talk about display size. (I'm using Chrome on Windows as in your examples.) I agree with you that Canvas should not be inconsistent in terms of how it does it.  Let's stick with one approach and not confuse authors. 
That was the concern of my original post. It shouldn't have taken this long to get that point across. Instructors should not be expected to know as much about text size as you explain in your post. 
Now that we agree that this is a problem, the question is how is it going to be fixed. I hope that someone on the Canvas team will take it on. What can we do to make it more likely that this will happen?
James
Community Champion

 @russ_abbott ,

I replied to your private email except with respect to these comments.

I agree with you that Canvas should not be inconsistent in terms of how it does it. Let's stick with one approach and not confuse authors.

I don't remember saying that. I thought I said that you shouldn't be able to change font sizes from the menu. Sorry if that point got lost, sometimes I ramble. What I didn't write, but would consider as a compromise, is that if it has to be there, then bury it in the menu rather than taking up precious space on the toolbar.

Peyton is looking for extra real estate on the toolbar anyway. He wrote a blog post a couple of weeks ago about the New RCE and what needs to happen before everyone shifts to it. RCE Updates - Summer 2020

Stef_retired
Instructure Alumni
Instructure Alumni

 @russ_abbott ‌

We'll move this idea forward for broader discussion.

KristinL
Community Team
Community Team
Status changed to: Archived