Question

Scenario:

You have a CMS where an user is able to determine what content will be displayed.
The content consists of multiple colums with links underneath 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 gets too long the content will be split over 2 columns.
Right now content will just be split -> in mozilla using css3 and in IE using a JQuery library in which something similar is 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 see this is handled client side, and the effect of doing this is that text will just be split without making sure columns won’t be just broken apart.

This is the effect:

So this is now solved client side and therefore the content will just be broken and split over 2 columns.
Is there any good way to solve this server side having 2 nice columns with some logic to determine wheter the columns have the similar height?
How would you solve this issue?

Answer 1

if your typeface is a Monospaced (all characters have the same width) One you could count the characters and by that order an equal number of them in each column. However since your typeface most likely is not monospace (since its ugly as hell). That Method will Produce much different Results depending on the Text.

I think css3 and a JS Fallback are a good way to accomplish it.