Brief
我正在try 用nodejs制作和发布阅读器.我没有找到一个解决方案来帮助我使我的项目工作.我试图获得的成就是将html(章节元素)内容拆分为两列,就像所有具有nextPage或previousPage功能的epub阅读器一样.
What i have tried
我try 的是获取章节的html内容,并将其插入到具有css columns的iframe中.我的解决方案是每次下一页时显示translateX(-containerWidth),但这似乎不是一个理想的解决方案,因为不知道列数就无法知道是否显示了内容.我还try 根据容器内容的宽度进行判断,但我无法获得,因为容器大小是固定的,通过添加column-width样式,容器可以垂直移动.
css列解决方案
我从这个网站上获得了解决方案(link)的线索,但是我甚至无法实现它,即使查看源代码.事实上,这个网站能够实现这个功能,这意味着css columns solution是可能的,如果可能的话,我想使用这个策略.
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
一次将html元素动态拆分为两列并考虑列数的最佳解决方案/策略是什么?
类似问题
重要的
- 我正试图让这without个第三方解决方案奏效.
- 如果有什么不清楚,我会提供更多的代码或描述.
目前正在查看
- https://stackoverflow.com/a/37676538/9366413 columnizer-jquery-plugin似乎是这个问题的可能解决方案,但这是第三部分的解决方案,但如果可行,我会坚持下go .