CSS: Multi-Column, Multi-Page layout like an open book

user_901334 0
Viewed 1109

Is it possible to create a two-column, multi-page layout with HTML and CSS as shown in this mockup where content automatically flows from 1 → 2 → 3 → 4 → …?

book layout

I'm building an eBook reader/writer. Essentially the layout is similar to that of a desktop word processing app like Word or Pages:

  • Two pages next to each other filling the screen ("left" and "right" page if you open a book)
  • The next two pages below, scrolling vertically, etc. (imagine turning a page in a book)
  • Text flows automatically from one page to the next 1 → 2 → 3 → 4 → ...

I experimented with the CSS Multi-column Layout Module¹. Getting two columns is straight forward, but I could not figure out how to "break" at the viewport height into multiple "two-column" layouts, one for each set of "left & right" pages.

CLARIFICATION:

The content is essentially one big <div contenteditable="true">. Its contents need to flow automatically across the pages.

<div id="bookeditor" contenteditable="true">
    Book contents go here...
    Wrap from page to page, from row to row...
</div>

1: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts

css-multicolumn-layout css html
2 Answers
user_151811700

I would personally use a framework with a grid such as https://getbootstrap.com/docs/4.4/layout/grid/ or https://get.foundation/sites/docs-v5/components/grid.html and create rows so that each page has CSS classes of col-md-6 col-sm-12 (Bootstrap example)

This means that when you are on a browser with a medium viewport (or bigger) each page will take 6 of 12 space (so 50%) of the screen, and when the user is on a small screen the page will take up 12 of 12 space (so 100%) - so the pages lay out one above the other.

user_32449390
Related