Hanging Indents: code-snippet

[G_Petruzella]

I'd posted this in the old Community and it seemed some people liked/used it, so here it is again - how to make hanging indents!

<p style="margin-left: 20px; text-indent: -20px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed placerat accumsan viverra.</p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed placerat accumsan viverra. Nam faucibus suscipit nunc vitae iaculis. Morbi in pretium leo. Integer fermentum at tortor et dapibus. Aliquam quam magna, mollis sed leo at, pretium auctor nulla. Vestibulum ac est eu mi aliquet ultricies. Phasellus condimentum tristique mi, eu aliquet metus tincidunt quis. Duis egestas blandit nunc, eu lacinia ex cursus ut. Vivamus rhoncus ipsum orci, in gravida dui pretium id. Vivamus a justo consequat, laoreet lectus ut, scelerisque lacus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque et augue eget nisl semper volutpat sed ut urna. Aliquam id gravida felis.

[Chris_Hofer]

Thanks for providing this, Gerol!  Very helpful!

[Stef_retired]

You scooped me,  @G_Petruzella ​! I just posted a document of your snippet (although I did give you credit), and now I see that you posted it already; I'm going to slink away now and delete mine.

But I hate to see my screenshot go to waste:

[G_Petruzella]

Hee hee, isn't it terrible being part of such a sharing community, stefaniesanders :smileylaugh: And it is a spiffy screenshot. Leave it up or take it down, so long as people find the code they want, it's all good. --/g

[Stef_retired]

Nah, already gone. Yours is awesome.

[bsr]

Stephanie, yours looks more indented... was your code different? I've been trying to get a larger indent, and just increasing the px number from 20 to 30 or 40 isn't making any difference in the RT appearance!

[mouldera]

Worked great for me! Thanks for sharing the code! Love this community!

[bkucf]

Hello Gerol,

Regarding the code-snippet, not sure if I am doing this correctly.  It's not working for me.  This is for APA format in Canvas.  Thank you please help!

[Stef_retired]

 @bkucf , please copy and paste an example of the code you're using here so we can help you troubleshoot it.

[bkucf]

Hi Stephanie,

I figured it out, I used the code snippet <p style="margin-left: 30px; text-indent: -30px;">. but had to hit HTML first, drop the code in beside citations.  This was the first time doing this code snippet for me in Canvas for creating a hanging indent for my discussion board postings.  It worked great, just needed to know how to use it.

[Stef_retired]

Right,  @bkucf , that's the trick! Switching to the HTML Editor and judiciously employing code snippets will enhance the capability of the Rich Content Editor/HTML Editor combo.

You say this is the first time you've used a code snippet for hanging indents...? You might become as addicted to HTML as I have. :smileylaugh:

[G_Petruzella]

Hi  @bkucf ​​, looks like stefaniesanders​ has been there for ya! I have to agree - once you start seeing what's possible using HTML snippets, it's hard to stop... 😄 Happy snipping!

[bojanoa]

I found this website to be very helpful: moonflowerdragon: HTML code for hanging indents for APA style reference list 

[CindiKerns]

Thanks so much for sharing! 

[vjmiller1]

Is it possible to get some additional assistance with this? I entered the code as shown in the example and ended up with this: 

<p style="margin-left: 20px; text-indent: -20px;">Hipson, W. E. & Séguin, D. G. (2015). Is good fit related to good behaviour? Goodness of fit between daycare teacher-child relationships, temperament, and prosocial behavior. Early Child Development and Care, 186(5), 785-798. https://doi-org/10.1080/03004430.2015.1061518

<p style="margin-left: 20px; text-indent: -20px;">Smith, S. J. (2020). Windows into the history & philosophy of education. Kendall Hunt.

<p style="margin-left: 20px; text-indent: -20px;">Vaz, S., Wilson, N., Falkmer, M., Sim, A., Scott, ...https://doi-org//10.1371/journal.pone.0137002

What am I doing wrong?

[melissa_kamp]

Did you enter the code in the Rich Content Editor? Or in the HTML Editor? The code needs to be adjusted using the HTML editor as seen in the following snippet for this to work:

<p style="margin-left: 20px; text-indent: -20px;">Text or article reference goes here.</p>

So your adjusted code with references added would look like this:

<p style="margin-left: 20px; text-indent: -20px;">Hipson, W. E. &amp; S&eacute;guin, D. G. (2015). Is good fit related to good behaviour? Goodness of fit between daycare teacher-child relationships, temperament, and prosocial behavior.<span class="Apple-converted-space">&nbsp;</span><em><i>Early Child Development and Care, 186</i></em><span>(5), 785-798.</span><span class="Apple-converted-space">&nbsp;</span><span><u><a href="https://doi-org/10.1080/03004430.2015.1061518" target="_blank" rel="noopener">https://doi-org/10.1080/03004430.2015.1061518</a></u></span></p>
<p>&nbsp;</p>
<p style="margin-left: 20px; text-indent: -20px;">Smith, S. J. (2020).&nbsp;<em><i>Windows into the history &amp; philosophy of education</i></em>. Kendall Hunt.</p><p>&nbsp;</p>
<p style="margin-left: 20px; text-indent: -20px;">Vaz, S., Wilson, N., Falkmer, M., Sim, A., Scott, ...<span><a href="https://doi-org//10.1371/journal.pone.0137002" target="_blank" rel="noopener nofollow noopener noreferrer">https://doi-org//10.1371/journal.pone.0137002</a></span></p>

Hope this helps!

Melissa

[scombs426]

Looks like you missed closing the </p> paragraph code at the end.  But the previous comment still holds you should be in the HTML editing view. 

[Greg12]

Yeah -- thanks again Canvas.  Why have a button when you can just learn how to code.  I'm a teacher not a tech geek.

[madams6]

I use this all of the time from this page, thank you!