Text pagination inside a DIV with image

Question

I want to paginate a text in some div so it will fit the allowed area
Logic is pretty simple:
1. split text into words
2. add word by word into and calculate el

Answer 1

Except the fact that there are many more variables to calculate,not just only the word width & height, but also new lines,margins paddings and how each browser outputs everything.

Then by adding an image (almost impossible if the image is higher or larger as the max width or height) if it's smaller it also has margins/paddings. and it could start at the end of a line and so break up everything again.basically only on the first page you could add an image simply by calculating it's width+margin and height+margin/lineheight. but that needs alot math to get the wanted result.

Said that i tried some time ago to write a similar script but stopped cause of to many problems and different browser results.

Now reading your question i came across something that i read some time ago:

-webkit-column-count 

so i made a different approach of your function that leaves out all this calculations.

don't judge the code as i wrote it just now.(i tested on chrome, other browsers need different prefixes.)

var div=document.getElementsByTagName('div')[0].firstChild,
maxWidth=300,
maxHeigth=200,
div.style.width=maxWidth+'px';
currentHeight=div.offsetHeight;
columns=Math.ceil(currentHeight/maxHeigth);
div.style['-webkit-column-count']=columns;
div.style.width=(maxWidth*columns)+'px';
div.style['-webkit-transition']='all 700ms ease';
div.style['-webkit-column-gap']='0px';
//if you change the column-gap you need to
//add padding before calculating the normal div.
//also the line height should be an integer that
// is divisible of the max height 

here is an Example

http://jsfiddle.net/HNF3d/10/

adding an image smaller than the max height & width in the first page would not mess up everything.

and it looks like it's supported by all modern browsers now.(with the correct prefixes)