Maciek416 · June 13, 2011 15:54
diff --git a/gistfile1.html b/gistfile1.html
 <!DOCTYPE html>
 <html>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
  <script type="text/javascript" src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
  <style>

    body {
      margin:0px;
      padding:0px;
    }

    .flowbox {
 /*      margin-top:50px;*/
 /*      border-top:16px solid #555;*/
      position:relative;
      background-color: #ffffdd;
      -webkit-column-width:200px;
      -webkit-column-gap: 0px;
      width:800px;
      height:200px;
      overflow:hidden;
    }
    
    .sep {
      height:30px;
      background-color:#444;
    }

    div p {
      margin:10px 0px 10px 0px;
      padding:15px 0px 3px 0px;
      font-size:10px;
      line-height:10px;
      position:relative;
    }

    #p1 { background-color: rgba(244,0,244,0.2); }
    #p2 { background-color: rgba(0,234,0,0.2); }
    #p3 { background-color: rgba(244,0,244,0.2); }
    #p4 { background-color: rgba(0,234,0,0.2); }
    #p5 { background-color: rgba(244,0,244,0.2); }
    #p6 { background-color: rgba(0,234,0,0.2); }
    #p7 { background-color: rgba(244,0,244,0.2); }
    #p8 { background-color: rgba(0,234,0,0.2); }

  </style>
  <body>
    <input id="up" type="button" value="up" />
    <input id="down" type="button" value="down" />
    <div id="d1_orig" class="flowbox" style="display:none">
      <p id="p1">p1Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec nulla id augue convallis porttitor vitae in metus. Mauris et augue neque. Vivamus auctor convallis lectus non imperdiet. Praesent sit amet felis felis, vel sagittis justo. Proin orci orci, pretium ornare tempor id, adipiscing eget sem. Nam mollis, mauris et suscipit ultricies, turpis augue facilisis dui, ac convallis neque elit ac eros. Maecenas sed tellus elit. In venenatis, erat id tempus feugiat, risus lectus consectetur mi, sit amet blandit massa nibh sit amet tellus. Aliquam erat volutpat. Nam a commodo neque. Integer dictum urna at est convallis ut elementum sem tincidunt. Mauris a purus non neque tempus aliquam. Duis malesuada, purus ut fringilla varius, mauris tellus tristique augue, eu aliquet eros nisl eu felis. Aenean laoreet erat vel metus rutrum sit amet vehicula tortor adipiscing. Fusce tellus dolor, auctor sit amet bibendum vulputate, consectetur nec lacus. Donec accumsan aliquam tellus, a posuere purus pulvinar sit amet. Donec ac odio a orci scelerisque fermentum.</p>
      <p id="p2">p2Donec sit amet felis mi, at facilisis erat. Quisque varius, urna eu congue tempus, magna sapien euismod augue, ut varius elit elit venenatis tortor. Curabitur hendrerit ante at nisl venenatis eget tincidunt tellus consectetur. Nulla arcu libero, iaculis facilisis euismod ac, porta ut ante. Aenean ultrices lobortis odio, vitae ultrices nisl venenatis vitae. Sed mauris orci, condimentum et volutpat nec, ultricies eu urna. Donec et lacus nec felis ultricies ultrices. Ut pharetra, ligula ac convallis ornare, dui metus placerat dolor, a eleifend leo augue id felis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque ut libero at magna sodales congue pulvinar vitae mi. In convallis nisi dictum odio facilisis venenatis.</p>
      <p id="p3">p3Maecenas et tellus ut quam accumsan bibendum sed at nisi. Nulla ultrices tortor ac tortor consectetur vitae gravida lorem ullamcorper. Proin et laoreet ligula. Nunc quis libero nec arcu viverra accumsan. Nunc suscipit, nisl at aliquam tristique, erat est condimentum urna, sed ultrices ante ipsum id tortor. Aenean laoreet mauris in lectus malesuada elementum. Morbi convallis rutrum purus eget luctus. Cras rutrum pretium nibh. Phasellus lobortis justo imperdiet augue gravida gravida. Aliquam scelerisque volutpat leo, eu tempus lacus scelerisque at. Cras tempus eros quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam eu ligula felis, et molestie diam.</p>
      <p id="p4">p4Proin dui libero, rhoncus id lobortis eget, sagittis eget lacus. Maecenas aliquam lorem ut nisl tempus vitae sodales mauris pretium. Mauris in lacus eros, ac tincidunt libero. Nunc orci odio, rutrum ac pellentesque ac, adipiscing sed nisi. Ut volutpat posuere tortor, quis egestas urna posuere eu. Etiam aliquam diam vel odio tempor ullamcorper at vel nibh. Praesent nec ante eget diam pulvinar dictum vel non nisl. Curabitur vel ante at velit scelerisque vulputate. Curabitur lacus ligula, condimentum vel tempus quis, fermentum eget orci. Phasellus id nunc sit amet eros varius varius ut nec velit. Aliquam accumsan dolor ipsum. Ut dui tortor, eleifend sed tincidunt sed, ullamcorper ac arcu. Nam non enim arcu. Nullam vitae porttitor massa. Sed pretium lorem nec massa consequat sit amet pretium magna auctor. Curabitur fringilla dignissim ipsum, a pharetra libero consectetur sit amet.</p>

      <p id="p5">p5Vestibulum ultrices, tellus a facilisis commodo, felis sapien dignissim metus, nec pulvinar erat odio sed dolor. Nam lectus est, congue venenatis suscipit condimentum, feugiat sed nisi. Aliquam non metus sed ante malesuada dictum at nec eros. Aenean ut dolor id purus porta tincidunt a at libero. Nullam mattis rhoncus orci, non posuere diam lacinia vel. Nullam ultricies felis quis nibh molestie ut hendrerit est venenatis. Vivamus sagittis lacus sit amet tortor consequat quis consequat arcu condimentum. Integer ac mi massa. Aenean eu elit enim, consequat lacinia sem. Aliquam sit amet tellus non metus imperdiet feugiat et id lorem. Maecenas pellentesque rutrum ullamcorper. Ut dictum tempus nibh varius porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer et mauris sapien. Curabitur consequat, erat at hendrerit adipiscing, turpis ipsum commodo massa, ac placerat ante nisi pretium eros. Praesent suscipit lorem id ligula vulputate eu ultrices tortor iaculis. In malesuada vehicula condimentum.</p>
      <p id="p6">p6Phasellus arcu sapien, volutpat quis lobortis sit amet, laoreet quis lorem. Vestibulum sit amet dolor mi. Praesent auctor dolor non est fringilla pretium. Aenean sit amet justo augue, in condimentum lacus. Ut ac nulla enim. Ut in urna in diam fringilla tempus non eget sapien. Pellentesque eget nunc nibh. Duis bibendum, purus in bibendum ultrices, tellus nibh suscipit est, at sagittis erat lacus nec ipsum. Aenean laoreet eros non ante venenatis dapibus. Cras posuere adipiscing lorem, in mattis nulla pretium non. Praesent egestas bibendum dui, quis scelerisque arcu imperdiet non. Proin in purus tellus, quis suscipit quam. Aenean suscipit sem in leo imperdiet quis aliquet erat convallis. Cras tincidunt magna convallis purus pretium fringilla viverra justo iaculis. Nullam mauris orci, eleifend ut pretium vitae, rutrum eget dui. Donec vel quam iaculis libero egestas auctor id varius leo. Nullam risus ipsum, commodo ultricies vulputate eu, lacinia id quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi elementum neque non ligula ultrices accumsan. Quisque ac mollis turpis.</p>
      <p id="p7">p7Mauris congue gravida sapien, ut viverra justo laoreet pharetra. Aliquam erat volutpat. Integer massa lectus, tincidunt in suscipit nec, ultricies mollis diam. Curabitur feugiat metus vitae lacus faucibus vel condimentum felis commodo. Curabitur eget neque vitae massa malesuada dapibus. Ut molestie, libero non suscipit imperdiet, leo dolor convallis lorem, eu vulputate neque lectus vel purus. Aenean a viverra ipsum. Praesent quis nisl in dolor venenatis venenatis. Nullam varius enim vel ipsum fermentum hendrerit. Aliquam at turpis ut nunc molestie viverra.</p>
      <p id="p8">p8Fusce hendrerit risus iaculis erat vulputate commodo vitae id odio. Nullam dapibus, tortor vel dignissim congue, massa lorem adipiscing erat, eu faucibus enim odio vitae ipsum. Maecenas et est lectus, et fermentum massa. Nulla tellus erat, euismod nec ornare vitae, tristique vitae ipsum. Cras a quam diam, quis tempor odio. Duis eget quam elit. Donec vel orci felis, eu malesuada nulla. Duis placerat justo non odio posuere ultricies. Donec tincidunt bibendum diam, a euismod nulla ullamcorper vel. Mauris lacinia, leo at consectetur cursus, dui metus dictum ligula, at fringilla quam mi at est. Nunc sollicitudin cursus sapien, vitae consequat ante feugiat quis. Donec ac libero ut nisl eleifend tincidunt in in est. Phasellus augue nisl, facilisis sit amet bibendum vitae, euismod id nulla. Nulla volutpat congue mollis. Curabitur commodo lorem ut ligula sollicitudin adipiscing. Morbi a auctor lectus. Morbi viverra adipiscing nibh, ut mattis tortor suscipit et.</p>
    </div>
    <div id="d1" class="flowbox">
      <p id="p1">p1Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec nulla id augue convallis porttitor vitae in metus. Mauris et augue neque. Vivamus auctor convallis lectus non imperdiet. Praesent sit amet felis felis, vel sagittis justo. Proin orci orci, pretium ornare tempor id, adipiscing eget sem. Nam mollis, mauris et suscipit ultricies, turpis augue facilisis dui, ac convallis neque elit ac eros. Maecenas sed tellus elit. In venenatis, erat id tempus feugiat, risus lectus consectetur mi, sit amet blandit massa nibh sit amet tellus. Aliquam erat volutpat. Nam a commodo neque. Integer dictum urna at est convallis ut elementum sem tincidunt. Mauris a purus non neque tempus aliquam. Duis malesuada, purus ut fringilla varius, mauris tellus tristique augue, eu aliquet eros nisl eu felis. Aenean laoreet erat vel metus rutrum sit amet vehicula tortor adipiscing. Fusce tellus dolor, auctor sit amet bibendum vulputate, consectetur nec lacus. Donec accumsan aliquam tellus, a posuere purus pulvinar sit amet. Donec ac odio a orci scelerisque fermentum.</p>
      <p id="p2">p2Donec sit amet felis mi, at facilisis erat. Quisque varius, urna eu congue tempus, magna sapien euismod augue, ut varius elit elit venenatis tortor. Curabitur hendrerit ante at nisl venenatis eget tincidunt tellus consectetur. Nulla arcu libero, iaculis facilisis euismod ac, porta ut ante. Aenean ultrices lobortis odio, vitae ultrices nisl venenatis vitae. Sed mauris orci, condimentum et volutpat nec, ultricies eu urna. Donec et lacus nec felis ultricies ultrices. Ut pharetra, ligula ac convallis ornare, dui metus placerat dolor, a eleifend leo augue id felis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque ut libero at magna sodales congue pulvinar vitae mi. In convallis nisi dictum odio facilisis venenatis.</p>
      <p id="p3">p3Maecenas et tellus ut quam accumsan bibendum sed at nisi. Nulla ultrices tortor ac tortor consectetur vitae gravida lorem ullamcorper. Proin et laoreet ligula. Nunc quis libero nec arcu viverra accumsan. Nunc suscipit, nisl at aliquam tristique, erat est condimentum urna, sed ultrices ante ipsum id tortor. Aenean laoreet mauris in lectus malesuada elementum. Morbi convallis rutrum purus eget luctus. Cras rutrum pretium nibh. Phasellus lobortis justo imperdiet augue gravida gravida. Aliquam scelerisque volutpat leo, eu tempus lacus scelerisque at. Cras tempus eros quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam eu ligula felis, et molestie diam.</p>
      <p id="p4">p4Proin dui libero, rhoncus id lobortis eget, sagittis eget lacus. Maecenas aliquam lorem ut nisl tempus vitae sodales mauris pretium. Mauris in lacus eros, ac tincidunt libero. Nunc orci odio, rutrum ac pellentesque ac, adipiscing sed nisi. Ut volutpat posuere tortor, quis egestas urna posuere eu. Etiam aliquam diam vel odio tempor ullamcorper at vel nibh. Praesent nec ante eget diam pulvinar dictum vel non nisl. Curabitur vel ante at velit scelerisque vulputate. Curabitur lacus ligula, condimentum vel tempus quis, fermentum eget orci. Phasellus id nunc sit amet eros varius varius ut nec velit. Aliquam accumsan dolor ipsum. Ut dui tortor, eleifend sed tincidunt sed, ullamcorper ac arcu. Nam non enim arcu. Nullam vitae porttitor massa. Sed pretium lorem nec massa consequat sit amet pretium magna auctor. Curabitur fringilla dignissim ipsum, a pharetra libero consectetur sit amet.</p>

      <p id="p5">p5Vestibulum ultrices, tellus a facilisis commodo, felis sapien dignissim metus, nec pulvinar erat odio sed dolor. Nam lectus est, congue venenatis suscipit condimentum, feugiat sed nisi. Aliquam non metus sed ante malesuada dictum at nec eros. Aenean ut dolor id purus porta tincidunt a at libero. Nullam mattis rhoncus orci, non posuere diam lacinia vel. Nullam ultricies felis quis nibh molestie ut hendrerit est venenatis. Vivamus sagittis lacus sit amet tortor consequat quis consequat arcu condimentum. Integer ac mi massa. Aenean eu elit enim, consequat lacinia sem. Aliquam sit amet tellus non metus imperdiet feugiat et id lorem. Maecenas pellentesque rutrum ullamcorper. Ut dictum tempus nibh varius porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer et mauris sapien. Curabitur consequat, erat at hendrerit adipiscing, turpis ipsum commodo massa, ac placerat ante nisi pretium eros. Praesent suscipit lorem id ligula vulputate eu ultrices tortor iaculis. In malesuada vehicula condimentum.</p>
      <p id="p6">p6Phasellus arcu sapien, volutpat quis lobortis sit amet, laoreet quis lorem. Vestibulum sit amet dolor mi. Praesent auctor dolor non est fringilla pretium. Aenean sit amet justo augue, in condimentum lacus. Ut ac nulla enim. Ut in urna in diam fringilla tempus non eget sapien. Pellentesque eget nunc nibh. Duis bibendum, purus in bibendum ultrices, tellus nibh suscipit est, at sagittis erat lacus nec ipsum. Aenean laoreet eros non ante venenatis dapibus. Cras posuere adipiscing lorem, in mattis nulla pretium non. Praesent egestas bibendum dui, quis scelerisque arcu imperdiet non. Proin in purus tellus, quis suscipit quam. Aenean suscipit sem in leo imperdiet quis aliquet erat convallis. Cras tincidunt magna convallis purus pretium fringilla viverra justo iaculis. Nullam mauris orci, eleifend ut pretium vitae, rutrum eget dui. Donec vel quam iaculis libero egestas auctor id varius leo. Nullam risus ipsum, commodo ultricies vulputate eu, lacinia id quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi elementum neque non ligula ultrices accumsan. Quisque ac mollis turpis.</p>
      <p id="p7">p7Mauris congue gravida sapien, ut viverra justo laoreet pharetra. Aliquam erat volutpat. Integer massa lectus, tincidunt in suscipit nec, ultricies mollis diam. Curabitur feugiat metus vitae lacus faucibus vel condimentum felis commodo. Curabitur eget neque vitae massa malesuada dapibus. Ut molestie, libero non suscipit imperdiet, leo dolor convallis lorem, eu vulputate neque lectus vel purus. Aenean a viverra ipsum. Praesent quis nisl in dolor venenatis venenatis. Nullam varius enim vel ipsum fermentum hendrerit. Aliquam at turpis ut nunc molestie viverra.</p>
      <p id="p8">p8Fusce hendrerit risus iaculis erat vulputate commodo vitae id odio. Nullam dapibus, tortor vel dignissim congue, massa lorem adipiscing erat, eu faucibus enim odio vitae ipsum. Maecenas et est lectus, et fermentum massa. Nulla tellus erat, euismod nec ornare vitae, tristique vitae ipsum. Cras a quam diam, quis tempor odio. Duis eget quam elit. Donec vel orci felis, eu malesuada nulla. Duis placerat justo non odio posuere ultricies. Donec tincidunt bibendum diam, a euismod nulla ullamcorper vel. Mauris lacinia, leo at consectetur cursus, dui metus dictum ligula, at fringilla quam mi at est. Nunc sollicitudin cursus sapien, vitae consequat ante feugiat quis. Donec ac libero ut nisl eleifend tincidunt in in est. Phasellus augue nisl, facilisis sit amet bibendum vitae, euismod id nulla. Nulla volutpat congue mollis. Curabitur commodo lorem ut ligula sollicitudin adipiscing. Morbi a auctor lectus. Morbi viverra adipiscing nibh, ut mattis tortor suscipit et.</p>
    </div>
    <div class="sep">&#xa0;</div>
    <div id="d2" class="flowbox">
    </div>
    <div class="sep">&#xa0;</div>
    <div id="d3" class="flowbox">
    </div>
  </body>
  <script>

    (function($){
      $.fn.flowHeight = function() {
        if(this.prev().length > 0){
          return this.outerHeight(false) + Math.max(parseFloat(this.css("marginTop")),parseFloat(this.prev().css("marginBottom")));
        } else {
          return this.outerHeight(false);
        }
      };
    })(jQuery);

    var continueParagraph = function(d1, d2){
      var numColumns = $(d1).width() / parseFloat($(d1).css("-webkit-column-width"));
      var columnHeight = $(d1).height();
      var firstOverflowingParagraph = null;
      var overflowingParagraphs = [];
      var maxHeight = (numColumns * columnHeight);

      // Find paragraph which is overflowing
      _(d1.find("> *")).reduce(function(accumulatedHeight, elem){
        var $el = $(elem);
        var result = accumulatedHeight + $el.flowHeight();
        var isOverflowing = result > maxHeight;

        if(isOverflowing){
          if(firstOverflowingParagraph === null){
            // This is the first overflowing paragraph, like, ever.
            firstOverflowingParagraph = elem;

            var separator = ". ";
            var contentBackup = $el.html();

            // Chop by sentences
            var sentences = _(contentBackup.split(separator)).map(function(sentence, i, col){
              return sentence + (i==col.length - 1 ? "" : separator);
            });
            var overflow = [];

            // Find ideal chop point
            while(isOverflowing && sentences.length > 0){
              overflow.splice(0,0,sentences.pop());
              var newText = sentences.join("");
              $el.html(newText);
              isOverflowing = (accumulatedHeight + $el.flowHeight()) > maxHeight;
            }

            // Push overflowed sentences into next (newly split-off) paragraph
            if(overflow.length > 0){
              var id = $el.attr("id") + "_clone_" + Math.round(Math.random()*99999999999).toString(16);
              overflowingParagraphs.push($el.clone().attr("id",id).html("oflow" + overflow.join("")));
            }

            // Tidy up sentences whittled to zero
            if(sentences.length===0){
              $el.remove();
            }

          } else {
            overflowingParagraphs.push(elem);
          }
        }

        return result;
      },0);

      _(overflowingParagraphs).each(function(p){
        $(p).remove();
        $(d2).append($(p).clone());
      });
    };

    var continueParas = function(){
      $("#d2 > *, #d3 > *").remove();
      $("#d1").html($("#d1_orig").html());
      var d = (new Date()).getTime();
      continueParagraph($("#d1"), $("#d2"));
      continueParagraph($("#d2"), $("#d3"));
      console.log("time",(new Date()).getTime() - d);
    };
    
    $("#up").click(function(){
      var fontSize = parseInt($("p:first").css("fontSize"));
      var lineHeight = parseInt($("p:first").css("lineHeight"));
      $("p").css({ fontSize: (fontSize + 1) + "px", lineHeight: (lineHeight + 1) + "px" });
      continueParas();
    });

    $("#down").click(function(){
      var fontSize = parseInt($("p:first").css("fontSize"));
      var lineHeight = parseInt($("p:first").css("lineHeight"));
      $("p").css({ fontSize: (fontSize - 1) + "px", lineHeight: (lineHeight - 1) + "px" });
      continueParas();
    });

    continueParas();

  </script>
 </html>
	<!DOCTYPE html>
	<html>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
	<script type="text/javascript" src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
	<style>

	body {
	margin:0px;
	padding:0px;
	}

	.flowbox {
	/* margin-top:50px;*/
	/* border-top:16px solid #555;*/
	position:relative;
	background-color: #ffffdd;
	-webkit-column-width:200px;
	-webkit-column-gap: 0px;
	width:800px;
	height:200px;
	overflow:hidden;
	}

	.sep {
	height:30px;
	background-color:#444;
	}

	div p {
	margin:10px 0px 10px 0px;
	padding:15px 0px 3px 0px;
	font-size:10px;
	line-height:10px;
	position:relative;
	}

	#p1 { background-color: rgba(244,0,244,0.2); }
	#p2 { background-color: rgba(0,234,0,0.2); }
	#p3 { background-color: rgba(244,0,244,0.2); }
	#p4 { background-color: rgba(0,234,0,0.2); }
	#p5 { background-color: rgba(244,0,244,0.2); }
	#p6 { background-color: rgba(0,234,0,0.2); }
	#p7 { background-color: rgba(244,0,244,0.2); }
	#p8 { background-color: rgba(0,234,0,0.2); }

	</style>
	<body>
	<input id="up" type="button" value="up" />
	<input id="down" type="button" value="down" />
	<div id="d1_orig" class="flowbox" style="display:none">
	<p id="p1">p1Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec nulla id augue convallis porttitor vitae in metus. Mauris et augue neque. Vivamus auctor convallis lectus non imperdiet. Praesent sit amet felis felis, vel sagittis justo. Proin orci orci, pretium ornare tempor id, adipiscing eget sem. Nam mollis, mauris et suscipit ultricies, turpis augue facilisis dui, ac convallis neque elit ac eros. Maecenas sed tellus elit. In venenatis, erat id tempus feugiat, risus lectus consectetur mi, sit amet blandit massa nibh sit amet tellus. Aliquam erat volutpat. Nam a commodo neque. Integer dictum urna at est convallis ut elementum sem tincidunt. Mauris a purus non neque tempus aliquam. Duis malesuada, purus ut fringilla varius, mauris tellus tristique augue, eu aliquet eros nisl eu felis. Aenean laoreet erat vel metus rutrum sit amet vehicula tortor adipiscing. Fusce tellus dolor, auctor sit amet bibendum vulputate, consectetur nec lacus. Donec accumsan aliquam tellus, a posuere purus pulvinar sit amet. Donec ac odio a orci scelerisque fermentum.</p>
	<p id="p2">p2Donec sit amet felis mi, at facilisis erat. Quisque varius, urna eu congue tempus, magna sapien euismod augue, ut varius elit elit venenatis tortor. Curabitur hendrerit ante at nisl venenatis eget tincidunt tellus consectetur. Nulla arcu libero, iaculis facilisis euismod ac, porta ut ante. Aenean ultrices lobortis odio, vitae ultrices nisl venenatis vitae. Sed mauris orci, condimentum et volutpat nec, ultricies eu urna. Donec et lacus nec felis ultricies ultrices. Ut pharetra, ligula ac convallis ornare, dui metus placerat dolor, a eleifend leo augue id felis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque ut libero at magna sodales congue pulvinar vitae mi. In convallis nisi dictum odio facilisis venenatis.</p>
	<p id="p3">p3Maecenas et tellus ut quam accumsan bibendum sed at nisi. Nulla ultrices tortor ac tortor consectetur vitae gravida lorem ullamcorper. Proin et laoreet ligula. Nunc quis libero nec arcu viverra accumsan. Nunc suscipit, nisl at aliquam tristique, erat est condimentum urna, sed ultrices ante ipsum id tortor. Aenean laoreet mauris in lectus malesuada elementum. Morbi convallis rutrum purus eget luctus. Cras rutrum pretium nibh. Phasellus lobortis justo imperdiet augue gravida gravida. Aliquam scelerisque volutpat leo, eu tempus lacus scelerisque at. Cras tempus eros quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam eu ligula felis, et molestie diam.</p>
	<p id="p4">p4Proin dui libero, rhoncus id lobortis eget, sagittis eget lacus. Maecenas aliquam lorem ut nisl tempus vitae sodales mauris pretium. Mauris in lacus eros, ac tincidunt libero. Nunc orci odio, rutrum ac pellentesque ac, adipiscing sed nisi. Ut volutpat posuere tortor, quis egestas urna posuere eu. Etiam aliquam diam vel odio tempor ullamcorper at vel nibh. Praesent nec ante eget diam pulvinar dictum vel non nisl. Curabitur vel ante at velit scelerisque vulputate. Curabitur lacus ligula, condimentum vel tempus quis, fermentum eget orci. Phasellus id nunc sit amet eros varius varius ut nec velit. Aliquam accumsan dolor ipsum. Ut dui tortor, eleifend sed tincidunt sed, ullamcorper ac arcu. Nam non enim arcu. Nullam vitae porttitor massa. Sed pretium lorem nec massa consequat sit amet pretium magna auctor. Curabitur fringilla dignissim ipsum, a pharetra libero consectetur sit amet.</p>

	<p id="p5">p5Vestibulum ultrices, tellus a facilisis commodo, felis sapien dignissim metus, nec pulvinar erat odio sed dolor. Nam lectus est, congue venenatis suscipit condimentum, feugiat sed nisi. Aliquam non metus sed ante malesuada dictum at nec eros. Aenean ut dolor id purus porta tincidunt a at libero. Nullam mattis rhoncus orci, non posuere diam lacinia vel. Nullam ultricies felis quis nibh molestie ut hendrerit est venenatis. Vivamus sagittis lacus sit amet tortor consequat quis consequat arcu condimentum. Integer ac mi massa. Aenean eu elit enim, consequat lacinia sem. Aliquam sit amet tellus non metus imperdiet feugiat et id lorem. Maecenas pellentesque rutrum ullamcorper. Ut dictum tempus nibh varius porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer et mauris sapien. Curabitur consequat, erat at hendrerit adipiscing, turpis ipsum commodo massa, ac placerat ante nisi pretium eros. Praesent suscipit lorem id ligula vulputate eu ultrices tortor iaculis. In malesuada vehicula condimentum.</p>
	<p id="p6">p6Phasellus arcu sapien, volutpat quis lobortis sit amet, laoreet quis lorem. Vestibulum sit amet dolor mi. Praesent auctor dolor non est fringilla pretium. Aenean sit amet justo augue, in condimentum lacus. Ut ac nulla enim. Ut in urna in diam fringilla tempus non eget sapien. Pellentesque eget nunc nibh. Duis bibendum, purus in bibendum ultrices, tellus nibh suscipit est, at sagittis erat lacus nec ipsum. Aenean laoreet eros non ante venenatis dapibus. Cras posuere adipiscing lorem, in mattis nulla pretium non. Praesent egestas bibendum dui, quis scelerisque arcu imperdiet non. Proin in purus tellus, quis suscipit quam. Aenean suscipit sem in leo imperdiet quis aliquet erat convallis. Cras tincidunt magna convallis purus pretium fringilla viverra justo iaculis. Nullam mauris orci, eleifend ut pretium vitae, rutrum eget dui. Donec vel quam iaculis libero egestas auctor id varius leo. Nullam risus ipsum, commodo ultricies vulputate eu, lacinia id quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi elementum neque non ligula ultrices accumsan. Quisque ac mollis turpis.</p>
	<p id="p7">p7Mauris congue gravida sapien, ut viverra justo laoreet pharetra. Aliquam erat volutpat. Integer massa lectus, tincidunt in suscipit nec, ultricies mollis diam. Curabitur feugiat metus vitae lacus faucibus vel condimentum felis commodo. Curabitur eget neque vitae massa malesuada dapibus. Ut molestie, libero non suscipit imperdiet, leo dolor convallis lorem, eu vulputate neque lectus vel purus. Aenean a viverra ipsum. Praesent quis nisl in dolor venenatis venenatis. Nullam varius enim vel ipsum fermentum hendrerit. Aliquam at turpis ut nunc molestie viverra.</p>
	<p id="p8">p8Fusce hendrerit risus iaculis erat vulputate commodo vitae id odio. Nullam dapibus, tortor vel dignissim congue, massa lorem adipiscing erat, eu faucibus enim odio vitae ipsum. Maecenas et est lectus, et fermentum massa. Nulla tellus erat, euismod nec ornare vitae, tristique vitae ipsum. Cras a quam diam, quis tempor odio. Duis eget quam elit. Donec vel orci felis, eu malesuada nulla. Duis placerat justo non odio posuere ultricies. Donec tincidunt bibendum diam, a euismod nulla ullamcorper vel. Mauris lacinia, leo at consectetur cursus, dui metus dictum ligula, at fringilla quam mi at est. Nunc sollicitudin cursus sapien, vitae consequat ante feugiat quis. Donec ac libero ut nisl eleifend tincidunt in in est. Phasellus augue nisl, facilisis sit amet bibendum vitae, euismod id nulla. Nulla volutpat congue mollis. Curabitur commodo lorem ut ligula sollicitudin adipiscing. Morbi a auctor lectus. Morbi viverra adipiscing nibh, ut mattis tortor suscipit et.</p>
	</div>
	<div id="d1" class="flowbox">
	<p id="p1">p1Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec nulla id augue convallis porttitor vitae in metus. Mauris et augue neque. Vivamus auctor convallis lectus non imperdiet. Praesent sit amet felis felis, vel sagittis justo. Proin orci orci, pretium ornare tempor id, adipiscing eget sem. Nam mollis, mauris et suscipit ultricies, turpis augue facilisis dui, ac convallis neque elit ac eros. Maecenas sed tellus elit. In venenatis, erat id tempus feugiat, risus lectus consectetur mi, sit amet blandit massa nibh sit amet tellus. Aliquam erat volutpat. Nam a commodo neque. Integer dictum urna at est convallis ut elementum sem tincidunt. Mauris a purus non neque tempus aliquam. Duis malesuada, purus ut fringilla varius, mauris tellus tristique augue, eu aliquet eros nisl eu felis. Aenean laoreet erat vel metus rutrum sit amet vehicula tortor adipiscing. Fusce tellus dolor, auctor sit amet bibendum vulputate, consectetur nec lacus. Donec accumsan aliquam tellus, a posuere purus pulvinar sit amet. Donec ac odio a orci scelerisque fermentum.</p>
	<p id="p2">p2Donec sit amet felis mi, at facilisis erat. Quisque varius, urna eu congue tempus, magna sapien euismod augue, ut varius elit elit venenatis tortor. Curabitur hendrerit ante at nisl venenatis eget tincidunt tellus consectetur. Nulla arcu libero, iaculis facilisis euismod ac, porta ut ante. Aenean ultrices lobortis odio, vitae ultrices nisl venenatis vitae. Sed mauris orci, condimentum et volutpat nec, ultricies eu urna. Donec et lacus nec felis ultricies ultrices. Ut pharetra, ligula ac convallis ornare, dui metus placerat dolor, a eleifend leo augue id felis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque ut libero at magna sodales congue pulvinar vitae mi. In convallis nisi dictum odio facilisis venenatis.</p>
	<p id="p3">p3Maecenas et tellus ut quam accumsan bibendum sed at nisi. Nulla ultrices tortor ac tortor consectetur vitae gravida lorem ullamcorper. Proin et laoreet ligula. Nunc quis libero nec arcu viverra accumsan. Nunc suscipit, nisl at aliquam tristique, erat est condimentum urna, sed ultrices ante ipsum id tortor. Aenean laoreet mauris in lectus malesuada elementum. Morbi convallis rutrum purus eget luctus. Cras rutrum pretium nibh. Phasellus lobortis justo imperdiet augue gravida gravida. Aliquam scelerisque volutpat leo, eu tempus lacus scelerisque at. Cras tempus eros quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam eu ligula felis, et molestie diam.</p>
	<p id="p4">p4Proin dui libero, rhoncus id lobortis eget, sagittis eget lacus. Maecenas aliquam lorem ut nisl tempus vitae sodales mauris pretium. Mauris in lacus eros, ac tincidunt libero. Nunc orci odio, rutrum ac pellentesque ac, adipiscing sed nisi. Ut volutpat posuere tortor, quis egestas urna posuere eu. Etiam aliquam diam vel odio tempor ullamcorper at vel nibh. Praesent nec ante eget diam pulvinar dictum vel non nisl. Curabitur vel ante at velit scelerisque vulputate. Curabitur lacus ligula, condimentum vel tempus quis, fermentum eget orci. Phasellus id nunc sit amet eros varius varius ut nec velit. Aliquam accumsan dolor ipsum. Ut dui tortor, eleifend sed tincidunt sed, ullamcorper ac arcu. Nam non enim arcu. Nullam vitae porttitor massa. Sed pretium lorem nec massa consequat sit amet pretium magna auctor. Curabitur fringilla dignissim ipsum, a pharetra libero consectetur sit amet.</p>

	<p id="p5">p5Vestibulum ultrices, tellus a facilisis commodo, felis sapien dignissim metus, nec pulvinar erat odio sed dolor. Nam lectus est, congue venenatis suscipit condimentum, feugiat sed nisi. Aliquam non metus sed ante malesuada dictum at nec eros. Aenean ut dolor id purus porta tincidunt a at libero. Nullam mattis rhoncus orci, non posuere diam lacinia vel. Nullam ultricies felis quis nibh molestie ut hendrerit est venenatis. Vivamus sagittis lacus sit amet tortor consequat quis consequat arcu condimentum. Integer ac mi massa. Aenean eu elit enim, consequat lacinia sem. Aliquam sit amet tellus non metus imperdiet feugiat et id lorem. Maecenas pellentesque rutrum ullamcorper. Ut dictum tempus nibh varius porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer et mauris sapien. Curabitur consequat, erat at hendrerit adipiscing, turpis ipsum commodo massa, ac placerat ante nisi pretium eros. Praesent suscipit lorem id ligula vulputate eu ultrices tortor iaculis. In malesuada vehicula condimentum.</p>
	<p id="p6">p6Phasellus arcu sapien, volutpat quis lobortis sit amet, laoreet quis lorem. Vestibulum sit amet dolor mi. Praesent auctor dolor non est fringilla pretium. Aenean sit amet justo augue, in condimentum lacus. Ut ac nulla enim. Ut in urna in diam fringilla tempus non eget sapien. Pellentesque eget nunc nibh. Duis bibendum, purus in bibendum ultrices, tellus nibh suscipit est, at sagittis erat lacus nec ipsum. Aenean laoreet eros non ante venenatis dapibus. Cras posuere adipiscing lorem, in mattis nulla pretium non. Praesent egestas bibendum dui, quis scelerisque arcu imperdiet non. Proin in purus tellus, quis suscipit quam. Aenean suscipit sem in leo imperdiet quis aliquet erat convallis. Cras tincidunt magna convallis purus pretium fringilla viverra justo iaculis. Nullam mauris orci, eleifend ut pretium vitae, rutrum eget dui. Donec vel quam iaculis libero egestas auctor id varius leo. Nullam risus ipsum, commodo ultricies vulputate eu, lacinia id quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi elementum neque non ligula ultrices accumsan. Quisque ac mollis turpis.</p>
	<p id="p7">p7Mauris congue gravida sapien, ut viverra justo laoreet pharetra. Aliquam erat volutpat. Integer massa lectus, tincidunt in suscipit nec, ultricies mollis diam. Curabitur feugiat metus vitae lacus faucibus vel condimentum felis commodo. Curabitur eget neque vitae massa malesuada dapibus. Ut molestie, libero non suscipit imperdiet, leo dolor convallis lorem, eu vulputate neque lectus vel purus. Aenean a viverra ipsum. Praesent quis nisl in dolor venenatis venenatis. Nullam varius enim vel ipsum fermentum hendrerit. Aliquam at turpis ut nunc molestie viverra.</p>
	<p id="p8">p8Fusce hendrerit risus iaculis erat vulputate commodo vitae id odio. Nullam dapibus, tortor vel dignissim congue, massa lorem adipiscing erat, eu faucibus enim odio vitae ipsum. Maecenas et est lectus, et fermentum massa. Nulla tellus erat, euismod nec ornare vitae, tristique vitae ipsum. Cras a quam diam, quis tempor odio. Duis eget quam elit. Donec vel orci felis, eu malesuada nulla. Duis placerat justo non odio posuere ultricies. Donec tincidunt bibendum diam, a euismod nulla ullamcorper vel. Mauris lacinia, leo at consectetur cursus, dui metus dictum ligula, at fringilla quam mi at est. Nunc sollicitudin cursus sapien, vitae consequat ante feugiat quis. Donec ac libero ut nisl eleifend tincidunt in in est. Phasellus augue nisl, facilisis sit amet bibendum vitae, euismod id nulla. Nulla volutpat congue mollis. Curabitur commodo lorem ut ligula sollicitudin adipiscing. Morbi a auctor lectus. Morbi viverra adipiscing nibh, ut mattis tortor suscipit et.</p>
	</div>
	<div class="sep"> </div>
	<div id="d2" class="flowbox">
	</div>
	<div class="sep"> </div>
	<div id="d3" class="flowbox">
	</div>
	</body>
	<script>

	(function($){
	$.fn.flowHeight = function() {
	if(this.prev().length > 0){
	return this.outerHeight(false) + Math.max(parseFloat(this.css("marginTop")),parseFloat(this.prev().css("marginBottom")));
	} else {
	return this.outerHeight(false);
	}
	};
	})(jQuery);

	var continueParagraph = function(d1, d2){
	var numColumns = $(d1).width() / parseFloat($(d1).css("-webkit-column-width"));
	var columnHeight = $(d1).height();
	var firstOverflowingParagraph = null;
	var overflowingParagraphs = [];
	var maxHeight = (numColumns * columnHeight);

	// Find paragraph which is overflowing
	_(d1.find("> *")).reduce(function(accumulatedHeight, elem){
	var $el = $(elem);
	var result = accumulatedHeight + $el.flowHeight();
	var isOverflowing = result > maxHeight;

	if(isOverflowing){
	if(firstOverflowingParagraph === null){
	// This is the first overflowing paragraph, like, ever.
	firstOverflowingParagraph = elem;

	var separator = ". ";
	var contentBackup = $el.html();

	// Chop by sentences
	var sentences = _(contentBackup.split(separator)).map(function(sentence, i, col){
	return sentence + (i==col.length - 1 ? "" : separator);
	});
	var overflow = [];

	// Find ideal chop point
	while(isOverflowing && sentences.length > 0){
	overflow.splice(0,0,sentences.pop());
	var newText = sentences.join("");
	$el.html(newText);
	isOverflowing = (accumulatedHeight + $el.flowHeight()) > maxHeight;
	}

	// Push overflowed sentences into next (newly split-off) paragraph
	if(overflow.length > 0){
	var id = $el.attr("id") + "_clone_" + Math.round(Math.random()*99999999999).toString(16);
	overflowingParagraphs.push($el.clone().attr("id",id).html("oflow" + overflow.join("")));
	}

	// Tidy up sentences whittled to zero
	if(sentences.length===0){
	$el.remove();
	}

	} else {
	overflowingParagraphs.push(elem);
	}
	}

	return result;
	},0);

	_(overflowingParagraphs).each(function(p){
	$(p).remove();
	$(d2).append($(p).clone());
	});
	};

	var continueParas = function(){
	$("#d2 > , #d3 > ").remove();
	$("#d1").html($("#d1_orig").html());
	var d = (new Date()).getTime();
	continueParagraph($("#d1"), $("#d2"));
	continueParagraph($("#d2"), $("#d3"));
	console.log("time",(new Date()).getTime() - d);
	};

	$("#up").click(function(){
	var fontSize = parseInt($("p:first").css("fontSize"));
	var lineHeight = parseInt($("p:first").css("lineHeight"));
	$("p").css({ fontSize: (fontSize + 1) + "px", lineHeight: (lineHeight + 1) + "px" });
	continueParas();
	});

	$("#down").click(function(){
	var fontSize = parseInt($("p:first").css("fontSize"));
	var lineHeight = parseInt($("p:first").css("lineHeight"));
	$("p").css({ fontSize: (fontSize - 1) + "px", lineHeight: (lineHeight - 1) + "px" });
	continueParas();
	});

	continueParas();

	</script>
	</html>
No results found