View Single Post
Old 09-26-2012, 12:10 PM   #143
anoved
Enthusiast
anoved ought to be getting tired of karma fortunes by now.anoved ought to be getting tired of karma fortunes by now.anoved ought to be getting tired of karma fortunes by now.anoved ought to be getting tired of karma fortunes by now.anoved ought to be getting tired of karma fortunes by now.anoved ought to be getting tired of karma fortunes by now.anoved ought to be getting tired of karma fortunes by now.anoved ought to be getting tired of karma fortunes by now.anoved ought to be getting tired of karma fortunes by now.anoved ought to be getting tired of karma fortunes by now.anoved ought to be getting tired of karma fortunes by now.
 
anoved's Avatar
 
Posts: 41
Karma: 1005240
Join Date: Feb 2012
Device: Kindle Keyboard, iPhone
Multi column stylesheet

Here is a stylesheet I use to display text in multiple columns. The columns are as tall as the viewer window and you scroll horizontally to see more columns of text. The vertical position of lines of text does not change as you scroll. On a big computer screen, I like reading this way. (I've learned that some people strongly disagree. If that's you, cool - just move along!)



Works only with "flow" mode, not paged mode. I've only tested it with a few relatively simple ebooks. It may interact unpredictably with more complex formatting.

Horizontal scrolling works nicely with my trackpad, but unfortunately vertical scrolling (which jumps between chapters) seems too sensitive for my control, so I use the arrow keys. (Although that's not really specific to this stylesheet.)

Code:
html {
	height: 100%;
	width: 100%;
	padding: 0;
	margin: 0;
}

body {
	height: 100%;
	margin: 0;
	padding: 0;

	/* column-width seems to be treated as a suggestion; actual width
	is varied to fit an even number of columns within screen width. */
	-webkit-column-width: 20em;
	-webkit-column-count: auto;
	-webkit-column-gap: 1.5em;

	line-height: 1.5em;
}

/* This is a fudge fix to prevent the children of the body tag from
defining margins that overlap the body height, which causes small
but annoying amounts of vertical scroll. Uses a wildcard because
I don't necessarily know how any particular page is structured. */ 
body > * {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
I've also posted the code at github.com/anoved/McCalibre, where I may post any future updates.

Note this stylesheet just affects the layout of the text. You can still append additional styles for specific font/color/etc effects.
anoved is offline   Reply With Quote