Separation of content to be displayed on multiple columns

Question

Scenario:

You have a CMS where the user can determine what content will be displayed. Content consists of several columns with links below them. It looks something like this:

Column name
link1 link2 link3 link4
link5 link6 liiiiiiiiiiiiiiiiiink7
link8 liiiink9 liiiiiiink10

Column Name2
link1 link2 link3 link4
link5 link6 liiiiiiiiiiiiiiiiiink7
link8 liiiink9 liiiiiiink10
Column Name3
link1 link2 link3 link4
link5 link6 liiiiiiiiiiiiiiiiiink7
link8 liiiink9 liiiiiiink10

Column Name4
link1 link2 link3 link4
link5 link6 liiiiiiiiiiiiiiiiiink7
link8 liiiink9 liiiiiiink10

When this list is too long, the content will be divided into 2 columns. For the time being, the content will simply be shared → in mozilla using css3 and in IE using the jQuery library, in which something similar has been done.

CSS

.columns { -moz-column-count: 2; -moz-column-gap: 30px; -webkit-column-count: 2; -webkit-column-gap: 30px; column-count: 2; column-gap: 30px; } ### WEB FORM <!--[if lte IE 9]> <script src="/Estate/Scripts/Libraries/autocolumn.min.js" type="text/javascript"></script> <script type="text/javascript"> if (Estate.Sitefinity.IsInEditMode() == false) { jQuery('#MultiColumn').columnize({ columns: 2, buildOnce: true }) } </script> <![endif]--> 

As you can see, this is handled on the client side, and the effect of this is that the text will simply be split, without making sure that the columns are not just broken.

This is the effect:

So, now this problem has been solved on the client side, so the content will simply be split and broken into 2 columns. Is there a good way to solve this server side by having 2 good columns with some logic to determine that the columns are of similar height? How would you solve this problem?

Answer 1

if your font is monospaced (all characters have the same width). You could count the characters and in that order an equal number of them in each column. However, since your font is most likely not monospaced (since its ugly as hell). This method will produce different results depending on the text.

I think css3 and JS Fallback are a good way to do this.

Answer 2

Given your comment on Hannes answers, the best way to do this on the server side is to split the content into groups (i.e. something like your "centrum senioren" will be one group. Divide the markup into avoid skewing the results and count everything wildcards Using this, you can get a rule of thumb for where to put the column.

I agree with the previous poster; the client side is a much better place to handle this. Try using column-break-inside: avoid in your groups in CSS.

Answer 3

The only way to do this on the server side is to count the characters / words / links and break somewhere in the middle, but this will only give you an approximate value. If your text is long enough, that might be enough.

From what I see in the image with orange text, you have long words in narrow columns. This means that you will face significant changes if you split the server side.