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.

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:

span {background: black;}
<h1>[COLOR="Red"]<span>[/COLOR]An example of padding wrapping onto 2 lines...[COLOR="Red"]</span>[/COLOR]</h1>

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.

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.

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.

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.

oh so you want:

–sample
text–

but you get

–sample
text

here the dashes represent the padding.

Nearly;

–sample line of–
–text–

is what I’m looking for.

and yep;

–sample line of
text–

is what i get

apply left and right padding in css?

You could get close by adding a few black borders. Only the right side still needs a bit of padding:

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

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.

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.

Hi,

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


<!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?

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

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.

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:


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

Yes I was hoping a JS expert would have popped in by now :slight_smile:

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?

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