Как разбить HTML-документы на страницы для ebook?

Для приложения iPhone ebook мне нужно сломать произвольно длинные HTML-документы на страницы, которые точно соответствуют одному экрану. Если я просто использую UIWebView для этого, самые нижние строки имеют тенденцию отображаться только частично: остальное исчезает с края обзора.

Поэтому я предполагаю, что мне нужно знать, сколько полных строк (или символов) будет отображаться UIWebView, учитывая исходный HTML-код, а затем подавать его точно в нужное количество данных. Это, вероятно, связано с большим количеством вычислений, и пользователь также должен иметь возможность изменять шрифты и размеры.

Я понятия не имею, возможно ли это, хотя такие приложения, как Stanza, принимают файлы HTML (epub) и красиво разбивают их на страницы. Это долгое время с тех пор, как я посмотрел на JavaScript, можно ли это рассмотреть?

Любые предложения очень ценятся!

Обновление

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

Оставшаяся проблема заключается в том, что это всегда нарушает страницу на границах абзаца, поскольку доступ к тексту на более низком уровне, чем P-элемент, отсутствует. Возможно, это можно устранить, проанализировав текст в словах, инкапсулируя каждое слово в теге SPAN, повторив вышеописанную процедуру измерения, а затем только отображая элементы SPAN, которые вписываются в экран, вставляя оставшиеся в начале следующего стр.

Все это звучит довольно сложно. Я говорю какой-то смысл? Есть ли более простой способ?

Ответ 1

Вы должны посмотреть на модуль PagedMedia CSS: http://www.w3.org/TR/css3-page/ CSS3 также поддерживает многоколоночные макеты (google для "css3-multicol". Мне не хватает кармы, чтобы включить вторую ссылку здесь: -)

О вашем обновлении: как сделать макет одной отдельной страницы, а затем использовать DIV с переполнением: скрытый для текстовой части. Следующим шагом было бы наложить прозрачный элемент поверх этого, который будет программно прокручивать внутреннее содержимое пикселей DIV PAGE_HEIGHT вверх или вниз в соответствии с некоторыми элементами управления (или жестами) навигации.

Ответ 2

Другой вариант - иметь родительский <div> с несколькими столбцами css3: link1, link2.
Это работает на Android:

<style type='text/css'>
div {
    width: 1024px; // calculated
    -webkit-column-gap: 0px;
    -webkit-column-width: 320px; // calculated
    }
p {
    text-align: justify;
    padding:10px;
    }
</style>

Ответ 3

Многократные предложения CSS очень интересны! Тем не менее, и я надеюсь, что это нормально, чтобы ответить другим вопросом: как бы вы перешли от разделения одного или более длинных <p> элементов в столбцы, чтобы один конкретный из этих столбцов отображался в WebView? DOM не изменился, поэтому вы не можете выделить элемент и отобразить его. Что мне не хватает?