How to indent specific lines for poems?

 

 That will make a single space indent
unlike this
   and like this.

too bad they are so small, you will have to use a lot

There’s a number of ways to go about this. One is to place each line in a div that specifies a class for indent type (which in your css uses either the margin or padding property to define the indent); you’d need to set up a css class for each level of indent. Another way to go about this is to use:

 

^ This is the html character entity for a space (non-breaking space, actually). Inserting it before a line of text will indent the line one space. Inserting multiple   gives you

    Something (4  )
        Like (8  )
            This (12  )

Admittedly this makes composing a post (or poem, or whatever) pretty ugly, but that’s HTML.

What I’d recommend is using the pre tag for your poems along with a css class:

<pre class="poem">
Beans, beans,
    The magical fruit.
The more you eat,
        The more you toot.
</pre>

(This example cheats by using  ’s, since we can’t use pre tags on the forum.)

This by default will display the text in a fixed-font (such as courier), but you can change that through your stylesheet, like so:

pre.poem {
font-family: Georgia, san-serif;
}

You could just use the <blockquote></blockquote> tag. Most themes have this set with some special styling (usually a border on one side and sometimes all around), so you might want to add a class to that tag.

Maybe use <blockquote class="poem"> and then add to your CSS at the bottom of the file:

.poem {
border: 0;
padding: 0;
margin-left: 10px;
}

That’ll make any text block you surround with <blockquote class="poem"> and </blockquote> have a left margin of 10px. You can change that value if you want a bigger or smaller left margin.

Add this to your style sheet:

.poem p {
text-indent: 3em;
}

Then wrap your poem with <div class=’poem’> This will automatically indent just the first line of each paragraph. One oddity. You need a blank line after the ‘div’, otherwise the first paragraph won’t indent (I guess it’s a minor bug in wordpress when it adds paragraph tags.

Of course, you can add additonal formatting commands if desired, e.g. line spacing, font, margins, etc.

Wow, thanks for the various feedback and suggestions.

However, I sounds like setting up a css rule, whether it’s for pre, div or blockquote, makes a rule that is preset. I indent in different ways for each poem, with lots of variation. So the css has to be set up for each poem, which seems like a hassle. Please advise if this assumption is wrong. (that each poems style rules would have to be new…)

I guess using lots of  s is my answer.

Thanks,
David

I use <pre> tags with things I’ve already composited in wordpad or notepad2. I occasionally still have to tweak with  , but not to the extent of having to use dozens of them. Using <pre> tags means that you really only need to style a “block” of “poem space” and use that in the div. F’rinstance, I have an id “poemblock” which has a 1 px solid border plus the main “look” – font-family, size, variant etc. and padding for neg space; then I insert the <pre> tagset and copy the formatted poetry in between. Usually works pretty well.

I’m of a mind that your best option is to make use of the <pre> tag, since it retains any positional layout of your text. The css margin and padding properties when used for pre specify the surrounding space of the tag and the content as a whole. But if you inserted 8 spaces at the start of one line, <pre> will retain those 8 spaces. And so on.

I understand. Questions to clarify: If I do nothing to the style sheet, will the pre tag still work? Then, the minimum to match fonts with the blog would be to set the font as suggested? And if I want I can add other variable to the style of this particular tag?

“If I do nothing to the style sheet, will the pre tag still work?”

In a word: Yes.

In a few more, with no css attached to it, a default format for the <pre> tag is preformatted text in a fixed-size font. You can modify some elements of it such as font-family, size, colors, etc., but the issue of spacing can only be tweaked, not removed (well, not without some very serious effort).

This looks like the closest thread to what I’ve been researching. I’m publishign a blog of a fiction project, meaning that I want to have standard literary style paragraph formatting- you know, an indent for the first line of a paragraph, an indent for dialouge and no line breaks between paragraphs. This seems hard to replicate with HTML.

Using the ‘<pre>’ tag seems like a cool solution except that if you don’t have line breaks, the code just goes off the page. Is there a way to create a CSS style for a pre tag that would still flow the text within the post area?

Has anyone else solved for this problem within wordpress? I’ve solved for it easily in regular HTML pages but this one has stumped me.

You’ll just need to be very specific about the cascade in your css. You’ll need a style for “first” (the first sentence of a paragraph) that does the indent; you’ll need a specific paragraph style for “content p” or “post p” or whatever your enclosing container is called (plus the “p” for the paragraph) which sets “margin:0; padding:0;” so you get no “breaks”.

It’s probably not impossible, but may take some tweak-time. Start with it, and if you get stuck, post back.

and no line breaks between paragraphs

Don’t forget this a different medium – fiction or not. Your readers will hate you for that: the human eyes reacts differently to the paper print and the screen…

I have done something like this before (Not in WordPress):
p {text-align: justify; margin:0em; text-indent:1em;}

but you should be able to set a div or something for the text you want presented in this way.

Yeah… I’ve already done the text-indent thing, which works fine for the first line of a paragraph. But when it’s just a new line with a tab (from my wordprocessing program) with not even a <br> tag, it doesn’t quite register.

Also, Vkaryl, I’m kind of unclear how to tweak the tag the way you’ve suggested. I mean, I know how to set styles for it in my stylesheet, but could you clarify the best way to kill the space that occurs between paragraphs? I always get confused about margin and padding, and I thought that was for space surrounding the magical paragraph block.

Thanks!
-M

Mmm.. also, I kind of want to avoid inserting <div> tags in the text. I mean, this is eventually going to be pages and pages of text. If I have to go through and inset div tags for every time a conversation pops up, that’s more HTML editing than I want to do. I’m looking for something that applies to the block of text, or everything in the post content area that would you know… magically fix it all for me!

In otherwords, I’d rather do more coding in the stylesheet, than have to do lots of coding in every post to get the layout right.