WordPress.org

Ready to get started?Download WordPress

Forums

How to indent specific lines for poems? (17 posts)

  1. dtclarinet
    Member
    Posted 9 years ago #

    When I post poetry, I want to use several different, various indents for effect. How can I indicate this in the post tags? I tried just using the space bar, but it didn't show in the post.

  2. idbehold
    Member
    Posted 9 years ago #

     

     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

  3. Kafkaesqui

    Posted 9 years ago #

    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 &nbsp;'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;
    }

  4. Avenir
    Member
    Posted 9 years ago #

    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.

  5. rossz
    Member
    Posted 9 years ago #

    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.

  6. dtclarinet
    Member
    Posted 9 years ago #

    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

  7. vkaryl
    Member
    Posted 9 years ago #

    I use <pre> tags with things I've already composited in wordpad or notepad2. I occasionally still have to tweak with &nbsp;, 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.

  8. Kafkaesqui

    Posted 9 years ago #

    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.

  9. dtclarinet
    Member
    Posted 9 years ago #

    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?

  10. Kafkaesqui

    Posted 9 years ago #

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

  11. meganano
    Member
    Posted 8 years ago #

    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.

  12. vkaryl
    Member
    Posted 8 years ago #

    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.

  13. moshu
    Member
    Posted 8 years ago #

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

  14. logista
    Member
    Posted 8 years ago #

    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.

  15. meganano
    Member
    Posted 8 years ago #

    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

  16. meganano
    Member
    Posted 8 years ago #

    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.

  17. logista
    Member
    Posted 8 years ago #

    The easiest way to use the built-in stuff is to modify how you create the text in the first place.

    Replace all of the newline-tab sequences with newline-newline. This will put a blank line between every paragraph, which wordpress automatically recognizes as "hey, put <p>'s around this part. Alternately, you could add the <p></p>s yourself before you paste it into wordpress.

    Then, apply the style I mentioned to the .postcontent section of your stylesheet (or whatever you've called the bit on the template where your content gets put).

    Since each line of dialog will now be in it's own <p> markup, it will indent. If it is more than one line, only the first will indent. Same for the expository paragraphs.

    I don't think there is a way to go from wordprocessor style paragraphs to HTML style paragraphs without some sort of messing about.

    Hope this helps.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.