I am trying to force more space between a picture and the words that appear to its right, so I initially got into the html editor for the canvas page, and inserted the simple (html5 valid) attribute hspace in the image tag requesting a fixed number of pixels (7). After saving the page, I noticed no difference with before, and got to the HTML editor again to find if I had misspelled something. To my surprise, the full attribute I had inserted was not there any longer, it had been removed. I tried for several minutes to make sure that my typing was correct, but after saving the changes I will have always he same problem. After fighting with this for a few minutes without any success, I decided to do it via "local styles" and included a padding-right of 7 pixels. As nothing was modified in my page, although this time the attribute was accepted by the system (not removed as before). I have tried multiple ways of using styles to force a space (including margins) but with no response from the system, the style I type is just being ignored. Has anyone succeeded with this simple task of adding space? What is the trick? What could I be doing wrong? Are attributes in HTML tags supposed to be ignored?
Thanks for any help and/or guidance.
Cristina (new user)
Hi @cberisso ...
I spent a bit of time chatting with a technician from Instructure's Help Desk. The tech is going to send me a document that should show the kinds of HTML that are stripped when you save a Canvas course Page. When I get that document, I'll come back here and post it for you.
Hi again, @cberisso ...
Here is the document I was given by lburnett from the Canvas Help Desk staff. Basically, Lorin said that if you're using code that's not in this document, it will be stripped out. Lorin also gave me this link which shows more information (but I really don't understand too well): canvas-lms/canvas_sanitize.rb at 2f4b58cbdad19632f8d098b6b1952376b7fbda5e · instructure/canvas-lms ·...
Hope this helps!!!
Thanks it helps me! I appreciate the document and the link. I have had the same issue and was not happy about having code removed - The interesting part is that if you put the code in, then swithc back to the RCE, the html coding effect shows up. It is only stripped once it is saved - which is misleading. I do not know how easy it would be to do, but it would be nice if Canvas did processing on the html code when the view is switched back to RCE and then pop up a bubble stating that some code was removed.
@chofer , thanks for the link to the relevant source code. It's almost sad to see that the stripping isn't done in the RCE. I was debating trying to upload page code through the API to see if it would stick.
As for the allowed.pdf file you passed on, other places in the Community have listed that document (which looks more like an official document with headers, footers, and a last-updated date on it) as https://s3.amazonaws.com/tr-learncanvas/docs/Canvas_HTML_Whitelist.pdf . I'm adding the link here in case someone stumbles across this thread in the future and wants the latest version.
Hi @cberisso ,
I have never had a problem using padding or margins inline styles on an image in Canvas. You said that you were trying to add spacing between an image and the text to it's right, are you using a CSS float on the image? If so, you may want to try adding a larger amount of padding/margin. An easy way to check if you are using Chrome or Firefox is to right click on the image and choose "Inspect Element". You should be able to see if the padding/margin you have added is being counteracted by any other styles. You can also adjust the value to see what value you will need and then edit the page to insert that value. If that doesn't work, copy and paste your code as a reply and I would be happy to take a look and see if I can see anything.
You might find additional help with what you're trying to accomplish here: How to wrap text around an image using the Rich Content Editor
Hey @cberisso -
It looks like others have already pointed out the HTML whitelist for future reference, but about the particular issue of space between image and text:
w3schools indicates that the 'hspace' attribute is deprecated and not supported in HTML5 (reference); I have consistent success using something like <img style="margin-left: 7px;" />.
Hope this helps!
The only way I found to add spacing around images is:
a. use tables with padding
b. alter the image so there is a transparent border included in the image itself.
I appreciate all of the input which the community members share in these forums. Just wanted to say THANKS to all those who contribute.