To split large text into columns

Question

Problem:

There is a big piece of text:

<div class="cont"> <p> Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, </p> <p> consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur? At vero eos et </p> <p> accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, </p> <p> facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p> <p> Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, </p> <p> consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur? At vero eos et </p> <p> accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, </p> <p> facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p> </div> 

I need to split it into two columns. On the page, it should be divided into two approximately identical (in height) columns.

If possible: when resizing the text container, the column should remain the same height. Is it possible to set the number "n" - how many columns to divide a large piece of text. That is, divide the text into any number of columns.

Is there any PHP, XSLT, CSS, pure javascript (without jQuery)? Which tool is better to use? How to do this so that the solution is compatible with any browser.

Answer 1

I found such a link.

The solution suits me. http://www.csscripting.com/css-multi-column/ .

Took from here: http://www.alistapart.com/articles/css3multicolumn/ .

Minus: the js file is quite heavy.

Another solution (works with onResize): http://randysimons.nl/125,english/129,multi-column-text/#paragraaf_1

Answer 2

If you don't mind that it doesn’t work in certain versions of IE, you can use the new CSS3 columns, which are a piece of cake for implementation, see:

http://www.css3.info/preview/multi-column-layout/

Answer 3

This is possible with Javascript. I call the following Columns_Fit algorithm:

• First find the column with the lowest height and the column with the highest height.
• Remove the word from the first paragraph of the largest column found in step # 1, and add this word to the smallest column that you found in step 1.
• Compare the height of the two columns.
• If they are still different, repeat step # 2.

This is the principle of the algorithm. You have to repeat that for each column the "go to middle" approach, for example:

 <div id="col1"></div> <div id="col2"></div> <div id="col3"></div> <div id="col4"></div> 

The above columns are in order from smallest ( col1 ) to highest ( col4 ). Start with col1 and col4 and run the Columns_Fit algorithm on them. Later, run the Columns_Fit algorithm in the following two columns: col2 and col3 . That is why I call this approach a “mid-visit”.

Please note that not all columns can be exactly equal in height; there must be a deviation in height. The deviation is equal to or greater than the line height. (deviation> = line height)

Interesting link: Clippings from several columns Daniel M. Frommelt @ alistapart.com