Las columnas de Webkit encuentran range de text visible

Tengo un fragment de HTML que estoy mostrando dentro de un UIWebView utilizando los attributes de hoja de styles de Webkit. Utilizo Webkit para mostrar el HTML en columnas para simular un libro.

Solo una columna es visible a la vez (una columna representa una página). Ahora, estoy tratando de encontrar el range del HTML visible para poder insert un elemento span justo antes de la primera palabra visible.

Logré get el elemento HTML que contiene la primera palabra visible utilizando la function JavaScript, document.elementAtPoint (podría tener el nombre de la function mal), y cambié su class CSS. pero eso no es lo suficientemente preciso para mí. Necesito que sea preciso hasta la primera palabra visible.

La idea es crear un salto de columna en la primera palabra visible cuando se aumenta o disminuye el tamaño de la fuente. Puedo usar JavaScript para descubrir en qué columna se encuentra el elemento, y desplazar el usuario por progtwigción a esa columna, pero primero necesito get el elemento allí.

¿Alguien puede ayudarme?

La especificación del module CSSOM View agrega caretPositionFromPoint(x, y) a la interfaz del Document , que devuelve una position de intercalación para las coorderadas x e y especificadas. WebKit admite caretRangeFromPoint , un análogo cercano a una especificación anterior, que devuelve un Range .

Es posible que la palabra se haya dividido en guiones y, por lo tanto, se extienda por dos columnas, de modo que, en lugar de envolver la primera palabra en un intervalo, tal vez desee considerar el enfoque más ingenuo de insert el span directamente en el punto del cursor. He aquí un ejemplo:

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

Demo (WebKit solo haga clic para insert vanos) : http://jsfiddle.net/Jordan/Aw9aV/

Una consideración final: es posible que WebKit eventualmente deje de soportar caretRangeFromPoint en lugar de caretPositionFromPoint ; De ser así, necesitará adaptar su código. También tenga en count que este último devuelve una CaretPosition que puede no implementar el método insertNode . La especificación todavía está en WD, así que tenga en count que todavía está en flujo.

Ok, no sé muy bien qué está haciendo actualmente, pero al less debería poder dar algunos consejos útiles, ya que tengo experiencia desarrollando sistemas de navigation de páginas en JavaScript.

  • En primer lugar, en CSS3 puede definir columnas https://developer.mozilla.org/en/CSS3_Columns , que dividirán automáticamente el contenido en diferentes columnas dentro de un solo elemento (donde una sola columna tiene el ancho completo de la vista de file ) y luego agregue controles de navigation que muevan todo el elemento que contiene el elemento (usando traducciones css3 3d para un movimiento acelerado de hardware suave y conoce el ancho de las columnas para que no tenga que preocuparse por la primera palabra de la página) . En ese caso, no necesita preocuparse por dividir los saltos de columna usted mismo. (Aunque, como dije, no estoy seguro de hasta qué punto ya lo está haciendo).
  • Alternativamente, puede decidir envolver todo su contenido en pequeños bloques en línea (como lo hicieron las implementaciones de columnas anteriores) o incluso hasta el punto de elementos individuales en línea, cada uno con una sola palabra. (Aunque esto ya no parece necesario)
  • Por último, se está trabajando en http://www.w3.org/TR/css3-regions/, lo que hará que esto sea aún más fácil en el futuro, pero por ahora solo está disponible en chrome y ie10

Por otro lado, es posible que ya estés haciendo esto o me pueda estar perdiendo el punto, en cuyo caso necesitaría ver un código antes de que pueda darte una respuesta más específica. (Puedo pensar en varios trucos de JavaScript para trabajar con letras dentro de un text, pero ninguna parece necesaria en tu caso)