3

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

here.

Contrast with the "native" display

here.

Not perfect but, IMHO, better. Especially when the two columns are "full", as in

here:

2 Answers 2

4
+50

So I was digging around and found something the will hopefully help you out.

Try using

p:nth-child(4n) {
   -webkit-column-break-after: always;
}

This should break to a new column after ever group of four p tags.

Used in conjunction with div.page_content {-webkit-column-count: 2;} you will hopefully get what you are looking for ;)

Source: Select every Nth element in CSS

1
  • This is definitely a step forward or, more precisely - aside :) What happens is that Chrome creates an infinite number of columns! After each two paragraphs it creates another column to the right! So, what I wanted was an book-like arrangement where each "page" should have two columns, and you'd use "page down" to move to the next page. What I got was one very wide page, with a large number of columns. Surprisingly, however, this is very good!! Just use the right/left keys to scroll. Not what I wanted but very usable!
    – Avi
    Jul 7, 2014 at 11:29
3

Your missing piece is

p, pre {-webkit-column-break-after: column;}

Unfortunately modern browsers, including Chrome, don't support it yet.

This article shows how it should, and eventually will, look like: http://www.w3.org/TR/css3-multicol/#overflow

Here is the current support for this property: http://caniuse.com/multicolumn

2
  • How it this different than Meagan's "pre, p:nth-child(2n) {-webkit-column-break-after: always;}"? Went to the link, but did not understand. :(
    – Avi
    Jul 13, 2014 at 18:34
  • 1
    Webkit deviates from the standard, and uses "always" instead of "column" or "page". It looks like some kind of placeholder for column breaking until webkit fully supports it. Until support is fully added, you're probably going to see weird quirks like the lack of wrapping overflow which is what you're looking for. So Meagan's answer is using the current webkit support, while mine is using the web standard. Jul 13, 2014 at 20:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.