2

Does anyone know a clever way to create even columns of text using php?

So lets say I have a few paragraphs of text and I want to split this into two columns of even length (not string length, I'm talking even visible length).

At the moment I'm splitting based on word count, which (as you can imagine) isn't working too well. For instance, on one page I have a list (ul li style) which is increasing the line breaks but not the word count. eg: whats happening is that the left column (with the list in it) is visibly longer than the right column (and if there was a list in the right hand column then it would be the same the other way round).

So does anyone have a clever way to split text? For instance using my knowledge of objective c there is a "size that fits" function. I know how wide the columns are going to be, so is there any way to take that, and the string, and work out how high its going to be? Then cut it in half? Or similar?

Thanks

ps: no css3 nonsense please, we're targeting browsers as far back as ie6 (shudder). :)

Improve this question
3
  • 2
    The problem here is that there's no way to reliably do this in PHP. You could pre-render the text in GD. By drawing words until they overflow past a set content width, you could gather some information about how many lines total the text will be. With that you could divy the text up appropriately, however this wouldn't work for anything but absolute text sizes (no em's or %'s) and it certainly would be very slow just for adding IE support. Commented Jul 27, 2011 at 16:48
  • IE6 as well as other browser support height and overflow-hidden. As you're caring about the visual length, set the height and disable (potentially overflowing) text visually. You can not solve the problem server-side as already commented, it would be always a work-around. Commented Jul 27, 2011 at 16:50
  • CSS3 has multi-column support, with content balancing. Unfortunately, until that's widely supported, the only way you can achieve this effect is via unreliable hacks. Commented Jul 27, 2011 at 16:52

2 Answers 2

Reset to default
1

I know you're looking at a PHP solution but since the number of lines will depend on how it's rendered in the browser, you'll need to use some javascript.

You basically need to know the dimensions of the container the text is in and using the height divided by the text's line-height, you'll get the number of lines.

Here's a fiddle using jQuery: http://jsfiddle.net/bh8ZR/

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

your code is somewhat flawed when there's an odd number of lines... :p I'm sure I can fix that though.
Well here's a fix if there's an odd number of lines: jsfiddle.net/bh8ZR/4 as for the image issue.. well your title does say "two even columns of text" :D
lol fair enough, I've found a work around anyway. Thanks for your help.
0

There is not a lot of information here as to the source data. However, if you know that you have 20 lines of data, and want to split it, why not simply use an array of the display lines, then divide by two. Then you can take the first half of the PHP array and push it into the second column when you hit the limit of the first.

I think you're going to have trouble displaying these columns in a web browser and having a consistent look and feel because you're trying to apply simple programming logic to a visual layout. CSS and jQuery were designed to help layout issues. jQuery does have IE6 compatibility.

I really don't think you're going to find a magic bullet here if you have HTML formatting inside the data you're trying to display. The browser is going to render this based on a lot of variables. Page width, font size, etc. This is exactly why CSS and other layout styles are there, to handle this sort of formatting.

Is there any reason why you're not trying to solve this in the browser instead of PHP? IE6 to me is not a strong enough case not to do this where it belongs.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.