One of my visitors told me that she wanted to place a particular poem on a web page. "For readability," she wrote, "I'd like to match the use of hanging indents found [in] my source." From the context of her question, I gather that she didn't actually mean "hanging indents" (which means a different thing), but that she wanted alternate lines of her poem to be indented.
This article assumes that you know some HTML and CSS. At the very least, you should know how to insert CSS rules and HTML code into your web page.
There are probably a zillion ways of indenting alternate lines. Here's one. I will use a stanza from Coleridge's The Rime of the Ancient Mariner as an example.
Water, water, every where,
And all the boards did shrink;
Water, water, every where,
Nor any drop to drink.
The CSS for the indented lines is as follows:
I used 20 pixels for the example, but feel free to change it to some other number if you think my indentation is too wide or narrow.
The HTML for the above poem uses a <span> with the "indented_line" class for every second line.
If you want the HTML source for your poem to be less cluttered, you can also do it the following way.
First, write the CSS for the indented lines.
The HTML for the poem can then be more concise.
The <p> tag for each stanza is now given the "poem" class, allowing us
to use <span> without specifying one.
The result is the same:
Day after day, day after day,
We stuck, nor breath nor motion;
As idle as a painted ship
Upon a painted ocean.
Although this method seems more elegant at the HTML level, and it saves you a few characters per line, it suffers from
the disadvantage that other instances of <span> that you place into your poem's paragraph
(for example, to change the size of a particular word or phrase) will also have 20 pixels of padding
to its left. (That said, it will only affect a <span> if it is an immediate child
of <p class="poem"> and not one that is embedded within other tags in the paragraph.)
If you didn't understand what I just said, and are worried that you may accidentally trigger this side effect, use the first method given in this article. It's straightforward, specific in what it targets, and easy to understand. Your poetry-loving visitors are not going to review your HTML code anyway, and even if they do, it's not like they will be deeply grateful to you for saving a few bytes.
If you don't have an easy way to
insert CSS rules
into your style sheet (for example, your site is a
blog of some sort, hosted
on a platform that doesn't give you a way to add said rules), one way is set the padding directly in the
<span> tag for each line.
That is, your code will look something like this:
The disadvantage of this method is that if you ever want to change the amount of indentation,
you will have to go through every <span> tag and change the number to
something else. Contrast this with the first method above, where you only need to change it in one place: the CSS code.
Another method is to manually insert spaces into the lines you want indented. You
will have to use " " (without the quotation marks) for each space. If you
directly type spaces with your keyboard, web browsers (by design) will automatically replace multiple spaces
with a single one, defeating your attempt. An indented line, with four spaces at its head, will thus
look like this:
This method is inferior even to directly putting the style rule in the <span> tag,
since multiple instances of " " are very messy and hard to count, and
if you ever want to increase or decrease the indentation, you will have to manually go through every
affected line to add or delete them.
If you are confused by the plethora of choices given above, and can't decide which method to use, just
use the first one given in this article. If your web editing system does not allow you to add CSS rules
to your style sheet, use the "<span style="padding-left: 20px">" method. Otherwise,
choose whichever one you want, bearing in mind its disadvantages, if any.
Copyright © 2019 Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
How to Indent Alternate Lines with HTML/CSS
