Reputation: 7032
I have a page that presents a long article for comfortable reading. I would like to break the text into columns on wide screens, but I don't want to make users scroll all the way to the bottom of the page and then back up to the top again after finishing each column.
Is there a way, without using JavaScript, to automatically split the article into vertical sections ('pages') that are short enough to fit entirely within the viewport? Here's some ASCII art to illustrate:
+-------------------------------------------------------------+
| === Some Title === |
| |
| You think water moves fast? it out. Now we took an oath, |
| You should see ice. It moves that I'm breaking now. We |
| like it has a mind. Like it said we'd say it was the |
| knows it killed the world snow that killed the other |
| once and got a taste for two, but it wasn't. Nature |
| murder. After the avalanche, is lethal but it doesn't |
| it took us a week to climb hold a candle to man. |
| out. Now, I don't know |
| exactly when we turned on Like you, I used to think |
| each other, but I know that the world was this great |
| seven of us survived the place where everybody lived |
| slide... and only five made by the same standards I did, |
+-------------------------------------------------------------+
| then some kid with a nail Dr. Wu inserted a gene that |
| showed me I was living in makes a single faulty enzyme |
| his world, a world where in protein metabolism. The |
| chaos rules not order, a animals can't manufacture the |
| world where righteousness is amino acid lysine. Unless |
| not rewarded. That's Cesar's they're continually supplied |
| world, and if you're not with lysine by us, they'll |
| willing to play by his rules, slip into a coma and die. |
| then you're gonna have to pay |
| the price. Do you see any Teletubbies in |
| The lysine contingency - here? Do you see a slender |
| it's intended to prevent the plastic tag clipped to my |
| spread of the animals is case shirt with my name printed on |
| they ever got off the island. it? |
+-------------------------------------------------------------+
The lines represent the height of the viewport. The columns end at the bottom of the viewport and the text flows to the top of the next column, which begins at the top of the viewport. Once that 'page' of text has been read, the user scrolls down to the next one and begins again. This allows the text to be split into columns without requiring lots of extra scrolling. On a large screen, the 'pages' would be tall, but on a small screen they would be short enough to fit within the viewport.
A good solution doesn't have to be perfectly semantic, but shouldn't require any JavaScript.
Upvotes: 1
Views: 644
Reputation: 629
I played a bit around. It just works with plain text, but is responsive.
(function($) {
$.fn.fitcol = function(options) {
changes = function(el) {
var $el = $(el),
settings = $.extend({
intendedheight: $(window).height() - ($el.outerHeight()-$el.height()), // set default intended height (rough estimation: height of window - padding and border)
}, options),
height = $el.height(),
ratio = height / settings.intendedheight,
text = $el.text(), //clear all inner html (should be fixed) currently needed in case of window resize
length = text.length,
intendedlength = Math.floor(length / ratio),
i = 1,
html = '</div><div class="column">'; //code for a breakpoint
text = '<div class="column">' + text;
var correction = 20;
while((intendedlength * i) + correction < text.length) { // loop to put breakpoints into the text
var j = 0
while(text.charAt((intendedlength * i) + correction) !== ' ' && j<= 20) { //loop so we don't break words
correction--;
j++;
}
text = text.substr(0, (intendedlength * i) + correction ) + html + text.substr((intendedlength * i) + correction);
correction += html.length; // we are changing the length of text when we add html
i++;
}
text = text + '</div>';
$el.removeClass('column');
$el.html(text);
};
//make it responsive
return this.each(function() {
var that = this;
$(window).resize(function() {
changes(that);
});
changes(this);
});
};
}(jQuery));
$('.container').fitcol();
See it at http://codepen.io/wudi96/pen/doXYrv
It's very experimental and far from beeing optimized.
Would be nice to use together with panelSnap http://guidobouman.github.io/jquery-panelsnap/.
Upvotes: 3
Reputation: 342
Honestly, I think the best answer to this one is to avoid pagination altogether. People are quite used to reading single column blogs, news stories, articles etc. I'd just set max-width:800px; width:95%; margin:0 auto;
and have it as one long stream.
This might cause issues if you have loads of images, but can be solved by only loading those that are needed, see lazy loading.
That's a personal opinion. Remember pages can be as long as you like, pagination is for books ;)
Good luck.
Upvotes: -2
Reputation: 2651
You want css columns and you just need to put the text into different divs in groups. here is a jsfiddle that shows it. Here is my css:
.mydiv
{
-moz-column-count:2; /* Firefox */
-webkit-column-count:2; /* Safari and Chrome */
column-count:2;
}
Upvotes: 1
Reputation: 2503
I think that http://quirksmode.org/css/columns/ is what you are looking for.
See Example: http://www.w3.org/TR/css3-multicol/#the-multi-column-model
Upvotes: 0