Need help with line breaks for poetry…

  • Resolved iwoolman

    (@iwoolman)


    5 years, 2 months ago

    Thanks for taking a look. My goal is to create indented line breaks on mobile devices and narrow browser windows. So that when a line is too long for the device, and it breaks before the poet intended, there will be an indent to indicate that’s an unintended line break. This makes a difference in how the poem is read.

    The example below shows what I mean. On desktop, narrow the window and the automatic line breaks cause an indent of several characters, and where those breaks occur vary depending on the width of the window:

    Any help would be appreciated. Thanks for taking the time.

    Brian

    P.S. I don’t much care for the verse block. If the above cannot be accomplished, I would rather the page shrink on mobile devices to accommodate the original line breaks.

    • This topic was modified 5 years, 2 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Everything else WordPress topic

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • The site you want to emulate uses a separate <div> for each line, which is styled with {margin: 0 0 0 2em; text-indent: -2em;}. These are not “automatic line breaks”.
    Your site has a single <p> with <br> to break it up.

    You could use different HTML tags, and the other site’s styling.
    You could use {white-space: pre;} to make it respect the white space as entered, but this can cause overflow in a narrow window. You can style the overflow-x: auto so it has a scrollbar, or try the other values for white-space, but they don’t make it look like that other site.
    You could reduce the font size for narrow windows, but that makes it more difficult to read.

    Thread Starter iwoolman

    (@iwoolman)

    Hi, Joy. Thank you. This is great. Also a tad beyond me. I played with the <div> in the WordPress editor, enough to get a sense of it. But I’m not skilled enough to really apply it.

    I’d like to try to emulate that site, using the Adobe Caslon Pro font. If it’s simple for you, would you please tell me what style information to put into Additional CSS in the Customize part of WordPress? And if it’s not simple (and even if it is), please let me know if you’d be interested in doing this for hire.

    Thanks for sharing your expertise,

    Brian

    P.S. If making the font smaller for mobile is something that can be done in the Additional CSS feature, I’d like to look at that, too. Thanks again.

    • This reply was modified 5 years, 2 months ago by iwoolman.
    • This reply was modified 5 years, 2 months ago by iwoolman.
    • This reply was modified 5 years, 2 months ago by iwoolman.
    Thread Starter iwoolman

    (@iwoolman)

    Got it. I think. Thanks for the help.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Need help with line breaks for poetry…’ is closed to new replies.