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

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?".

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.

Add A Custom Redirect, If You Change A Post URL

When you rename a blog, the most that you can do, to keep the old URL useful, is to setup a stub post , with a clickable link to the new URL. Yo! The blog is now at xxxxxxx.blogspot.com!! Blogger forbids gateway blogs, and similar blog to blog redirections . When you rename a post, you can setup a custom redirect - and automatically redirect your readers to the post, under its new URL. You should take advantage of this option, if you change a post URL.