Отображать динамический HTML-контент, такой как epub / ebook, без преобразования HTML в формат epub?

Взгляните на репозиторий это на GitHub. В противном случае вы можете создать одностраничный веб-сайт с множеством разделов, каждый из которых имеет высоту области просмотра, используя только CSS (демонстрация):

.section { height: 100vh; }

или используя JavaScript, добавляя привязку к каждому разделу для навигации между ними и применяя адаптивный блок (мой демонстрация) для текста каждого раздела, к адаптироваться его при изменении размера ... Примерно так:

var curr_el_index = 0;
var els_length = $(".container").length;

$(".next_section").on("click", function(e) {
  curr_el_index++;
  if (curr_el_index >= els_length) {
    curr_el_index = 0;
  }
  $("html, body").animate({
    scrollTop: $(".container").eq(curr_el_index).offset().top
  }, 300);
  return false;
});

$(".previous_section").on("click", function(e) {
  curr_el_index--;
  if (curr_el_index < 0) {
    curr_el_index = els_length - 1;
  }
  $("html, body").animate({
    scrollTop: $(".container").eq(curr_el_index).offset().top
  }, 300);
  return false;
});

  * {
    border: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
  }
  body {
    background-color: #1a1a1a;
  }
  section {
    height: 100vh;
    background-color: #eee;
    border: 2px solid red;
    font-size: 6vw;
  }

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class = "container">Section 1 <a href = "#" class = "previous_section">Previous</a> <a href = "#" class = "next_section">Next</a></section>
<section class = "container">Section 2 <a href = "#" class = "previous_section">Previous</a> <a href = "#" class = "next_section">Next</a></section>
<section class = "container">Section 3 <a href = "#" class = "previous_section">Previous</a> <a href = "#" class = "next_section">Next</a></section>
<section class = "container">Section 4 <a href = "#" class = "previous_section">Previous</a> <a href = "#" class = "next_section">Next</a></section>
<section class = "container">Section 5 <a href = "#" class = "previous_section">Previous</a> <a href = "#" class = "next_section">Next</a></section>

РЕДАКТИРОВАТЬ # 1

Идея алгоритма, который исходит от мой код, который использует тот же плагин jQuery:

1. Создайте макет своего ридера, скопировав в него весь текст
2. Используйте плагин jQuery это для проверки текста внутри области просмотра (демонстрация)
3. Подсчитайте количество символов / СЛОВ с меткой «Onscreen» в область просмотра (Рекомендации)
4. Разделите весь текст на list, содержащий столько символов / СЛОВ, сколько есть в метке "Onscreen"
5. Создайте section для каждого элемента полученного list, заполнив каждый section с относительным текстом; количество элементов list дает вам количество страниц (sections) всего текста. Вы можете перемещаться между sections, как указано выше
6. При событии resize повторите [2-5] шагов алгоритма.

Ваше здоровье

Вы можете попробовать точки привязки прокрутки CSS к тексту со столбцами

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap_Points

Каким-то образом сделайте столбцы такой же ширины, как и область просмотра, и разрешите горизонтальную прокрутку с привязкой.

Обновлять Я хочу попытаться сделать текст полностью плавным, используя css. Ручка:
https://codepen.io/ericc3141/pen/RYZEpr

body {
    scroll-snap-type: mandatory;
    scroll-snap-points-x: repeat(100%);
}

#columns-test {
    height: 80vh;
    columns: 90vw auto;
}

