[ARCHIVED] Graphic Placement

[riveracepeda]

Hi everyone,

I'm a music Professor and I use a lot of graphics in my lectures, such as Treble Clefs, time signatures, etc. Having to do my class this Fall online, I'm finding that whenever I insert a music graphic into my text it gives me a double line!! Isn't there a way to place any graphic with text without this happening?

I know in word for example you can format your graphic so it's behind the text. Can we do that with Canvas?

Thank you in advance!!!

Manny

[manuelgarciaph]

I can't visualize the first question so I'm gonna let others answer it. For question #2, there is no built-in tool in Canvas yet to do this (like in MS word). But you can achieve this via HTML and CSS. For instance:

<div style="background:transparent url(yourimage.jpg) no-repeat center center;"> This is your text</div>

 whereas "yourimage.jpg" is the address of your image file and "This is your text" is the visible text over the image. You should paste this via the HTML editor.

[riveracepeda]

Hi Manuel,

Thank you for your reply. I think we're getting closer to finding an answer. I created a microsoft word example of how it should look and I want to share it with you. Your code so far offers me some solution though. Check this out and see if you can try doing this. I will also include a graphic and you can use my example.

Thank you so much!

Manny

See below what the final product should look to the students.

This is a screenshot. See how the text was not affected by the insertion of the graphic!

See if you can recreate this with this graphic. Thanks!!!

[James]

I'm not sure what you mean by 2 lines, either. Do you mean two lines of text instead of the image being inline or do you mean a literal two lines?

There may be another approach that doesn't involve graphics for some of the content.

The Unicode characters have a musical symbols block. For example, the treble clef can be entered by going into HTML view and entering 𝄞 where you want it to appear.  You can also copy/paste the code into the Rich Content Editor.

We have to do this in math sometimes to get symbols that aren't on the keyboard. One trick we do is to go into Word where it's relatively easy to enter Unicode characters and create a cheat sheet that we can copy/paste from rather than having to do it from websites.

It is likely that you will find some Unicode characters that are not supported and it's hard to do an overstrike to get notes on the staff, so this won't completely eliminate the need for graphics. Still, you can do things like this:

𝄞𝄚𝄚𝄚𝄚𝄚𝄚𝄚

You could increase the font size if you need it bigger, but then it won't be inline with the rest of the text.

𝄞𝄚𝄚𝄚𝄚𝄚𝄚𝄚

[riveracepeda]

Hi James,

Thank you for your response. I see one of your examples. Let me see if I can recreate here what I mean. For example, I want to show my students what is a treble clef.

When I type the definition I would like to put the graphic to the right of the text              
Then just like it did here, follow up with an explanation. Let me see what happens      
when I try to attach the graphic.

Ok, there. Here is what happened! It added a large space between the sentences. When I do word for example and I insert a picture, it gives me option to put the graphic next to the text, or in-line with the text, etc.

Can we do this with Canvas.

Thank you for your attention.

Manny

[James]

If you are using the Rich Content Editor (RCE) [I have not tested this in the new RCE], then you can highlight the image and click the left-align button to make it float. This allows the text to wrap around it. You could put the image on the far-right of the page by clicking the right-align.

Normally when I do this, you need to go into the HTML editor and add a margin or some padding around the image. I normally add about 1em to the side adjacent the text (right side when the image is on the left or left side when the image is on the right). If you have really long text, you may need to add a bottom-margin as well. The problem with really long text is that you never really know how long is on the screen since it varies from device to device.

If you have really long or really short text, then this can look bad. Long text will wrap around the image (okay) but short text will cause the next paragraph to ride up. You will likely want to add a clearfix class to the paragraph that contains the image.

Here's an example of an image on the left. Just change the float to right and margin-right to margin-left if you want the image on the right.

<p class="clearfix"><img style="float: left; margin-right: 1em;" src="location of image"/>This is the text that goes around your image.</p>

Note that a right aligned image will not be next to the text if the text is really short. One way to fix this is to wrap the paragraph in an div element and put the clearfix on the div and then float the paragraph left and float the image right

<div class="clearfix">
<p style="float: left;"><img style="margin-left: 1em; float: right;" src="location of file" />This is to the left of your image.</p>
</div>

There's more that can be done, but that may give you an idea of how to get started.

I know that attaching a picture would be worth 1000 words, but I've already used my 1000 pictures. I wonder if that means I've written a millions words?

[riveracepeda]

I just want to do a follow up in my issue and thank those who commented. I solved the problem by putting the entire page (with musical notation), in the Unit. My students have a workbook so I can assign them Hands-on and so far everyone is participating. That seemed to be the only possible way to getting rid of unwanted spaces. In case there are more instructors out there who are dealing with Arts and Music, this is the way I was able to do it. I place an example below. I comment in the graphic what it is about so students will recognize what the graphic is about. Let me know if anyone has come out with a better solution, love to hear it!!