Колонки Webkit находят диапазон видимого текста - PullRequest
Новая
       9

Колонки Webkit находят диапазон видимого текста

4 голосов
/ 23 марта 2012

У меня есть фрагмент HTML, который я отображаю внутри UIWebView с использованием атрибутов таблицы стилей Webkit. Я использую Webkit для отображения HTML в столбцах, чтобы смоделировать книгу.

Одновременно виден только один столбец (один столбец представляет одну страницу). Теперь я пытаюсь найти диапазон видимого HTML-кода, чтобы я мог вставить элемент span прямо перед первым видимым словом.

Мне удалось получить элемент HTML, который содержит первое видимое слово, с помощью функции JavaScript document.elementAtPoint (возможно, имя функции указано неправильно) и изменил его класс CSS. но это не достаточно точно для меня. Мне нужно, чтобы оно было точным до первого видимого слова.

Идея заключается в создании разрыва столбца в первом видимом слове, когда размер шрифта увеличивается или уменьшается. Я могу использовать JavaScript, чтобы выяснить, в каком столбце находится элемент, и программно прокрутить пользователя до этого столбца, но сначала мне нужно получить элемент там.

Кто-нибудь может мне помочь?

Ответы [ 2 ]

2 голосов
/ 26 марта 2012

Спецификация CSSOM View Module добавляет caretPositionFromPoint(x, y) к интерфейсу Document, который возвращает позицию каретки для указанных x и y co ординаты. WebKit поддерживает caretRangeFromPoint, близкий аналог из более ранней спецификации, который возвращает Range.

Возможно, слово было дефисировано и, таким образом, охватывает два столбца, поэтому вместо переноса первого слова в промежуток вы можете рассмотреть более наивный подход, заключающийся в вставке span непосредственно в точку курсора. Вот пример: 

var caretPos = document.caretRangeFromPoint(x, y);

if (caretPos)
    caretPos.insertNode(document.createElement('span'));

Демонстрация (только WebKit - нажмите для вставки пролетов) : http://jsfiddle.net/Jordan/Aw9aV/

И последнее замечание: вполне возможно, что WebKit в конечном итоге перестанет поддерживать caretRangeFromPoint вместо caretPositionFromPoint; если это так, вам нужно будет адаптировать свой код. Также обратите внимание, что последний возвращает CaretPosition, который может не реализовывать метод insertNode. Спецификация все еще в WD, так что помните, что она все еще в движении.

1 голос
/ 26 марта 2012

Хорошо, nog полностью уверен, что вы в настоящее время делаете, но по крайней мере я должен дать несколько полезных советов, так как у меня есть некоторый опыт построения систем просмотра страниц в javascript.

  • Прежде всего, в CSS3 вы можете определить столбцы https://developer.mozilla.org/en/CSS3_Columns, которые будут автоматически разбивать содержимое на разные столбцы в пределах одного элемента (где один столбец имеет полную ширину uiwebview) и затем добавлять элементы управления просмотром, которые перемещают весь элемент, содержащий элемент (используя трехмерные переводы css3 для плавного аппаратного ускорения движения, и вы знаете ширину столбцов, поэтому вам не нужно беспокоиться о том, какое первое слово на странице). В этом случае вам не нужно беспокоиться о разбиении колонки на части. (Хотя, как я уже сказал, я не уверен, в какой степени вы уже делаете это).
  • В качестве альтернативы вы можете решить обернуть весь ваш контент в небольшие встроенные блоки (как это делали более старые реализации столбцов) или даже до точки отдельных встроенных элементов, каждый из которых содержит одно слово. (Хотя это больше не нужно)
  • Наконец, ведется работа над http://www.w3.org/TR/css3-regions/, которая сделает это еще проще в будущем, но пока она доступна только в Chrome и ie10

С другой стороны, вы, возможно, уже делаете это, или я могу упустить момент, и в этом случае мне нужно будет увидеть какой-то код, прежде чем я смогу дать вам более конкретный ответ. (Я могу придумать различные приемы JavaScript для работы с буквами в тексте, но в вашем случае они не кажутся необходимыми)

...