Webkit columns find visible text range

Question

I have a piece of HTML that I display inside a UIWebView using Webkit style attributes. I use Webkit to display HTML in columns to simulate a book.

Only one column is displayed at a time (one column represents one page). Now I'm trying to find a range of visible HTML so that I can insert a span element right in front of the first visible word.

I managed to get an HTML element that contains the first visible word using the JavaScript function, document.elementAtPoint (possibly the wrong function name) and changed its CSS class. but that is just not enough for me. I need it to be accurate to the first visible word.

The idea is to create a column break at the first visible word, when the font size increases or decreases. I can use JavaScript to figure out which column the item is in and programmatically scroll the user to that column, but first I need to get the item there.

Can anybody help me?

Answer 1

The CSSOM View module specification adds caretPositionFromPoint(x, y) to the Document interface, which returns the caret position for the specified x and y co -ordinates. WebKit supports caretRangeFromPoint , a close counterpart from an earlier specification that returns Range .

It is possible that the word was moved across two columns, so instead of wrapping the first word in the gap, you might consider a more naive approach to inserting a span directly at the cursor point. Here is an example:

 var caretPos = document.caretRangeFromPoint(x, y); if (caretPos) caretPos.insertNode(document.createElement('span')); 

Demo (only for WebKit to insert intervals): http://jsfiddle.net/Jordan/Aw9aV/

One final consideration: it is possible that WebKit will eventually stop supporting caretRangeFromPoint instead of caretPositionFromPoint ; if so, you will need to adapt your code. Also note that the latter returns a CaretPosition , which the insertNode method cannot implement. The spectrum is still on WD, so remember that it is still in motion.

Answer 2

Ok, foot is completely sure what you are doing now, but at least I have to give some useful tips, since I have some experience creating page view systems in javascript.

• First of all, in CSS3 you can define https://developer.mozilla.org/en/CSS3_Columns columns that automatically split the content into different columns within the same element (where one column has the full width of uiwebview) and then add view controls that move the entire element containing this element (using css3 3d translations to smoothly accelerate hardware acceleration, and you know the width of the columns, so you don’t have to worry about the first word on the page). In this case, you do not need to worry about dividing the column into yourself. (Although, as I said, I'm not sure to what extent you are already doing this).
• Alternatively, you can wrap all your content with small inline blocks (as was done in previous versions of the columns) or even up to one single inline element, each of which contains one word. (Although this no longer seems necessary)
• Finally, work is being done on http://www.w3.org/TR/css3-regions/ , which will make it even easier in the future, but so far it is only available in the chrome state and ie10

On the other hand, you may already be doing this, or I might miss the point, in which case I will need to see the code before I can give you a more specific answer. (I can think of various javascript tricks for working with letters in the text, but in your case this does not seem necessary)