This page uses a simple script to quickly break one column into several. I was inspired to write it because I use a huge wide screen monitor and see every day the need to break columns up. I've seen (and in the past written my own variations on) elaborate techniques involving copying and scrolling copies of content that didn't make good use of the DOM and risked creating damaged HTML and weird output. This simple script came to me as an obvious simple way to split columns up via the DOM but it has a slight problem - it can't really tell where the best spot is to break the columns. I just choose the elements roughly fitting the average height of the columns as approximately, and quickly, deduced. As such they don't tend to be very even at the column bottoms.
There's a basic problem with columns - scrolling up and down. They work a treat if they all fit across one screen, but not if they're all too long and require awkward scrolling (a tiny amount of mouse wheel scrolling is okay). So this solution isn't as practical as I hoped. In the real world I think deducing useable real estate on a page and faking paging by javascript so exactly the right number of columns display on the screen at a time would be better. That would be an easy mod to this script.
Also there's a bit of a flash as the text reorganizes which is a bit of a d'oh moment. But if someone wanted to othat could be hidden by judicious modifications to the code I haven't bothered with.
1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ut mauris ut erat fringilla elementum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Cras pharetra. Nullam facilisis aliquet odio. Quisque nec velit. In adipiscing congue sapien. Vestibulum augue. Proin consequat. Vivamus luctus lorem sit amet ipsum. Suspendisse dictum lacinia est. Pellentesque facilisis erat sed orci. Curabitur eget elit.
2. Vivamus non est. Fusce mattis varius mauris. Nulla nunc. Donec ultrices sem sit amet turpis. Proin iaculis. Integer sit amet magna ut neque sagittis egestas. Aliquam pede. Cras euismod tempus enim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque elementum. In pretium risus eu ligula. Donec tempus elementum neque. Sed sodales elit quis tellus. Suspendisse ligula ante, scelerisque sit amet, elementum et, dapibus nec, lectus. Aenean fringilla, justo in consequat pretium, enim metus sodales orci, at pellentesque turpis est et ante.
3. Aenean felis. Donec tincidunt lobortis dolor. Praesent faucibus nisl ut magna. Sed id ante eu orci faucibus sollicitudin. Sed sem orci, adipiscing hendrerit, dignissim id, luctus eu, odio. Proin faucibus, justo ut aliquet tristique, mauris nisl mattis elit, at porta erat arcu et nisl. Sed vehicula consectetuer purus. Cras non odio pharetra ipsum malesuada bibendum. Quisque faucibus, est non sodales mattis, purus leo ultrices orci, rhoncus fermentum enim nibh vitae velit. Nullam elementum nisi sed pede. Aliquam lacinia, erat eget laoreet pulvinar, dolor turpis ultricies mi, vitae consectetuer neque tellus in sapien. Curabitur vel eros id lorem facilisis hendrerit. Aliquam erat volutpat. Aenean libero risus, pellentesque nec, sagittis eget, mattis in, erat. Fusce tempor faucibus arcu. Quisque scelerisque magna sit amet risus. Aenean tempus. Aliquam erat volutpat. Aenean enim ante, fermentum non, rutrum id, molestie sed, ante. Sed euismod.
4. Pellentesque quam est, tincidunt blandit, mattis id, molestie eu, turpis. Nulla facilisi. Sed felis lacus, luctus sit amet, pretium nec, sollicitudin id, mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam mattis semper nulla. Cras id erat. Suspendisse dignissim fermentum justo. Nulla aliquet tincidunt metus. Duis felis elit, laoreet nec, auctor facilisis, vehicula non, nisl. Nam lacus.
5. Integer sagittis sapien tempor elit. Sed nonummy gravida enim. Integer rhoncus sem vitae tortor. Quisque urna. Praesent tempor consequat pede. Nullam tempus, velit eget vestibulum congue, sem purus pretium nunc, sed bibendum urna diam vitae purus. Phasellus pretium cursus justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In varius aliquam felis. In a neque eget velit gravida dignissim. Suspendisse eu lacus ultrices tortor sollicitudin faucibus. In dictum mi quis nibh. Integer augue. Proin sed lorem.
6. Sed vel elit luctus est tincidunt posuere. Donec eget erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec porta lectus sed nulla. Suspendisse porttitor, urna sit amet sodales condimentum, orci quam vehicula lacus, id sodales nisi felis sit amet ipsum. Maecenas tempor vehicula quam. Phasellus gravida. Sed dapibus augue sed arcu. Maecenas facilisis. Curabitur leo libero, lacinia vitae, auctor a, luctus vel, velit. Vivamus in libero. Curabitur suscipit rhoncus nunc. Suspendisse molestie congue massa. Fusce placerat. Integer a quam non dui congue mollis.
7. Phasellus neque sem, faucibus eget, ultricies ac, consectetuer sit amet, elit. Cras condimentum risus tempor orci. Maecenas tempus. Nam lorem augue, pellentesque eu, vulputate vitae, tincidunt vestibulum, odio. Donec vel ipsum. Quisque nisl. In ac magna. Aliquam in sem. Pellentesque aliquam eleifend velit. Integer fermentum. Nulla ullamcorper ipsum quis est. Maecenas posuere arcu et urna. Suspendisse hendrerit. Nam rhoncus ligula ac augue. Nulla neque tortor, vulputate nec, commodo luctus, viverra sed, quam. Nulla adipiscing diam vitae odio. Aenean non nisi. Praesent pede diam, semper lobortis, lacinia vitae, tincidunt nec, enim.
8. In hac habitasse platea dictumst. Pellentesque rutrum. Aenean ut neque sit amet dui vehicula mattis. Nullam id purus. Morbi interdum. Morbi risus purus, nonummy sed, scelerisque in, tempus at, ante. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque id lacus non augue elementum aliquam. Vivamus pede. Curabitur faucibus, pede nec commodo ullamcorper, massa velit ornare sapien, ut fermentum lorem nunc vitae libero. Phasellus felis ligula, bibendum ac, placerat vel, vehicula nec, lacus. Vestibulum id purus. Mauris eget quam. Phasellus id nisi. Maecenas luctus euismod turpis. Ut eu ipsum et sem adipiscing bibendum.
9. Suspendisse orci. Duis justo leo, feugiat sit amet, aliquam at, gravida a, nisi. Integer urna lorem, consequat in, sodales aliquet, eleifend eget, urna. Cras sit amet felis eu mi egestas laoreet. Cras eu justo molestie augue malesuada mollis. Proin lobortis malesuada felis. Fusce blandit dictum tellus. Proin id magna. Proin libero. Integer eget ante. Integer vel nunc. Vestibulum nulla urna, pellentesque nec, facilisis luctus, suscipit cursus, quam. Integer eros lacus, euismod et, consequat faucibus, tempor ac, urna. Cras at neque in eros vestibulum eleifend. Suspendisse potenti. Nulla convallis, nisi a adipiscing gravida, metus metus gravida ipsum, vel vehicula sapien massa sed urna. Morbi accumsan ligula. Vestibulum in arcu. Donec nulla tortor, dictum a, semper et, sollicitudin eu, augue. Curabitur varius.
10. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc odio mauris, consequat quis, condimentum et, elementum sed, augue. Suspendisse potenti. Etiam nisl elit, nonummy et, ultrices at, rutrum eget, leo. Fusce sit amet sapien. Fusce fringilla tincidunt augue. Fusce leo urna, sodales id, nonummy id, placerat non, nibh. Nulla condimentum ultricies turpis. Suspendisse potenti. Nulla id lorem. Suspendisse lobortis venenatis nisi. Morbi dapibus est ut pede. Nam pede dui, ultrices sed, bibendum et, ullamcorper at, pede. Morbi mi sem, auctor porttitor, elementum at, dignissim a, nunc. Praesent porta sem. Fusce varius vulputate ante. Morbi arcu. Mauris ut eros. Nam facilisis, dui nec viverra blandit, ligula est fermentum erat, vitae lacinia turpis ante at est.
11. Fusce vel massa. Phasellus pede. Donec eget massa sed neque luctus sollicitudin. Nunc eros. Etiam rhoncus, est gravida feugiat varius, tortor quam porta enim, sit amet feugiat mi ligula id leo. Ut tristique aliquet sapien. Duis neque ante, aliquet non, facilisis id, hendrerit vitae, erat. Donec lorem nulla, bibendum a, convallis consequat, vulputate sit amet, ligula. Cras fringilla neque in nibh. Fusce molestie.
12. Nulla facilisi. Proin faucibus. Aliquam erat volutpat. Praesent ac ante quis odio accumsan vehicula. Nulla non lorem. Maecenas sodales eros id ligula. Aliquam id felis. Quisque vitae libero eu mi elementum dignissim. Aenean semper. Curabitur enim arcu, rutrum in, aliquet mollis, commodo eget, metus. Praesent sit amet nunc.
13. Cras justo libero, fringilla sit amet, laoreet non, commodo id, dolor. Aliquam pellentesque, enim vitae auctor vulputate, mi lectus scelerisque libero, id consectetuer arcu ipsum quis risus. Curabitur volutpat quam et pede. Vestibulum scelerisque, orci nec volutpat eleifend, neque pede mollis nisl, eu suscipit turpis mi non eros. Praesent eu urna at urna imperdiet ornare. Aenean vel arcu. Maecenas ligula odio, lacinia sit amet, feugiat id, auctor non, purus. Sed sed metus. Nunc tempor tristique diam. Fusce vehicula. Vestibulum est.