Skip to main content

Indent Your Paragraphs

Personally, I don't care for indented paragraphs - though I know some who like this.

I think that justifying all lines in my posts, straight to the left margin, makes for a cleaner look. And, I separate each paragraph with hard line breaks, not "<p> ... </p>", which makes typing my posts faster - though that does complicate things a bit, by requiring that I use the "Convert line breaks" setting.

Not everybody agrees with my viewpoint, which is normal for the blogosphere. Some folks like indented paragraphs. And from them, we see the occasional query
I put blank spaces at the front of my paragraphs, and that looks fine in Preview mode. But the published blog shows no indents. Why?
And the immediate answer is
Preview mode, and the published blog, will always differ.

To properly indent your paragraphs, you first have to setup a CSS attribute for paragraph indentation, in the proper rule set.

Look in the HTML for your blog.
.post p {
margin:0 0 .75em;
line-height:1.6em;
}

and add a "text-indent" attribute.
.post p {
margin:0 0 .75em;
line-height:1.6em;
text-indent:4em;
}

Next, if you are using "Edit HTML" mode, each paragraph has to be explicitly defined. If you don't explicitly define a paragraph, the paragraph rule set has no effect. Of course, if you explicitly define paragraphs, and you do not add the CSS attribute, your paragraphs won't be indented either.

<p>Next, if you are using "Edit HTML" mode, each paragraph has to be explicitly defined. If you don't explicitly define a paragraph, the rule setup above has no effect.. Of course, if you explicitly define paragraphs, and you do not add the CSS rule, your paragraphs won't be indented either.</p>


Note that if you are examining the code behind the above example, you'll note that I had to cheat a bit, since I do not normally indent my paragraphs.

Another way to create indented paragraphs is to enclose each logical paragraph in "<div style="text-indent:4em;"> ... "</div>" tags. This lets you type paragraphs using hard line breaks, as I mentioned above. Of course, explicitly defining paragraphs that way will get monotonous after a while.

<div style="text-indent:4em;">Another way to create indented paragraphs is to enclose each logical paragraph in "<div style="text-indent:12px;">" ... "</div>" tags. This lets you type paragraphs using hard line breaks, as I mentioned above. Of course, explicitly defining paragraphs that way will get monotonous after a while.</div>


If you like, you can indent a negative amount. This will create a hanging indent effect. To see this effectively, we will have to insert a bit of "Lorem Ipsum" content, courtesy of WikiPedia. Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit amet, consectetur, adipisci[ng] velit, sed quia non numquam [do] eius modi tempora inci[di]dunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur? Do you see the extra attribute "padding-left:4em;"? You need that, to keep the first line from simply being chopped off at the left.


<div style="text-indent:-4em; padding-left:4em;">If you like, you can indent a negative amount. This will create a hanging indent effect. To see this effectively, we will have to insert a bit of "Lorem Ipsum" content, courtesy of WikiPedia. Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit amet, consectetur, adipisci[ng] velit, sed quia non numquam [do] eius modi tempora inci[di]dunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur? Do you see the extra attribute "padding-left:4em;"? You need that, to keep the first line from simply being chopped off at the left.</div>
That should suggest a few possibilities, anyway.

Comments

Unknown said…
I prefer justified as well ...I'm looking for a way to customize my comment pop-up window ....any suggestions?
I do not have this code in my blog template.

.post p {
margin:0 0 .75em;
line-height:1.6em;
}


So what should I do now ?
Nitecruzr said…
सौरभ,

Post your problem in GBH: Layouts & Templates, and state the details, such as blog URL.
Unknown said…
thnx... i got it... nw its working.....
Marti said…
Is there a way to automatically indent all existing paragraphs without having to add the "p" tags manually?
I have the exact opposite problem: I'd like the static page "tabs" under my header NOT to be indented!! Why is the Home tab 5px flush left and the rest of the wrapper isn't??

Help me please...

Popular posts from this blog

Adding A Link To Your Blog Post

Occasionally, you see a very odd, cryptic complaint I just added a link in my blog, but the link vanished! No, it wasn't your imagination.

Embedded Comments And Main Page View

The option to display comments, embedded below the post, was made a blog option relatively recently. This was a long requested feature - and many bloggers added it to their blogs, as soon as the option was presented to us. Some blog owners like this feature so much, that they request it to be visible when the blog is opened, in main page view. I would like all comments, and the comment form, to be shown underneath the relevant post, automatically, for everyone to read without clicking on the number of comments link. And this is not how embedded comments work.

What's The URL Of My Blog?

We see the plea for help, periodically I need the URL of my blog, so I can give it to my friends. Help! Who's buried in Grant's Tomb, after all? No Chuck, be polite. OK, OK. The title of this blog is "The Real Blogger Status", and the title of this post is "What's The URL Of My Blog?".