Sunday, April 19, 2009

Indent Your Paragraphs

Personally, I don't care for indented paragraphs. I think that justifying all lines in my posts straight to the left margin makes for a cleaner look, in my posts. 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>


>> Top

6 comments:

...love Maegan said...

I prefer justified as well ...I'm looking for a way to customize my comment pop-up window ....any suggestions?

सौरभ said...

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 ?

Chuck said...

सौरभ,

Post your problem in GBH: Layouts & Templates, and state the details, such as blog URL.

Muhammad Behzad Akhtar said...

thnx... i got it... nw its working.....

Martí said...

Is there a way to automatically indent all existing paragraphs without having to add the "p" tags manually?

Eleonora said...

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