How to Indent Alternate Lines with HTML/CSS

Indenting every second line using CSS


How to Indent Alternate Lines with HTML/CSS

by Christopher Heng, thesitewizard.com

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.

Prerequisites

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.

An Easy-to-Understand CSS Method

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:

span.indented_line { padding-left: 20px ; }

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.

<p>
Water, water, every where,<br>
<span class="indented_line">And all the boards did shrink;</span><br>
Water, water, every where,<br>
<span class="indented_line">Nor any drop to drink.</span>
</p>

A Slightly More Concise Method

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.

p.poem > span { padding-left: 20px ; }

The HTML for the poem can then be more concise.

<p class="poem">
Day after day, day after day,<br>
<span>We stuck, nor breath nor motion;</span><br>
As idle as a painted ship<br>
<span>Upon a painted ocean.</span>
</p>

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.

For Those With No Access to The Style Sheet

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:

<p>
Water, water, every where,<br>
<span style="padding-left: 20px;">And all the boards did shrink;</span><br>
Water, water, every where,<br>
<span style="padding-left: 20px;">Nor any drop to drink.</span>
</p>

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 "&nbsp;" (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:

&nbsp;&nbsp;&nbsp;&nbsp;And all the boards did shrink;<br>

This method is inferior even to directly putting the style rule in the <span> tag, since multiple instances of "&nbsp;" 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.

Which Method Should I Use?

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/.

thesitewizard™ News Feed (RSS Site Feed)  Subscribe to thesitewizard.com newsfeed

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.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.

Related Articles

New Articles

Popular Articles

How to Link to This Page

It will appear on your page as:

How to Indent Alternate Lines with HTML/CSS





Home
Donate
Contact
Link to Us
No Spam Policy
Privacy Policy
Topics
Site Map

Getting Started
Web Design
Search Engines
Revenue Making
Domains
Web Hosting
Blogging
JavaScripts
PHP
Perl / CGI
HTML
CSS
.htaccess / Apache
Newsletters
General
Seasonal
Reviews
FAQs
Wizards

 

 
Free webmasters and programmers resources, scripts and tutorials
 
HowtoHaven.com: Free How-To Guides
 
Site Design Tips at thesitewizard.com
Find this site useful?
Please link to us.