Идея состоит в том, чтобы иметь div, который будет содержать весь текст (назовем этот div #epub_container). Тогда у вас будет div с тем же размером области просмотра страницы (назовем его #displayer), и он будет содержать #epub_container.

#displayer будет иметь css overflow:hidden. Поэтому, когда сайт загружается, он будет показывать только первую страницу, потому что остальная часть #epub_container будет скрыта. Затем вам понадобится навигатор по страницам для увеличения / уменьшения номера страницы. Когда номер страницы изменится, мы переместим верхнее смещение #epub_container в зависимости от этого.

Это функция jQuery:

function move_to_page() {
    var height = window.innerHeight;
    var width = window.innerWidth;

    var $displayer = $('#displayer');
    var offset = $displayer.offset();
    $displayer.height(height - offset.top - 5);

    var $epub = $('#epub_container');
    var offset_top = offset.top - $displayer.height() * m_page;
    $epub.offset({top: offset_top, left: offset.left});
}

JSFiddle

Обновлено: вызовите move_to_page() после перекомпоновки текста, чтобы пересчитать страницы.

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

Динамический разрыв страницы - JQuery

Здесь вы можете установить высоту страницы в соответствии с высотой вашего окна просмотра. С остальным вы можете справиться с помощью javascript и css.

Это становится очень трудным, если html-страница сложная, например, с точно расположенными элементами или изображениями. Однако, если (как в примере с epub.js) контент состоит только из заголовков и абзацев, это возможно.

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

Процесс преобразования содержимого в страницы

Предположим, у вас есть весь ваш контент в одной длинной строке. Начните с разделения всего содержимого на массив слов и тегов. Это не так просто, как разделение пробелами, поскольку пробелы между < и > следует игнорировать (вы хотите сохранить имена классов и т. д. В каждом теге). Также теги должны быть разделены, даже если между тегом и словом нет пробелов.

Затем вам понадобится функция, которая проверяет, не выходит ли содержимое элемента за пределы этого элемента. Этот вопрос имеет решение для копирования и вставки.

Вам нужны две переменные, pageStart и pageEnd, чтобы отслеживать, какие индексы в массиве являются началом и концом текущей страницы.

Начиная с индекса в pageStart, вы добавляете элементы из массива в качестве содержимого на страницу, проверяя после каждого добавления, переполняется ли содержимое. Когда они переполняются, вы берете индекс, который вы используете, минус 1, как индекс для pageEnd.

Сохранение тегов между разрывами страниц

Теперь, если все в порядке, тогда это должно хорошо заполнить страницу. Если вы хотите перейти на следующую страницу, установите новый pageStart как pageEnd + 1 и повторите процесс. Однако есть некоторые проблемы, которые вы, возможно, захотите исправить.

Во-первых, что произойдет, если страница выйдет за край в середине абзаца? Строго говоря, закрывающий тег </p> не требуется в HTML, поэтому нам не о чем беспокоиться. Но как насчет начала следующей страницы? В нем не будет открывающего тега, и это серьезная проблема. Итак, мы должны убедиться, что мы проверяем, начинается ли содержимое страницы с тега, и если это не так, мы получаем ближайший открывающий тег до текущего pageStart (просто сделайте шаг назад по массиву от pageStart) и добавим его перед остальное содержание.

Во-вторых, как показано в примере, если абзац продолжается на следующей странице, последняя строка текущей страницы все еще выравнивается. Вам нужно проверить, находится ли pageEnd в середине абзаца, и если да, добавить syle = "text-align-last:justify;" в открывающий тег этого абзаца.

Пример реализации

Ручка, показывающая все это в действии, находится по адресу https://codepen.io/anon/pen/ZMJMZZ.

HTML-страница содержит все содержимое в одном длинном элементе. Контент берется прямо из контейнера #page и преобразуется в страницы в зависимости от размера #page. Я не реализовал выравнивание последней строки, если в абзаце происходит разрыв страницы. Измените размер элемента #page в CSS и посмотрите, как изменяется сам контент - обратите внимание, что, поскольку размер страницы фиксирован, вам придется использовать щелчок вперед и назад, чтобы вызвать пересчет. Как только вы привязываете размер страницы к размеру окна, пересчет страниц на лету просто включает добавление слушателя события изменения размера к окну, которое вызывает fillPage.

Несомненно, существует множество ошибок, действительно, иногда он может отображать вещи неправильно (например, пропуск или повторение слов в начале или конце страницы), но это должно дать вам представление о том, с чего начать.