Как визуально разделить текст в HTML чтобы было как в Google Docs?

Question

[Валерий Любимов]

Появилась интересная задачка, но сам пока не могу понять как это можно реализовать.

Есть такой HTML

<div class="content">
<!-- тут много параграфов, заголовков, таблиц и прочего текстового контента -->
</div>

Визуально это будет отображаться сплошным текстом. Мне же нужно сделать так чтобы визуально это отображалось как страницы в Google Docs. Тоесть надо по вертикали дробить контент на равные промежутки, чтобы внешне это выглядело как страницы А4.

Пока ни нагуглить, ни самому придумать решения не получилось. Может кто нибудь уже делал что-то подобное или знает хорошее решение?

Comments

[Сергей Горячев]

Это прикол какой-то или я чего-то не улавливаю?

.content h1 {
  /* стили для заголовка h1 */
}
.content h2 {
  /* стили для заголовка h2 */
}
.content h3 {
  /* стили для заголовка h3 */
}
.content p {
  /* стили для параграфа p */
}
.content ul {
  /* стили для списка ul */
}
.content li {
  /* стили для списка li */
}

Тоесть надо по вертикали дробить контент на равные промежутки, чтобы внешне это выглядело как страницы А4.

Это вообще не понятно.

[Алексей Уколов]

Не улавливаете. Вопрос о том, как разбить произвольную разметку на блоки равного размера, которые будут выглядеть как страницы.

[Валерий Любимов]

Сергей Горячев, Вопрос был не про то как стилизовать разные элементы HTML а про то как визуально разделить контент на страницы аля Google Docs / Word / PDF / режим печати в веб и пр.

Мне же нужно сделать так чтобы визуально это отображалось как страницы в Google Docs. Тоесть надо по вертикали дробить контент на равные промежутки, чтобы внешне это выглядело как страницы А4.

Вот так примерно это должно выглядеть и автоматически дробить мой контент.

[Валерий Любимов]

Алексей Уколов, да именно так)

Answer 1

[Сергей Горячев]

Comments

[Валерий Любимов]

ага вроде похоже на правду, спасибо, буду пробовать)

[Сергей Горячев]

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

[Сергей Горячев]

Валерий Любимов, вообще, я бы пошел более сложным путем, но более красивым.
Генерировать из блока content pdf-файл и использовать на сайте просмотрщик, который позволяет вывести все страницы pdf сразу в блок. Они будут текстовыми, то есть можно будет копировать, но форматирование будет делать pdf, и не будет проблем с разбитием, да и само разбитие будет гарантировано равным формату а4.

[Валерий Любимов]

Сергей Горячев, да, понимаю что придется допиливать, мне как раз нужна была какая-то минимальная основа чтобы понять как это сделать. Дальше я уже сам смогу разобраться)

Генерацию в PDF я рассматривал, но в данном проекте не прокатит, потому что там много интерактива с этим текстом будет.