Question on Browser Independant Multi-Column Text Paragraph Flower. (Works in IE8 IE9)
Some time ago, there was a question about CSS3 multi-columns not being supported in IE9, or any other IE for that matter. That produced the following quick simple and very functional answer. I want to brush on that and improve it as it has flaw that the bottom line is not justified. Can you see whats missing from making the bottom text line justified too? Actually, the coolest thing woulld be to make it sense when there is LESS than half a sentence on any given line, followed by a dot, not to justify that line. Sothat the next paragraph is more nicely visible. What do you think of that? Or perhaps you have better ideas to improve this browser-independant multi-column script?
Live Test Result url
var text=document.getElementById('text').innerHTML;
var words=text.split(" ");
var wordc=words.length;
var length=words.join("").length;
var cols= new Array("","","");
var colc= new Array(0,0,0);
var col=0;
for(var i=0; i<wordc; i++){
cols[col]+=words[i]+" ";
if( (col开发者_开发百科c[col]+=words[i].length)>length/3)col++;
}
document.getElementById('text').innerHTML="<p>"+cols[0]+"</p><p>"+cols[1]+"</p><p>"+cols[2]+"</p>";
Most of the implementation I see is using div + p, check treesaver.js:
http://treesaverjs.com/
And if you check the specification of css3 multiple column, you will know there are more properties for columned layout.
Here's my multi-browser fully-working solution.
First download this js library: http://randysimons.nl/overige/multicolumn/multicolumn.js (MultiColumn text reflower v1.4 by Randy Simons)
Then use code as in this example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MultiColumn example</title>
<style type="text/css">
/*Initial definitions for base column.
Define the (minimum) width here, and optionally a padding */
.columnized div {
float: left;
padding: 10px; /* You may use a padding... but thanks to IE you can only use pixels! */
position: relative; /* Needed when using a 'read-on'-text */
text-align: justify;
text-align-last: justify;
margin: 0; /* Don't use a margin! */
/*width: 0000px; /* When using a fixed number of columns, you can omit the width. Otherwise it must be set! This will be the *minimum* width of a column*/
}
.columnized div P {
text-align: justify;
text-align-last: justify;
}
.columnized div P:after {
content: "";
display: inline-block;
width: 100%;
}
</style>
<script type="text/javascript" src="MultiColumn.js"></script>
<script type="text/javascript">
//Minimalistic settings. You can tweak the settings by re-assigning the defaults in MultiColumnSettings.
multiColumnSettings=new MultiColumnSettings;
multiColumnSettings.classNameScreen='columnized';
multiColumnSettings.numberOfColumns=3;
window.onload = function () {
new MultiColumn(document.getElementById("main1"),multiColumnSettings);
}
</script>
</head>
<body>
<div id="main1" style="width:550px;font-family:arial">
<div>
<P> <!-- P is required! -->
I managed to do something like this but again, not in CSS, I used PHP to count words and split the text. Unfortunately counting words is a pretty bad way of going about doing it, since some words are longer than others and the columns don't match up. My design was inspired by the IHT website. It's not very hard to implement in PHP. I managed to do something like this but again, not in CSS, I used PHP to count words and split the text. Unfortunately counting words is a pretty bad way of going about doing it, since some words are longer than others and the columns don't match up. My design was inspired by the IHT website. It's not very hard to implement in PHP. I managed to do something like this but again, not in CSS, I used PHP to count words and split the text. Unfortunately counting words is a pretty bad way of going about doing it, since some words are longer than others and the columns don't match up. My design was inspired by the IHT website. It's not very hard to implement in PHP. My design was inspired by the IHT website. It's not very hard to implement in PHP. I managed to do something like this but again, not in CSS, I used PHP to count words and split the text. Unfortunately counting words is a pretty bad way of going about doing it, since some words are longer than others and the columns don't match up. My design was inspired by the IHT website. I used PHP to count words and split the text. Unfortunately counting words is a pretty bad way of going about doing it, since some words are longer than others and the columns don't match up. My design was inspired by the IHT website. It's not very hard to implement in PHP. My design was inspired by the IHT website. It's not very hard to implement in PHP. I managed to do something like this but again, not in CSS, I used PHP to count words and split the text. Unfortunately counting words is a pretty bad way of going about doing it, since some words are longer than others and the columns don't match up. My design was inspired by the IHT website.
<BR>
</div>
</div>
</body>
</html>
Hope it helps! :-)
加载中,请稍侯......
精彩评论