Get text in CSS3 column?

Question

I'm using CSS3's support for columns support in a project (so far I've found it much more robust and dependable than most JavaScript solutions out there).

Question: Is it possible to get the text that is in a specific column, in any way?

Seems not quite ready for prime time: http://caniuse.com/#feat=multicolumn — Diodeus - James MacFarlane, Mar 18 '13 at 16:26
Maybe this will help http://stackoverflow.com/questions/9430124/how-to-get-content-of-a-specific-css-column — imkost, Mar 18 '13 at 16:28
@DreamEater Because CSS3's support is usually more reliable/faster in my test cases. — mattsven, Mar 18 '13 at 16:28
@Diodeus I'm using it for Mobile Safari, which has had it for awhile. — mattsven, Mar 18 '13 at 16:29
@imkost: Good link and even a possible duplicate, only it has no valid answer yet :-( — Bergi, Mar 18 '13 at 16:33

mattsven · Accepted Answer · 2014-04-03T13:21:54.013

7

And...what, two months later? I finally found the answer to this question. It's reliant on document.caretRangeFromPoint (Webkit) or document.caretPositionFromPoint.

var getAllTextInColumn = function(rect){
    /*
        rect should be the size and x,y of the column
        { top, left, width, height }
    */

    if(document.caretRangeFromPoint){
        var caretRangeStart = document.caretRangeFromPoint(rect.left, rect.top);
        var caretRangeEnd = document.caretRangeFromPoint(rect.left+rect.width-1, rect.top+rect.height-1);
    } else {
        return null;
    }

    if(caretRangeStart == null || caretRangeEnd == null) return null;

    var range = document.createRange();
    range.setStart(caretRangeStart.startContainer, caretRangeStart.startOffset);
    range.setEnd(caretRangeEnd.endContainer, caretRangeEnd.endOffset);

    return range.toString();
};

edited Apr 03 '14 at 13:21

answered Jun 04 '13 at 05:42

mattsven

22,305
11
68
104

And that column has to be on-screen, I think range is relative to viewport – mattsven Sep 29 '13 at 10:05
1

You can make an iframe off the screen and use this code and then the column doesn't have to be on-screen – Michael Bates Apr 03 '14 at 08:08
@MichaelBates I'm not saying it doesn't (I'm sure it does), just not sure how many use-cases that would fit into. – mattsven Apr 04 '14 at 02:11
@mattsven this is really nice, but how do i get `rect` of a column? – mehdok Apr 04 '15 at 16:22
You're going to have to calculate that from whatever element is being split into columns. Try [`element.getBoundingClientRect()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) for starters. – mattsven Apr 04 '15 at 18:39
Works perfectly except when you have multiple elements that have been split across columns. A table, flex boxes, floats with text between them, etc. – Silviu-Marian May 25 '17 at 15:27

score 1 · Answer 2 · answered Mar 18 '13 at 17:12

1

My only guess is to start replacing spaces with a SPAN, then detecting when the vertical position of that SPAN gets smaller, then you know you're in the next column. This last SPAN becomes a column marker.

You can then copy the text that is between the beginning/end and/or a column maker.

answered Mar 18 '13 at 17:12

Diodeus - James MacFarlane

112,730
33
157
176

Interesting idea. How would you suggest doing that? – mattsven Mar 18 '13 at 17:19
I'd use jquery. Replace the spaces with , then use jQuery's .each to loop through the, set, looking at the offsetTop of each element. – Diodeus - James MacFarlane Mar 18 '13 at 17:22
I had a similar idea, but I'm looking for the fastest way to do it. My method here s all words (jQuery, haha). https://gist.github.com/matt-curtis/5189032 – mattsven Mar 18 '13 at 17:24
It spans words, though, because it's not immediately apparent to me on how to get the two space nodes. I guess adjacent text nodes? – mattsven Mar 18 '13 at 17:26
I think narrowing the selector to the element wrapping the text in question would be a bit faster than the entire body. Also, replacing spaces as a string and reinserting the whole thing back into the DOM in one go is WAY faster than maipulating the DOM in every loop. DOM manipulations are SLOW. (forget the nodes, treat it as a blob of text until you start reading the positions of the elements) – Diodeus - James MacFarlane Mar 18 '13 at 17:27
I should mention that $body isn't actually apart of the DOM when I manipulate it - it's an HTML string actualized by jQuery. – mattsven Mar 18 '13 at 17:33
Without tags you cannot identify the position of an element. I think you're on the right track though. – Diodeus - James MacFarlane Mar 18 '13 at 17:35
I mean my content HTML string might include s, or s, and I want to avoid those. – mattsven Mar 18 '13 at 17:36
Ah, I get it. A REGEX could ensure you're outside of < > brackets. – Diodeus - James MacFarlane Mar 18 '13 at 17:37
1

True, but I haven't found any fail-safe ones, and there's the repeated warning of "don't parse html with regex..." – mattsven Mar 18 '13 at 18:48

Get text in CSS3 column?

2 Answers2

Linked