SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 30
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2011
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Line wrap padding with js

    I'll try to explain as best I can, I wasn't able to find anything relevant on this on my searches so I'm guessing it isn't a commonly needed requirement... here goes:

    For the design of a website I've made all H1's (and a class for any others that require this look) and sub navs have a background colour of black.

    This is fine, the 'problem' comes when a line of text is longer than the space it is contained within (this bit also fine), when the line wraps, the last letter/word of the first line and first letter/word of the second line don't respect the padding applied to it's tag (h1, li, a etc.)

    I have a css solution but I am unable to use it due to it's infeasibility, so I am looking for a js solution.

    Here is an example of what I'm looking to achieve:
    http://www.metagrafik.co.uk/example/padding.html

    But I need to somehow detect with js the last letter of the first line and the first of the last and then use that to apply a class to each of the offending letters.

    Thanks for looking all help is appreciated.

    I must ad also I am quite new to js (but it is a personal mission to learn) and I promise to try to understand any code provided and not just copy/pasta.

    Thanks again.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Hmm, using JS for this is like hammering a small nail with a sledgehammer. This is really a job for CSS, IMHO.

    Of course, removing the display: inline on the H1 fixes it, but I presume you want the black background to be "inline", rather than color the whole block.

    In that case, you could just do this:

    Code:
    span {background: black;}
    Code:
    <h1><span>An example of padding wrapping onto 2 lines...</span></h1>

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2011
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the quick reply ralph, but unfortunately, as expected, span is still and in-line element and therefore wraps exactly the same as h1's, li's and a's, still not respecting padding across all lines but only the beginning and end of it's containing tag.

    Correct also I don't want the effect that 'display:block;' gives, instead only text having a bg colour and not the whole square space the tags actually uses.
    This is why I came to the conclusion I'd require js for this small but useful (for me) task.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Yes, sorry, when I looked at it again I realized I had missed that criterion. I still suspect there's a clean CSS option, but will have to consider it a bit more.

  5. #5
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    If you want it to do all lines, why not do some sort of container?

    for only some of the text, you will need a <span> then.
    Ryan B | My Blog | Twitter

  6. #6
    SitePoint Enthusiast
    Join Date
    Feb 2011
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi rguy, The problem with a container is that I'd need to know where/when the line will wrap, this in it's self is a long task having to find all instances throughout the site and also unfortunately in this case a lot of the elements I require this to work on will be generated by what a client enters into the heading field and I'm unable to teach everyone that is going to use this how to write html just to keep the design consistent.

  7. #7
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    oh so you want:
    --sample
    text--
    but you get
    --sample
    text
    here the dashes represent the padding.
    Ryan B | My Blog | Twitter

  8. #8
    SitePoint Enthusiast
    Join Date
    Feb 2011
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nearly;

    --sample line of--
    --text--
    is what I'm looking for.

    and yep;

    --sample line of
    text--
    is what i get

  9. #9
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    apply left and right padding in css?
    Ryan B | My Blog | Twitter

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    You could get close by adding a few black borders. Only the right side still needs a bit of padding:

    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>Line wrap padding</title>
    <style type="text/css">
    #content-main{width:590px; margin:0 auto;}
    .block-black, #content-main h1 {
     color:#fff; 
     font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; 
     font-weight: normal; 
     letter-spacing:-0.04em; 
     line-height:1.4em; 
     position:relative;
      border-left: 7px solid black;overflow:hidden;
    }
    span {background:black;display: inline;border-right: 7px solid black;}
    
    </style>
    </head>
    
    <body>
    <div id="content-main">
    
    <h1><span>An example of padding wrapping onto 2 lines...</span></h1> 
    
    </div>
    </body>
    </html>

  11. #11
    SitePoint Enthusiast
    Join Date
    Feb 2011
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    rguy, this is the problem, I've applied the padding I'd like but because I'd like this to display in-line with a black background and not as a large square with text inside it, I've used 'display:in-line'. Unfortunately css seems to render the padding only at the beginning and end of the in-line element. While this does make sense technically, it proves to be a nuisance aesthetically.

    I really have tried all the possibilities I know of with CSS, and I have a found a solution, But as stated this isn't really a feasible solution given the scale of what I require from it.
    (please see 2nd example on the page in the link)

    All I need is some way to detect, with javascript, the point where an in-line line of text wraps.
    I'm presuming this is possible, as for the text to wrap to the second line, something must be understanding that the text cannot fit inside the width it's been given to display in and, from there, know that the word that caused the wrap is too long to stay on the same line. Then once this is established, wrap that word (or the last letter of it) with a span class of left-padding and the last letter of the word before it with a span class of right-padding, as the second example on the linked page displays.


    Thanks again.

  12. #12
    SitePoint Enthusiast
    Join Date
    Feb 2011
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    You could get close by adding a few black borders. Only the right side still needs a bit of padding:

    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>Line wrap padding</title>
    <style type="text/css">
    #content-main{width:590px; margin:0 auto;}
    .block-black, #content-main h1 {
     color:#fff; 
     font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; 
     font-weight: normal; 
     letter-spacing:-0.04em; 
     line-height:1.4em; 
     position:relative;
      border-left: 7px solid black;overflow:hidden;
    }
    span {background:black;display: inline;border-right: 7px solid black;}
    
    </style>
    </head>
    
    <body>
    <div id="content-main">
    
    <h1><span>An example of padding wrapping onto 2 lines...</span></h1> 
    
    </div>
    </body>
    </html>
    Thanks again, but again this is inline so 'left and 'right' rules still only apply the the beginning and end of the in-line element. I really think this is something for js as I need to modify the DOM after the page has rendered. as depending on browser/users font size/ etc etc the end of the line will be different for a number of users.

    Added border example also.

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I may be missing the blindingly obvious but surely floating or inline-block would achieve this automatically.

    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 type="text/css">
    .linewrap {
        display:inline-block;
        padding:0 5px 0 15px;
        background:black;
        color:#fff;
    }
    * html .linewrap {display:inline}
    *+html .linewrap {display:inline}
    </style>
    </head>
    <body>
    <h1 class="linewrap">This is some text that will wrap where needed</h1>
    </body>
    </html>
    Or did I miss something important?

  14. #14
    SitePoint Enthusiast
    Join Date
    Feb 2011
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks paul. Tthis does work, but yeah, missed the bit of not wanting a black square with text in :s. I just want the black to appear where the text is and not contain it.

    Example added

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Ah yes I did miss something

    You wanted half a black line when it wraps. We've had that question before. Hold on a minute.

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hmm, I couldn't find the thread but I remember this from a few months ago and there were a few variations. I'll see if I can find the thread when I have more time. I believe the solution was based on borders and some relative positioning and went something 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 type="text/css">
    .linewrap {
      border-left:20px solid #000;
        line-height:36px;
    }
    .linewrap span{background:#000;color:#fff;position:relative;}
    .linewrap span span{left:-10px;}
    </style>
    </head>
    <body>
    <h1 class="linewrap"><span><span>This is some text that will wrap where needed</span></span></h1>
    </body>
    </html>
    That seems to do what you want but you lose the gap on the right in IE6 and 7 (other browsers are ok though).

  17. #17
    SitePoint Enthusiast
    Join Date
    Feb 2011
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Quote Originally Posted by Paul O'B View Post
    Hmm, I couldn't find the thread but I remember this from a few months ago and there were a few variations. I'll see if I can find the thread when I have more time. I believe the solution was based on borders and some relative positioning and went something 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 type="text/css">
    .linewrap {
      border-left:20px solid #000;
        line-height:36px;
    }
    .linewrap span{background:#000;color:#fff;position:relative;}
    .linewrap span span{left:-10px;}
    </style>
    </head>
    <body>
    <h1 class="linewrap"><span><span>This is some text that will wrap where needed</span></span></h1>
    </body>
    </html>
    That seems to do what you want but you lose the gap on the right in IE6 and 7 (other browsers are ok though).
    This works! Thank you!

    Although I may still need a js solution if there are too many html elements to apply this too.
    And would prefer one if someone could help this way I won't have to re-program my CMS

    Also I'm not fussed about IE7 and below.

    Thanks, again.

  18. #18
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Yes I was hoping a JS expert would have popped in by now

  19. #19
    SitePoint Enthusiast
    Join Date
    Feb 2011
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Any JS pros able to help me determine the last letter of a line and first letter of every line from the second line and post-apply some html to it please?

  20. #20
    SitePoint Enthusiast
    Join Date
    Feb 2011
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've still not been able to work out or find a feasible solution for this. anymore help would really be appreciated.

    Thanks.

    Basically,

    I need to define the last character of everyline that isn't the last.
    (at most it'll be 3 lines if it's easier to script per line than an array).
    and then the first letter on every line that isn't the first [line].
    (again 3 would be fine).

  21. #21
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I'm not sure a javascript solution is going to be very usable (but I may be wrong) . You would have to tie it to the resize event and that will make the page a bit choppy when resized. Hopefully some one will come along with some suitable JS soon though.

    I had another think and the nearest I could get to it without adding extra mark-up is as follows.

    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 type="text/css">
    .linewrap {
        padding:0 10px 0 10px;
        line-height:36px;
        background:#000;
        color:#fff;
        float:left;
        overflow:hidden;
        position:relative;
    }
    .linewrap:after {
        content:"x";
        float:right;
        background:#fff;
        color:#fff;
        left:auto;
        margin-left:10px;
        position:absolute;
        width:999em
    }
    </style>
    </head>
    <body>
    <h1 class="linewrap">This is some text that will wrap to another line where needed with any luck</h1>
    </html>
    I just made it a floated element and then rubbed out the black background using a white background on the pseudo :after class. It works except that you will always get an overhang space on the right where the text on the line above was before it wrapped.

  22. #22
    SitePoint Enthusiast
    Join Date
    Feb 2011
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again, unfortunatly though in this case the text is on a slightly transparent background with an image behind it so i'm not really able to use a 'canceling out' color

  23. #23
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Oh well at least I tried

    Where are the JS experts when you want them

  24. #24
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Ok,

    With the help of Erik J we have a solution that works without extra markup in ie8 and other modern browsers (not ie7 and under).

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    div {
        position:relative;
        background:#ffc;
        font:bold 100%/1.3 arial;
        overflow:hidden;
    }
    .linewrap {
        float:left;
        position:relative;
        z-index:1;
        padding:0 10px 0 10px;
        color:#fff;
        overflow:hidden;
        line-height:1.3em;
        text-align:justify;
    }
    .linewrap:before {/*supplies background colour for all but the last line*/
        position:absolute;
        z-index:-2;
        top:0;
        right:0;
        bottom:1.3em;/* matches the line-height setting to avoid the last line*/
        left:0;
        width:999em;
        background:#000;
        content:"\A0";/* non breaking space*/
    }
    .linewrap:after {/*supplies background colour for the wrapped text only*/
        content:"\A0";
        position:absolute;
        color:#fff;
        width:999em;
        padding:0 0 0 10px;
        background:#000;
        margin-left:-999em;
        z-index:-1;
       bottom:0;
    }
    </style>
    </head>
    <body>
    <div>
        <h1 class="linewrap">This is some text that will wrap to another line where needed with any luck</h1>
    </div>
    </body>
    </html>
    The div wrapper is not needed and is just there for the demo to show the underlying background is still visible.

    Whew! (Thanks to Erik for the additional fix to make this work properly)
    Last edited by Paul O'B; Feb 13, 2011 at 06:41. Reason: added Eriks suggestion of bottom:0 to last rule.

  25. #25
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Whew! (Thanks to Erik for the additional fix to make this work properly)
    You guys are too damned clever! That's amazing.


Tags for this Thread

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
  •