How to program HTML to create consistent columns for text?

Question

I’m trying to make it so that the pages of my book can fit into 2 specific column sizes for all the text such that I can click through the pages. Is there any way I can automate it so it detects where exactly in the page it needs to stop and move onto the next?

Answer 1

Ella, your question is very vague. I would suggest as @paulsm4 suggested you study up on html, css and javascript.

Your question does not explain where you are getting the text from, and how it is rendered to the screen. I am going to try and help.

Let's assume you are adding text to a div, your "book" has two pages and so let's assume each page is a div. One on the left and one on the right.

I am going to assume we can use the flex layout so let's use a flexbox.

The css would look something like this.

.book {
  display: flex; 
}

.page {
  flex: 1;
  padding: 10px; //just because
  border: solid; //so you can see the page
}

The html would be:

<div class="book">
  <div id="page1" class="page"></div>
  <div id="page1" class="page"></div>
</div>

You could use css to make the min-height of the book 100% so that it spans the entire page. I have added an ID to each of the pages so that you can use javascript to find out how big the div block is.

The javascript would be something like this,

var width = document.getElementById('page1').offsetWidth;
var height = document.getElementById('page2').offsetHeight;

Now with simple maths width x height we have the area. But now we have a problem. What is the font size and type of font you are using. If you have a fixed width font then this is easy if you have a variable width font, then you may have a problem. But in essence, using the size of a letter you could workout by taking the area of the div divided by the area of a letter and you will know how many letters and punctuation can fit in the div.

Alternatively, and a little more complex, but an approach I would use, would be to add words to the div, until the div is larger than a predetermined height. When this happens, remove the previous word and add words to the next div. This can be done using javascript. I would suggest instead of pure javascript that you use a framework such as react, or angular.

Your question however lacks loads of information. In future, please provide some source code to show what you have done, how you are fetching the words and how you are rendering them.

I suggest you take a Udemy course and learn a little more about html, javascript and css. See here.