Как разбить документы HTML в страницы для электронной книги?
Для приложения электронной книги iPhone я должен разбить произвольно длинные документы HTML в страницы, которые соответствуют точно на одном экране. Если я просто использую UIWebView для этого, самые нижние строки имеют тенденцию быть отображенными только частично: остальное исчезает от края представления.
Таким образом, я предполагаю, что должен был бы знать, сколько полных строк (или символы) будет отображено UIWebView, учитывая источник HTML, и затем подаст его точно правильный объем данных. Это, вероятно, включает большое вычисление, и пользователь также должен смочь изменить шрифты и размеры.
Я понятия не имею, возможно ли это даже, хотя приложения как Строка файла конфигурации берут HTML (epub) файлы и нумеруют страницы их приятно. Это - долгое время, так как я посмотрел на JavaScript, на который будет опция, которая стоит посмотреть?
Любые предложения очень ценятся!
обновление
Таким образом, я натолкнулся на возможное решение, с помощью JavaScript для аннотирования DOM-дерева размерами и положениями каждого элемента. Должно затем быть возможно реструктурировать дерево (использование встроенного XSLT или JavaScript), сократив его на страницах, которые соответствуют точно на экране.
Остающаяся проблема здесь состоит в том, что это всегда повреждает страницу на границах абзаца, так как нет никакого доступа к тексту на более низком уровне, чем P-элемент. Возможно, это может быть исправлено путем парсинга текста в слова, инкапсуляции каждого слова в Теге span, повторения измерительной процедуры выше и затем только отображения элементов ПРОМЕЖУТКА, которые соответствуют на экран, вставляя остающиеся впереди следующей страницы.
Все это звучит скорее сложным. Я говорю какие-либо разумные вещи? Существует ли более простой путь?
3 ответа
Вам следует взглянуть на модуль CSS PagedMedia: http://www.w3.org/TR/css3-page/ { {1}} CSS3 также поддерживает многоколоночные макеты (Google для "css3-multicol". У меня недостаточно Кармы, чтобы включить сюда вторую ссылку: -)
О вашем обновлении: как насчет макета одну страницу, затем используйте DIV с переполнением: скрыто для текстовой части. Следующим шагом будет наложение поверх этого прозрачного элемента, который будет программно прокручивать внутреннее содержимое пикселей DIV PAGE_HEIGHT вверх или вниз в соответствии с некоторыми элементами управления (или жестами) навигации.
Другой вариант - иметь родительский
Это работает на 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>
Предложения по использованию нескольких цветов в CSS очень интересны! Тем не менее, и я надеюсь, что можно ответить другим вопросом: как вы перейдете от разделения одного или нескольких длинных элементов
на столбцы к тому, чтобы один из этих столбцов отображался в WebView? Модель DOM не изменилась, поэтому вы не можете выбрать элемент и отобразить его. Что мне не хватает?