Can I access lines of text?

[]|V|[agnus]

This client has a table of products. The table rows alternate colors for increased usability. The insane client has requested that any text of the product names/descriptions that wraps to more than one line be indented.

My colleague working on the site asked if there was a way to achieve this using CSS. For some reason I thought I'd heard of CSS pseudo-classes for accessing lines of text, but can't find any information. Regardless, we know IE won't support it. Thinking a little more, I reckoned one could float a spacer GIF (I know, I know!) at the beginning of any offending paragraphs and give it a top margin equal to the text line-height. This might work, but my coworker and I agreed it to be an unreasonable solution.

I recalled just now, however, how certain programming/scripting languages like PHP can access specific lines of text, say, in a textarea. Can JS do any similar accessing of lines of text, and if so could those methods be applied to text within' table cells like in the example here to achieve the desired effect? I am guessing not since each line of text is not an element with its own style properties like margins, but just out of curiosity...

Again, it's not a very reasonable request on the client's part, but worth looking into if you're insane like me...

[jamescover]

any text of the product names/descriptions that wraps to more than one line be indented.


I'm assuming the markup for the descriptions are being created dynamically, but what language are you using to do this?


-james

[Willy Duitt]

I suppose the complexity would depend if the layout was fluid or using fixed data cells width and if the font size was using a fixed pixel or em....

I suppose you could check the string length*font-size and if more than the data cell width to add text-indent to the style of the enclosing span...

.....Willy

BTW: I often do something like this for paragraph blocks...


<div style="width:550px">
<span style="float: left;font-size: 1.7em;padding: 0 0.15em;margin: 0 0.15em -0.5em 0;color: #b22222;background: #90ee90;border: 3px outset #2e8b57;">L</span><span style="font-size:16px;">orem ipsum dolor sit amet, consectetuer adipiscing elit. Nam ut ipsum. Donec turpis sem, aliquet vel, gravida non, aliquet. Phasellus tempus quam vel felis. Suspendisse accumsan, velit non euismod imperdiet, mi lectus varius ante, ut mattis sapien arcu ut eros. Nulla sed velit. Maecenas at wisi eget velit euismod dictum. Nulla facilisi. Sed euismod. Cras ac urna. Morbi orci wisi, faucibus et, rhoncus eu, sodales quis, elit. Proin orci velit, ultrices non, ornare et, ullamcorper facilisis, tortor. Sed dignissim. Sed sed justo at mi facilisis porttitor. Mauris non pede aliquam tellus laoreet volutpat. </span></div>

[liorean]

Can the :first-line pseudo element be of use, maybe?

Or maybe a variation upon this trick?elm{
text-indent: -1em;
padding-left: 1em;
}

Shouldn't this have been in the HTML&CSS forum instead?

[Roy Sinclair]

If you find yourself reverting to the "float" solution, just use a div tag instead of a gif image. There's no reason why the indent needs to have any content.

[]|V|[agnus]

Gah, of COURSE, liorean! Can't believe I didn't think of that... thanks. (I put this in the JS forum as my initial thoughts were of a JS solution.)

Roy,
Another good, obvious point had we gone that route.

Today has been a bad day for catching the obvious... that's what happens when you're tired and didn't get your morning shower in. ;)

[AaronW]

Not sure if you've solved it or not (:first-line on its own prolly wouldn't do the trick? Dunno) but I'd have proposed to use JS to calculate the rendered height of the box wrapping the text in question (the box could be fluid width too) and if it's taller than the pre-calculated height of the box when there's only one line of text, style the paragraph with the text-indenting class.

Might be the way you did it? Dunno.

Another method which may or may not be out of the question would be to use PHP and the uploaded .ttf font file to calculate the rendered width of the text. If it's wider than your box (box would have to be fixed-width) output the class="indentedParagraph" bit.

The upside to that would be that you wouldn't be relying on JS... The downside would be if you happen to display like 200 results on the same page, PHP might lag a tad (though this depends on site popularity, and I'm not sure how resource-taxing the width-finding function would be).

I wrote a string-width calculator for the uploading thing on offtone:


function strwidth ($str)
{
$strBox = imagettfbbox (12, 0, 'verdanab.ttf', $str);
return (($strBox[0] > 0 && $strBox[2] > 0) || ($strBox[0] < 0 && $strBox[2] < 0)) ? abs ($strBox[2] - $strBox[0]) : (abs ($strBox[2]) + abs ($strBox[0]) + 1);
}


