I'm so near I can taste it, but still I can't have it :)
I love the Evernote Clearly Chrome extension, which allows me to focus on the content I need. However, on my 1920x1200 screen I'd rather have it display the content using two columns, not one.
Clearly does not have such a built it "columns" setting. Luckily it does have a "Custom Theme" option that supports Custom CSS.
I almost get it to work, but not quite. When I use
p {-webkit-column-count: 2; }
every paragraph is split into two columns which means you have like three or four lines on the left side, then you have to switch to the right side. Then back to the left, back to the right and so on.
If, on the other hand I use
div.page_content {-webkit-column-count: 2; }
then the whole document is split into two columns. A billion lines are displayed on the left column so you have to scroll-down and page-down a lot, then you have to go back to the top for the next billion lines.
Obviously, this is not what I want. What I want is that, assuming the number of lines displayed on the screen is L, then the first L lines will be displayed on the first column, then the second L lines will be displayed on the second column, then the third L lines will be displayed on the first column of the second page, and so on.
So, my question is, Is there a (CSS) method to split a sequence of paragraphs in a div into "pages", and split every such page into two or more columns?
Edit:
I use Martin Fowler's "Mocks Aren't Stubs" as the test-bad for solutions.
The use of large Verdana font is from the article "Clearly, you need clearly".
Forcing column breaks after headings (and, by extension, before and after code blocks marked as "pre"formatted) is from the article "Avoid breaking of columns inside CSS3 multi-column layouts"
The current style sheet I'm using, following Meagan Lynn's answer (but see my comment there), is:
div.page_content {-webkit-column-count: 2; }
h2, h3, h4, h5, pre {-webkit-column-break-before:always; }
pre, p:nth-child(2n) {-webkit-column-break-after: always;}
Update: Verified that also works with safaribooksonline - See
.
Contrast with the "native" display
.
Not perfect but, IMHO, better. Especially when the two columns are "full", as in
: