Как разбить HTML-документы на страницы для электронных книг? - PullRequest
Новая
       29

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

10 голосов
/ 04 мая 2010

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

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

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

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

обновление

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

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

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

Ответы [ 3 ]

7 голосов
/ 09 мая 2010

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

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

3 голосов
/ 12 мая 2010

Другой вариант - иметь родительский элемент <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>
0 голосов
/ 20 мая 2010

Многоцветные предложения CSS очень интересны! Тем не менее, и я надеюсь, что можно ответить другим вопросом: как бы вы перешли от разбиения одного или нескольких длинных

элементов на столбцы к отображению одного конкретного из этих столбцов в WebView? DOM не изменился, поэтому вы не можете выбрать элемент и отобразить его. Чего мне не хватает?

...