Though it obviously requires the ttf libs and whatnot.

[rmedek]

What about setting padding on the text's container and setting a negative text-indent on the text?

#wrap {
padding: 20px 20px 20px 30px;
}

p {
text-indent: -10px;
}

<div id="wrap">
<p>Lots of text. . . </p>
</div>

<edit>ARG... sorry, I read the first post and jumped right at a reply... looks like Liorean solved it already... :o</edit>

[AaronW]

Ooooh, I didn't he wanted THAT effect. Why on earth would you "outdent" the first line? I thought you were going for:


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin
lorem, auctor a, tempor id, accumsan in, metus. Nunc sit amet risus.
Fusce ipsum. Nulla dui libero, suscipit nec, malesuada a, condimentum
et, magna. Pellentesque arcu nulla, porta sed, viverra quis, iaculis sed,
sem. Fusce accumsan tortor vitae tellus elementum vulputate.


Rather than (for anyone else reading who is as apparently confused as I was):


Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Proin augue lorem, auctor a, tempor id, accumsan in, metus.
Nunc sit amet risus. Fusce ipsum. Nulla dui libero, suscipit nec,
malesuada a, condimentum et, magna. Pellentesque arcu nulla,
porta sed, viverra quis, iaculis sed, sem. Fusce accumsan tortor
vitae tellus elementum vulputate. Nulla sed tellus. Quisque quam.


:S That's much easier then. Though it looks odd... Heh. Whatever.

[]|V|[agnus]

Well, ignoring the fact that I explained the effect desired... it also happens to be the way some older publications were done. I first saw such an effect on an old old newspaper front page.

Besides, if I had wanted a simple indent of the initial line, why would I discard text-indent in favor of some crazy script??

:confused:

[AaronW]

The insane client has requested that any text of the product names/descriptions that wraps to more than one line be indented.

An indented paragraph is one whose first line is indented. That's why I figured that was the effect you were going for, opposed to the lines themselves being indented.

As for why you'd dismiss text-indent: Because you said you wanted a conditional indent: Only if the text wraps. How would you tell if the text wraps, other than the methods I described in my other post?

[]|V|[agnus]

An indented paragraph is one whose first line is indented.

I'm well aware of that fact, chap.

|V|[agnus"]The insane client has requested that any text of the product names/descriptions that wraps to more than one line be indented.

As for why you'd dismiss text-indent: Because you said you wanted a conditional indent: Only if the text wraps. How would you tell if the text wraps, other than the methods I described in my other post?

text-indent has that conditional nature built into the property... nothing else needs to "know" anything

[AaronW]

Exactly... I read "text" as "text" and not "lines" ;)

http://offtone.com/scripts/time2.php

Seems text-indent doesn't have the built-in logic... That second paragraph shouldn't be indented if that were the case, no? Or what built-in condition were you talking about?

[]|V|[agnus]

Exactly... I read "text" as "text" and not "lines" ;)

...

wtf are you talking about?? all text belongs to a "line". are you implying that "lines that wrap to more than one line" would have been more appropos? what i said means exactly what i intended. i don't provide supplements to hooked on phonics, i'm afraid. you'll have to pester somebody else for that.

...

that second paragraph in your script absolutely should be indented!!@%!$#^ but if i'm using the property to outdent, the by nature of its behavior, all subsequent lines will appear indented... hence the built in knowledge... :thumbsup:

...

HONESTLY... :rolleyes:

[AaronW]

Indeed "HONESTLY". You're rather thick headed.

The negative text-indent would give the affect you're after. But it was my understanding (as one interpreted meaning of your post allows) is that you wanted the first line indented but ONLY if the paragraph was two or more lines long. See http://offtone.com/scripts/time2.php again for what I mean.

As for "text" meaning "text":

The insane client has requested that any text of the product names/descriptions that wraps to more than one line be indented.

I viewed text as a singular noun referring to the entire paragraph, as only a paragraph can wrap ;) Better wording would've eliminated the miscommunication:

"The insane client has requested that any lines of wrapped text be indented."

And phonics has nothing to do with this. Semantics, a word you seem all too comfortable shouting at people, is the word you're probably looking for.

[]|V|[agnus]

:eek:

lol!!!

[AaronW]

Speechless, eh? Excellent.