the Librarian

Hanging Indent Citation on LibGuides

Why Use CSS to Create a Hanging Indent?

Taking a screenshot of the proper citation format is a no go. Students won't be able to copy and paste, but more importantly the screenshot won't be accessible: a screen reader wouldn't be able to translate what's happening in the screenshot to your vision impaired user.

Using CSS to style to hanging indent is a great idea because there's no misunderstanding about the formatting. That indent isn't optional when the student writes a paper, so we shouldn't consider it optional when we make a LibGuide.

Wrap the Citation in a Div Tag

There are two steps to making your citation appear on your LibGuide as a citation with a hanging indent. The first step is to type out your citation text and make sure it has div tags around it. Inside your first <div> tag, type class="cite" like the example below.

To access the HTML markup, you'll have to click </> html on your box instead of edit. It will look something like this:

<div class="cite"> Goya, Francisco. The Family of Charles IV. 1800, Museo del Prado, Madrid. Gardener's Art Through the Ages, 10th ed., by Richard G. Tansey and Fred S. Kleiner, Harcourt Brace, p. 939.</div>

Add Styles to the Page

The CSS below is what makes the magic happen. If you added the class="cite" to your div tag, you've got a hook for the styles to catch hold.

If you only need the hanging indent on this page, paste the snippet below before all the content in your box. You will have to click </> html again to access the markup of the box.

Adding the style tags inside the content box isn't the right way to do this and will show an error if you validate your page with the W3C validator, but it's functional and style interactions are unlikely.

<style> div#cite{ padding-left: 64px; text-indent: -60px;} </style>

Add Styles to the Entire Site

If you're the site admin for your LibGuides, you can make it easy to create a hanging indent on any guide. After you've added the site to the site-wide style tags, instruct librarians to add class="cite" inside the opening div tag like we've done above. This is the "right" way to do this and won't cause a validator error.

Copy the code below and paste it under Admin > Look & Feel then access the Custom JS/CSS tab. If you already have open and closing <style> tags on this tab, paste the code below in between those. If not, go ahead and use the snippet above that already has the opening and closing <style> tags.

div#cite{ padding-left: 64px; text-indent: -60px;}

Example

Here's what your indent will look like in real, selectable text on the guide. Students will be able to see the indent on any device as it will reflectively adjust to the margin.

Goya, Francisco. The Family of Charles IV. 1800, Museo del Prado, Madrid. Gardener's Art Through the Ages, 10th ed., by Richard G. Tansey and Fred S. Kleiner, Harcourt Brace, p. 939.

Here's an Example of the Hanging Indent on a Guide

We've used a background color and outline to further indicate that indent.

Graphic Novel LibGuide