html / css for hanging indent (poetry)

  • badgerkin · Member ·

    The article in advanced html was partly helpful…but I wonder how I can make a hanging indent without using the ‘pre’ tag (I am not familiar with this ‘&’ approach) and instead using the ‘p style=…’ formatting

    The blog I need help with is: (visible only to logged in users)

  • kokkieh · Staff ·

    Hi there,

    You can do this using inline CSS.

    In the visual editor, type your text you want to display. Then switch to HTML mode.

    If your paragraph is not wrapped in p-tags, add those, and in the opening p-tag, add the following attribute:

    style="text-indent: 20px;

    You can adjust the value to make the indent bigger or smaller.

    You’ll need to add this for every paragraph that you want to be indented.

  • badgerkin · Member ·

    Hey kokkieh:
    The thing is this: in the “hanging indent” the whole paragraph is not indented, only the line(s) after the first line.
    So in my draft paragraph I have the 2 lines below, of which only the 2nd line needs to be indented:

    Truly, we live with mysteries too marvelous
    to be understood.

    So far I have: <p style=”margin-left:130px;”>Truly, we live with mysteries too marvelous
    to be understood.</p>

    Only “to be understood.” is to be indented.

    Doable?!

  • kokkieh · Staff ·

    The code I gave you is for indenting the first line in a multi-line paragraph, so if there aren’t any manual line breaks between lines.

    If you want to indent individual lines in a poem, the best way to do it is to use the pre-tag, and then use regular spaces to add the indentation. That’s what the pre-tag does – it preserves any spaces you add to a line so they don’t get stripped out automatically like normally happens with HTML.

  • badgerkin · Member ·

    Ah, “pre” for “preserve”!

    Thank-you for you patience.

    Ok, so in the article it says to use:

    &lt;pre&gt; …….. &lt;/pre&gt;

    So far I have:

    ” <p style=”margin-left:130px;”>Truly, we live with mysteries too marvelous
    to be understood.</p> ”

    The following doesn’t work:

    ” <p style=”margin-left:130px;”>Truly, we live with mysteries too marvelous
    &lt;pre&gt;to be understood.&lt;/pre&gt;</p> ”

    I don’t know how to put this together.

  • kokkieh · Staff ·

    Don’t use p at all.

    If you add this in the HTML view of the editor:

    <pre>Truly, we live with mysteries too marvelous
{space space space} to be understood</pre>

    It should add the indentation correctly to the second line.

  • badgerkin · Member ·

    Thanks. Ok, we’re getting closer to a solution!

    BUT 2 things:

    1. The indentation is now correct, but (in the Preview) the text appears in a blue-shaded box. Will this shaded box show when Published?

    2. The other crucial thing is that the entire text of the poem needs to margined 130px from left. Before using this preserve thing, I put each verse/paragraph into a <p style=”margin-left:130px;”> But if I now can’t use <p>, how can I shift the whole paragraph over 130 px?

  • badgerkin · Member ·

    1. The indentation is now correct, but (in the Preview) the text appears in a blue-shaded box. Will this shaded box show when Published?

    2. The other crucial thing is that the entire text of the poem still needs to margined 130px from left. Before using this preserve thing, I put each verse/paragraph into a <p style=”margin-left:130px;”> But if I now can’t use , how can I shift the whole paragraph over 130 px?

  • badgerkin · Member ·

    Ok, kokkiel.
    The problems mentioned above remain:

    1. The text paragraphs (verses) appear in strange blue-shaded boxes.

    2. I still don’t know how to move the entire entity (the whole poem) over 130 px so that it is centered horizontally on the page.
    Here are the first 2 verses of the published poem:

    Truly, we live with mysteries too marvelous
   to be understood.
    How grass can be nourishing in the
   mouths of the lambs.
  • supernovia · Staff ·

    Try the following:

    <pre style="background-color:transparent; margin-left:130px;">Truly, we live with mysteries too marvelous
   to be understood.</pre>

    Noting too: you don’t need to add the ending tag until you’ve finished the poem, since pre preserves your line breaks as well. :)

    Cheers!

  • supernovia · Staff ·

    One more note: should you ever get the CSS upgrade (available with Premium and up) you can create a class for all hanging-indented works like so:

    https://www.thesitewizard.com/css/hanging-indents.shtml

    And then you could format your poems like this:

    <p class="hangingindent">Line one<br>
