SitePoint Sponsor

User Tag List

Results 1 to 22 of 22
  1. #1
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,338
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Is it possible to indent a line that wraps?

    I'm creating pages of hymns. Some lines of the stanzas are flush-left, while others are indented.

    Code:
    <p>First line of the stanza is flush left
    <br><span style="padding-left:1em">second line of the stanza is indented</span>
    <br>third line of the stanza is flush left
    <br><span style="padding-left:1em">fourth line of the stanza is indented</span></p>
    However, some lines are long and wrap around. In that case, the line that wraps starts under where it began, either flush left or indented. What I'd like to do is make all wrapped lines indent 1.5em. Is this possible via CSS?

    Thanks,
    Steve
    Last edited by StevenHu; Apr 8, 2010 at 15:12. Reason: Added </span> tags

  2. #2
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    I'd use the pre element for that as you're looking to preformat your text.

    Code HTML4Strict:
    <pre>
        First line of the stanza is flush left
            second line of the stanza is indented
            third line of the stanza is indented
    </pre>
    Maleika E. A. | Rockatee | Twitter | Dribbble



  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, I'm not quite sure on the best possible way to do this, although wrapping each indented line with a <span> or something, and given a left padding should achieve the ersults (only wrap the lines with the indent around with <span>s I mean )
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  4. #4
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,338
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kohoutek View Post
    I'd use the pre element for that as you're looking to preformat your text.

    Code HTML4Strict:
    <pre>
        First line of the stanza is flush left
            second line of the stanza is indented
            third line of the stanza is indented
    </pre>
    This still wraps the lines to their starting point rather than indenting them 1.5em wrapped lines to the left.

    Thanks,
    Steve

  5. #5
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,338
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Hi, I'm not quite sure on the best possible way to do this, although wrapping each indented line with a <span> or something, and given a left padding should achieve the ersults (only wrap the lines with the indent around with <span>s I mean )
    I think you are suggesting I manually wrap each line. No, not practical. I'm doing this in the iPhone with the ability for the user to change font size.

    Thanks,
    Steve

  6. #6
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by StevenHu View Post
    This still wraps the lines to their starting point rather than indenting them 1.5em wrapped lines to the left.

    Thanks,
    Steve
    That's how the pre element works. You "preformat" the text and indent them by using tabs or spaces. It doesn't indent itself automatically but exactly how you indent your text in the HTML document.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  7. #7
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Here's the example with the pre element: http://rockatee.com/temp/stanza.html
    Maleika E. A. | Rockatee | Twitter | Dribbble



  8. #8
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,338
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    OK, I see how to do it. Indent everything leftward in a div, then individually indent each line to the right. The wrapped lines wrap to the div:

    Code:
    <div style="margin-left:2em">
    <p>
    
    <span style="margin-left:-1.5em">FIRST line of the stanza is flush left First line of the stanza is flush left First line of the stanza is flush left First line of the stanza is flush left 
    </span>
    <br><span style="margin-left:-1em">SECOND line of the stanza is indentedFirst line of the stanza is flush left First line of the stanza is flush left First line of the stanza is flush left First line of the stanza is flush left 
    </span>
    <br><span style="margin-left:-1.5em">THIRD line of the stanza is flush left
    </span>
    <br><span style="margin-left:-1em">FOURTH line of the stanza is indentedFirst line of the stanza is flush left First line of the stanza is flush left First line of the stanza is flush left First line of the stan
    </span>
    
    </p>
    </div>
    Solved! Thanks for being my sounding-board!

    Steve

  9. #9
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,338
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kohoutek View Post
    Here's the example with the pre element: http://rockatee.com/temp/stanza.html
    This is for fixed-width fonts, I think. Very ugly for hymns!

    Regards,
    Steve

  10. #10
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by StevenHu View Post
    This is for fixed-width fonts, I think. Very ugly for hymns!

    Regards,
    Steve
    No, you can specify which font you want to use. It's clean and semantically sound.

    Code CSS:
    pre {font-family: Georgia, sans-serif;}

    View
    Maleika E. A. | Rockatee | Twitter | Dribbble



  11. #11
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,338
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the education, kahoutek! Another hole in my eddicashun filled!

    Regards,
    Steve

  12. #12
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Basically the PRE element contains preformatted text. Visual browsers should render preformatted text in a fixed-pitch font, should not collapse whitespace, and shouldn't wrap long lines.

    Obviously you can style it but the reason it is preferred as fixed-pitch; is so it preserves and clearly displays any pre-formatted text and whitespace values.

  13. #13
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,338
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    xhtmlcoder,

    That makes it unsuitable for my case, because I can't tell where the line will wrap. The user will be able to change the text size at will. Thanks for the clarification.

    Steve

  14. #14
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ...can't tell where the line will wrap. The user will be able to change the text size at will.
    Wrap every pair of lines in a paragraph and use left padding for the second line(s) and pull the first flush left with a negative indent:
    Code:
    p{
      padding-left:2em;
      text-indent:-2em;
    }
    Code:
    <p>First line of the stanza is flush left.
    <br>Second line of the stanza is indented, and also next line if it wraps.</p>
    <p>Third line of the stanza is flush left.
    <br>Fourth line of the stanza is indented.</p>
    Happy ADD/ADHD with Asperger's

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I would do something similar like this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style>
    p {
        margin:0 0 1em 2em
    }
    span {
        display:block;
        text-indent:-1.5em;
        margin:0 0 1em
    }
    span.even {
        margin-left:1em
    }
    </style>
    </head>
    <body>
    <p>
        <span>FIRST line of the stanza is flush left First line of the stanza is flush left First line of the stanza is flush left First line of the stanza is flush left </span> 
        <span class="even">SECOND line of the stanza is indentedFirst line of the stanza is flush left First line of the stanza is flush left First line of the stanza is flush left First line of the stanza is flush left </span> 
        <span>THIRD line of the stanza is flush left </span> 
        <span class="even">FOURTH line of the stanza is indentedFirst line of the stanza is flush left First line of the stanza is flush left First line of the stanza is flush left First line of the stan FOURTH line of the stanza is indentedFirst line of the stanza is flush left First line of the stanza is flush left First line of the stanza is flush left First line of the stan FOURTH line of the stanza is indentedFirst line of the stanza is flush left First line of the stanza is flush left First line of the stanza is flush left First line of the stan</span> 
        <span>FIFTH line of the stanza is indentedFirst line of the stanza is flush left First line of the stanza is flush left First line of the stanza is flush left First line of the stan</span>
    </p>
    </div>
    </body>
    </html>

  16. #16
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,338
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Before we go any further, I need to tell you something. This will be used on the iPhone. When the user clicks on the email icon, the hymn will be placed in the message box of the email programmatically. Unfortunately, CSS is not ported over. I need <br> next to each line and in the space between stanzas. Then they are spaced correctly. My post #8 satisfies this requirement.

    Thanks!

  17. #17
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm glad you told it will be used in an email and also work in an iPhone. I assume the inline css will be ported. Still I think it should be done with less code.

    Now assuming also the first line could wrap but stay flushed left, which outrules the text-indent; The styled second spans could be replaced by a left margin on the container and a block display on the first spans, and any extra spacing breaks by a bottom margin on the container. Obviously you could loose either the div or the p tag too by the resulting margins on either.

    From your code-example in post #8:
    Code:
    <<div style="margin-left:2em">
    <p style="margin:0 0 1em -1em">
    <span style="display:block; margin-left:-.5em">FIRST line of the stanza is flush left First line of the stanza is flush left First line of the stanza is flush left First line of the stanza is flush left
    </span>
    SECOND line of the stanza is indented
    <span style="display:block; margin-left:-.5em">THIRD line of the stanza is flush left
    </span>
    FOURTH line of the stanza is indentedFirst line of the stanza is flush left First line of the stanza is flush left First line of the stanza is flush left First line of the stan
    </p>
    </div>
    That would save some bytes. And we are happy to be the sounding board.
    Happy ADD/ADHD with Asperger's

  18. #18
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,338
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Erik J,

    Thanks for your contribution, but it will not do. The OP was about making the wrapped line indented further in, and your code indents the wrapped line at the same indent as where it started (the line above). My code wraps the wrapped line further right than the previous line.

    Regards,
    Steve

  19. #19
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Ok, you prolly got an answer already.. BUT what if for the sake of ease of update you did this :


    .stanza span:first-child{text-indent:-2em;}
    .stanza span{display:block}
    .stanza br{display:none}
    .stanza{margin-left:2em}/*use a margin left IF YOU dont want the text to break out of the paragraph box}



    <p class="stanza">
    <span> Your first line of verse. it wont matter if it wraps</span></br>
    <span>the edge and position of the the verse</span></br>
    <span>Will be controlled by the class: stanza</span></br>
    <span>btw, the display:none for the BRs is in case is in a browser thats not getting CSS</span>
    </p>

  20. #20
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Well not to be nitpicky, but you do <br>'s wrong, instead of <span> couldn't you have just done a block element instead? And finally, the :first-child isn't supported in IE6/7 and finally, you'd only be able to select the first line in that case (although iuf you used nth-child it'd be possible, though highly inflexible due to you'd have to update the CSS to make sure each line got indented correctly.

    Not to sound rude though . Don't take it wrong.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  21. #21
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Ryan is right.

    the SAFEST WAY would have been to use a class. Though it's a pain to have to add that mark up. Still, for the sake of IE.

    .stanza .first{text-indent:-2em;}
    .stanza span{display:block}
    .stanza br{display:none}
    .stanza{margin-left:2em}/*use a margin left IF YOU dont want the text to break out of the paragraph box}



    <p class="stanza">
    <span class="first"> Your first line of verse. it wont matter if it wraps</span><br>
    <span>the edge and position of the the verse</span><br>
    <span>Will be controlled by the class: stanza</span><br>
    <span>btw, the display:none for the BRs is in case is in a browser thats not getting CSS</span>
    </p>

    I dunno if a block element would have been semantically correct here.

  22. #22
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,338
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help, guys. Since this is used in the iPhone, the only browser I need to worry about is Safari.

    I have yet to see code that beats post #8. The wrapped lines are indented further than the start of the indented line, which is what I was looking for.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •