Подтвердить что ты не робот

Разделить строку html на несколько страниц

Я пытаюсь разработать приложение для чтения электронных книг для приложений Android. Мне нужно разделить длинную строку html (отправленную сервером во время выполнения) на страницы на лету на основе доступного пространства экрана. Содержимое Html - это статья, которая может содержать текст, изображения, видео и т.д. Я использую WebView для отображения html.

Может ли кто-нибудь дать мне направление в отношении того, как это может быть достигнуто.

Спасибо заранее.

4b9b3361

ОТВЕТЫ

Ответ 1

Выполнение каких-либо разборок HTML/DOM приведет вас к стене, я думаю, и означает, что вы действительно начинаете разрабатывать свой собственный механизм компоновки HTML.

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

Наш HTML будет в основном быть:

<body>
    <div id="container">
        <div id="content">

            CONTENT GOES HERE

            <span id="endMarker"></span>
        </div>
    </div>
    <div>
        <button id="previous">Previous</button>
        <span id="page">Page N of M</span>
        <button id="next">Next</button>
    </div>
</body>

Наш базовый CSS:

#container {
    width: 240px;
    overflow: hidden;
    background-color: yellow;
}
#content {
    position: relative;
    height: 30em;

    -moz-column-width: 240px;
    -webkit-column-width: 240px;
    column-width: 240px;

    -moz-column-gap: 10px;
    -webkit-column-gap: 10px;
    column-gap: 10px;
}

Теперь мы установим свойство left CSS для #content для переключения между страницами, кратным -250px.

Нам нужно только выяснить, сколько столбцов занимает наш контент, и у нас есть пейджинг. Как получить счетчик нескольких столбцов css3 в Javascript дает подсказку: мы найдем его из левой позиции #endMarker.

Вот рабочий пример http://lateral.co.za/pages.html с первой главой Moby Dick. Он работает в Chrome и Android, но не в Firefox - я думаю, из-за различий в реализациях столбцов CSS. Так как нас здесь интересует Android, код хорош.

Важными частями являются:

  • Настройки CSS, как указано выше.
  • Добавление <span id="endMarker"></span> после содержимого (но в пределах #content div)
  • Добавлена ​​кнопка #previous и #next и <<28 > , все вне #container.

  • Этот javascript после загрузки jQuery:

    var _column = 0;
var _columnCount = 0;
var _columnWidth = 240;
var _columnGap = 10;
$(function() {
    _columnCount = Math.floor($('#endMarker').position().left/(_columnWidth + _columnGap));

    setColumn = function(i) {
        _column = i;
        document.getElementById('content').style.left = -1 * _column * (_columnWidth + _columnGap);
        $('#page').html('Page ' + (_column+1) + ' of ' + (_columnCount+1));
    }
    $('#next').click(function() {
        if (_column==_columnCount) return;
        setColumn(_column+1);
    });
    $('#previous').click(function() {
        if (0==_column) return;
        setColumn(_column-1);
    });
    setColumn(0);
});

Что это.

Там место для работы. Можно подумать об этом количестве вычислений столбцов, я как бы отсасывал его из ссылки SO, но на самом деле не думал об этом... Ширина контейнера, похоже, влияет на ширину столбца содержимого, что не имеет для меня никакого смысла.

Но по крайней мере все, кажется, работает без необходимости разбора и собственного макета HTML, по крайней мере в Chrome и на Android.

Ответ 2

Вам нужно проанализировать HTML, лучше всего использовать библиотеку, где вы можете получить доступ к DOM, как в JavaScript. Затем вы можете создать собственный макет для анализируемого контента. Поддерживает ли WebView JavaScript? Это было бы неплохо начать.

Очевидно, что вы не можете разбить в произвольных местах HTML файла, вам нужно учитывать HTML-теги. После изменения DOM или разбиения html вы можете предоставить собственный CSS файл для содержимого, чтобы отобразить его так, как вам нравится, и добавить разбивку на страницы, используя вашу библиотеку или JavaScript.

Использование <span style="display:none"></span> может помочь вам скрыть контент на веб-сайте. Тогда вам не нужно разделить физически (это все равно в памяти после загрузки страницы).

Надеюсь, что это помогло. Здесь вы не получите полного решения, но, возможно, у вас есть идеи. Если вы найдете более конкретные проблемы, вам будет проще задавать более конкретные вопросы.