Brief

Im trying to make and epub reader with nodejs. I didn't find a solution that helps me to make my project works. The achievement i'm trying to obtain is to split html (chapter elements) content in 2 columns like all epub readers with nextPage or previousPage functionality.

What i have tried

What i have tried is to get chapter's html content and insert it into an iframe with css columns. My solution was to translateX(-containerWidth) each time it nextPage() but it seems to be a not ideal solution because you can't know if the content is displayed or not by not knowing the columns count. I also tried to do a check based on the width of the container's content but I couldn't get it because the container size is fixed and by adding column-width style the container goes vertically.

css column solution

I took a cue from this site for the solution (link), however i can't implement it even looking the source code. The fact that this site is able to implement this feature it means that the css columns solution is possible and i would like to use this strategy if possible.

Code

<!-- HTML CONTAINER -->
<div id="book-content">
   <iframe>
        <html> 
        <body> <!-- content inside-->
   </iframe>
</div>

iframe html {
   overflow: hidden;
   width: 1000px; /* container width */
   height: 500px; /* container height*/
   column-fill: auto;
   column-gap: 100px;
   column-width: 400px;
   column-rule: 1px solid rgba(0, 0, 0, 0.5);
}

/* Js Script*/
var iframe_content = $(`<iframe id="book-iframe" data-id="${chapter.id}" scrolling="no" allowfullscreen="true" height="100%" width="100%" style="border: none; visibility: visible;" />`).appendTo($("#book-container").html('')).contents()
iframe_content.find('body').append(bookcontent);

As you can see it works but the problem here is that i display only the first 2 columns of the chapter. The goal is to skip the chapter when it have displayed all the pages and skip the page when there are pages on that chapter to display. By searching on internet, I realized that using css columns is not the ideal solution to this problem, it would be better to create columns directly on javascript but i can't figure out how implement this.

Pseudo code ideal solution

function skipHandler(){
    if(contentToDisplay()){
      skipPage();
    } else {
      skipChapter();
    }
}

Summary

What's the best solution/strategy to split html elements dynamically in two columns at time and take into account the number of columns?

Similar question

• Split a dynamic div into two columns using jquery and CSS (Not answered on how you handle page skip)

Important

• I'm trying to make this works without third party solution.
• If anything is not clear i will provide more code or description.

Currently looking at

• https://stackoverflow.com/a/37676538/9366413 columnizer-jquery-plugin seems to be a possible solution to the problem, however this is a third part solution but if it works i'll stick with it.