Line two<br>
Line three</p>

    The advantage is if you decided to adjust all hanging indents, you could do it in one place.

    Hoping this helps. :)

  • badgerkin · Member ·

    Hey supernovia:

    That’s very helpful, thank-you. BUT what IS still strange is that the print style turns out differently! Part of the post comes in one style, other part, in another!
    https://wordpress.com/post/wordverseuniverse.wordpress.com/4374

    If you have an extra moment, could you also tell me why sometimes the ‘normal’ html style appears, like: <pre style=”
    and sometimes there’s the series of letters and symbols, like: <pre style="background-color:transparent; margin-left:130px;">

    Is one css and one html? What’s the difference?
    No rush with all this, I realize you’re busy.

    Thank-you for your patience.

  • kokkieh · Staff ·

    BUT what IS still strange is that the print style turns out differently! Part of the post comes in one style, other part, in another!

    Are you speaking of the font? That is intentional, yes, and how preformatted text works. Text inside a pre tag will always use a monospace font, and which font specifically depends on your browser. This is done so that spacing of text inside the pre tag will be uniform, i.e. so the space allocated to every letter, punctuation mark, and space, are exactly the same width.

    It is possible to force content inside a pre tag to use a different font, but that will require custom CSS.

    If you have an extra moment, could you also tell me why sometimes the ‘normal’ html style appears, like…

    I’m not sure what you mean by “normal html style”. And it looks like some of the code you pasted may have been stripped out. To post code here in the forums, click the code button, paste the code, then click that button again. That will allow us to see the actual code you’re posting.

    Is one css and one html?

    Technically all of this is HTML. p, pre, div, etc are known as HTML tags, that is, code that tells your browser what type of element it is, which in turn helps your browser know how that content should be displayed. So if something is wrapped in p tags, your browser knows it’s a paragraph, it will use the standard font, letter and line spacing for a paragraph, as specified in your theme. If something is wrapped in pre tags, the browser knows it’s preformatted text, so it should use a monospace font and not strip out extra spaces as it would normally do for any other text on the site.

    CSS lives in your theme, and contains instructions for how each of these elements should look. So it tells your browser if it sees a p tag, which font, colour, letter size, line spacing, etc. to use.

    The style bit you’ve been adding is known as an attribute. Attributes are added in HTML to give additional information regarding the particular tag. And style specifically can be used to insert CSS instructions directly into the HTML – known as inline CSS. So it’s a way to add CSS without editing your theme’s CSS, but it only works for some types of changes.

  • badgerkin · Member ·

    Huh. That’s so interesting. Thanks for this, hokkieh.
    The “not normal html style” that I referred to seems to appear mostly in the email notifications I get:
    For example (with spaces inserted between each so it doesn’t get altered before it gets to you!):

    & l t ; p class = & quot; hanging indent & quot; & g t ; Line one

    Does that look familiar?
    I don’t need to learn to write like that, do I?

  • staff-zinnia · Staff ·

    The “not normal html style” that I referred to seems to appear mostly in the email notifications I get:

    Could you grab a screen shot of what you’re seeing? Are these emails from WordPress.com?

    The screen shot can be linked here with a third party program like https://snag.gy/ Be careful though, do not include any personal details in that screen shot.

  • badgerkin · Member ·

    Oh yes, they are from you (I hope!). (I have a pretty old setup, though.)

    Here’s (my first ever!) snaggy link:

    Christine

  • supernovia · Staff ·

    Thanks, can you be sure you’re always entering HMTL with an HTML block, or in an HTML editor? This looks like it got mixed up between HTML and regular text.

  • supernovia · Staff ·

    Oh just noting too, I can’t see the link to your editor at https://wordpress.com/post/ … You’ll want to include a link to the post instead. Cheers!

  • badgerkin · Member ·

    Here’s one of the first messages I received on this thread:
    (sending via 3rd party!)

    Thanks…

  • supernovia · Staff ·

    Oh! These are screenshots of the email?

    Yeah you can ignore that likely. If you’ll visit the forum and copy the code, then paste it as HTML in your editor, you should be fine.

    The issue, by the way, is that if we typed “real” HTML, it would just get rendered here and in your email as an actual list, rather than the code for a list.

    Your email program isn’t expecting us to be sending code, so it’s changing it into those characters. Copy from here and you’ll be fine. :)

1 2
  • The topic ‘html / css for hanging indent (poetry)’ is closed to new replies.