Currently, I am attempting to showcase a large text in a format similar to a book. Each "page" has designated width and height, with content displayed over two columns: left and right. In this layout, page 1 is on the left, page 2 on the right, page 3 on the left again, and so forth, creating a continuous pattern of alternating pages throughout the webpage's height.
The basic structure of the code is as follows:
<div class="left">
<!-- Page 1 -->
<p>Text for page 1 here</p>
<!-- Page 3 -->
<br /><p style="text-indent: 0px;"> Text for page 3 (below page 1) here.</p>
</div>
<div class="right">
<!-- Page 2 -->
<p>Text for page 2 displayed next to page 1 with a few pixels margin using float: right styling. </p>
<!-- Page 4 -->
<br />
<p style="text-indent: 0px;">Text for page 4 goes here. Displayed beside page 3. </p>
</div>
The accompanying CSS ensures that the two columns are aligned adjacent to each other (#right and #left). The concept revolves around matching the text to display on the appropriate side during each page break.
CSS code:
.left{
font-size: 20px;
float: left;
margin-left: 20px;
width: 500px;
margin-right: 20px;
text-align: justify;
/*height: 680px;*/
margin-bottom: 20px;
}
.right{
font-size: 20px;
margin-left: 10px;
float: right;
text-align: justify;
height: 680px;
width: 500px;
margin-bottom: 20px;
}
The challenge I currently face involves automatizing this process to facilitate use of a WYSIWYG text form within Wordpress and implementing a fixed height for the two columns. I desire the text to initiate from the left column and automatically shift to the right once reaching the page's height limit, only then reverting back to the left column upon reaching the right column's height limit (both set to the same height). This alternating pattern should continue seamlessly for all text sections.
My main hurdle lies in my lack of knowledge in JavaScript. While I discovered this solution, it does not specify how to transition the text from the right to the left column after surpassing the right-side limit.
I hope I have conveyed my issue clearly. If any part remains confusing, please feel free to bring it to my attention. Despite dedicating the entire summer to this project, I still struggle to find a viable solution. Thank you in advance for any assistance!