Splitting up content that will be displayed over multiple columns

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

Hello,

The only way to do it on server side is to count the characters/words/links and split somewhere in the middle, but this will only give you an approximation. If your text is long enough that may be sufficient.

From what I see in the image with orange text you have long words in narrow columns. That means you will encounter significant variations if splitting server side.

Answer 2

Hi,

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.

Answer 3

Taking into account your comment to Hannes' answer, the best way to do it server-side would be to split the content by group (ie, something like your "centrum senioren" would constitute one group. Strip out the markup to avoid skewing the results, and count each group's characters. Using that you can get a rule of thumb for where to put the column break.

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