使用CSS列在epub上进行分页

Question

I'm working on epub file formats to be read in the browser. 我正在研究要在浏览器中读取的epub文件格式。 Using CSS columns I can divide the content into several columns (several pages) based on the window height. 使用CSS列，我可以根据窗口高度将内容分为几列（几页）。 Using Next/Previous button, I'll do translateX . 使用“下一个/上一个”按钮，我将执行translationX 。

My question is regarding pagination. 我的问题是关于分页。 How can I determine: 我如何确定：

the total number of columns present in the browser for a particular ebook which I will use it as total number of pages. 浏览器中特定电子书的总列数，我将其用作总页数。
Current column visible in the viewport, which I will use it as current page location. 当前列在视口中可见，我将其用作当前页面位置。

If CSS columns are not good for this case, You could suggest me any better approach to this. 如果CSS列不适用于这种情况，您可以建议我采取任何更好的方法。

EDIT: I'm rendering epubs as a reflowable content (dynamic pagination). 编辑：我正在将epub呈现为可重排的内容（动态分页）。

Thanks! 谢谢！

Answer 1

A better approach would be to generate your own columns. 更好的方法是生成自己的列。

See my jsfiddle demo , which uses lib_columns.js , jquery.js , and jquery.easyPaginate.js . 请参阅我的jsfiddle演示，该演示使用lib_columns.js ， jquery.js和jquery.easyPaginate.js 。

For more information on easyPaginate.js, see website . 有关easyPaginate.js的更多信息，请参见网站。

For more information on lib_columns.js, see website . 有关lib_columns.js的更多信息，请参见网站。

CSS 的CSS

<style type="text/css">
html, body { overflow: hidden; height: 100%; }

/* Hide the source containers, by visual only. */
#divSizer, #content {
    visibility: hidden;
    position: absolute;
    left: -9999px;
}

/* E-book */
.ebook-container {
    position: relative;
    background: #CCC;
}
#ebook {
    /*width: 300px; (generated by JavaScript) */
    /*height: 500px; (generated by JavaScript) */
    margin: 0 auto;
    border: 4px dashed red;
    /*overflow: auto; (Provide scrollbar) */
}

/* Pagination Menu */
.ebook-container .easyPaginateNav {
    position: absolute;
    bottom: -2em;
    width: 100% !important;
    text-align: center;
}
.ebook-container .easyPaginateNav a { padding: 5px; }
.ebook-container .easyPaginateNav a.current { font-weight: bold; }

/* Show only the current page in pagination, hide the rest. */
.ebook-container .easyPaginateNav a.page         { display: none; }
.ebook-container .easyPaginateNav a.page.current { display: inline; }

/* Text-size Menu */
.ebook-container .textSizeNav {
    position: absolute;
    bottom: -70px;
    width: 100%;
    text-align: center;
}
</style>

HTML 的HTML

<body style="font-size: 1.4em;">
    <div id="divSizer"></div>

    <div id="content">
        <h2>7.1 Introduction to media types</h2>

        <p>One of the most important features of style sheets is that they
        specify how a document is to be presented on different media: on the
        screen, on paper, with a speech synthesizer, with a braille device,
        etc.</p>

        <h3>Features of Style Sheets</h3>

        <p>Certain CSS properties are only designed for certain media (e.g.,
        the 'cue-before' property for aural user agents).
        On occasion, however, style sheets for different
        media types may share a property, but require different values for
        that property. For example, the 'font-size' property is useful both
        for screen and print media. However, the two media are different
        enough to require different values for the common property; a document
        will typically need a larger font on a computer screen than on paper.
        Experience also shows that sans-serif fonts are easier to read on
        screen, while fonts with serifs are easier to read on paper.  For
        these reasons, it is necessary to express that a style sheet -- or a
        section of a style sheet -- applies to certain media types.</p>

        <h4>Features of Style Sheets</h4>

        <p>One of the most important features of style sheets is that they
        specify how a document is to be presented on different media: on the
        screen, on paper, with a speech synthesizer, with a braille device,
        etc.</p>

        <p>Experience also shows that sans-serif fonts are easier to read on
        screen, while fonts with serifs are easier to read on paper.  For
        these reasons, it is necessary to express that a style sheet -- or a
        section of a style sheet -- applies to certain media types.</p>

        <h4>Document to be Presented</h4>

        <p>Experience also shows that sans-serif fonts are easier to read on
        screen, while fonts with serifs are easier to read on paper.  However,
        the two media are different enough to require different values for the
        common property</p>

        <p>Certain CSS properties are only designed for certain media (e.g.,
        the 'cue-before' property for aural user agents).
        On occasion, however, style sheets for different.</p>

        <h4>Features of Style Sheets</h4>

        <p>One of the most important features of style sheets is that they
        specify how a document is to be presented on different media: on the
        screen, on paper, with a speech synthesizer, with a braille device,
        etc.</p>

        <p>Experience also shows that sans-serif fonts are easier to read on
        screen, while fonts with serifs are easier to read on paper.  For
        these reasons, it is necessary to express that a style sheet -- or a
        section of a style sheet -- applies to certain media types.</p>

        <h4>Document to be Presented</h4>

        <p>Experience also shows that sans-serif fonts are easier to read on
        screen, while fonts with serifs are easier to read on paper.  However,
        the two media are different enough to require different values for the
        common property</p>

        <p>Certain CSS properties are only designed for certain media (e.g.,
        the 'cue-before' property for aural user agents).
        On occasion, however, style sheets for different.</p>
    </div>

    <div class="ebook-container">
        <div id="ebook"></div>

        <div class="textSizeNav">
            <button id="plustext" class="btn btn-circle" onclick="resizeText(1); $(window).resize();">A<sup><span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span></sup></button>
            <button id="minustext" class="btn btn-circle" onclick="resizeText(-1); $(window).resize();"><small>A</small><sup><span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span></sup></button>
        </div>
    </div>

    <script src="https://cdn.rawgit.com/dpup/13thparallel.com/master/static/archive/column-script/lib_columns.j"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="http://st3ph.github.io/jquery.easyPaginate/js/jquery.easyPaginate.js"></script>
    <script src="jquery.easyPaginate.func.my_paginate.js"></script>
    <script src="my_app.js"></script>
</body>

JAVASCRIPT - jquery.easyPaginate.func.my_paginate.js JAVASCRIPT -jquery.easyPaginate.func.my_paginate.js

<!-- jquery.easyPaginate.func.my_paginate.js -->
<script>
function my_paginate(book_selector, content_selector, params)
{
    // Override default options.
    params = $.extend({
        pageWidth:       300,
        pageHeight:      500,
        earlyCutOff:     0,
        paginateElement: 'div',
        elementsPerPage: 1,
        effect:          'default', // Choose: 'fade', 'slide', or 'climb'
        prevButtonText: '<',
        firstButtonText: '<<',
        nextButtonText: '>',
        lastButtonText: '>>'
    }, params);

    // If content container is empty, then break.
    var content = $(content_selector);
    if (content.length == 0) return;

    // Reset easyPaginate:
    // - Check if pagination already exists.
    // - Remove pagination, and clear the e-book container.
    var sel = '.easyPaginateNav';
    var pagination = $(book_selector).parent().children(sel);
    if (pagination.length > 0) {
        pagination.first().remove();
        $(book_selector).html('');
    }

    // Generate pages. (splits the content)
    // Note: All pages will have:
    // - class="page"
    // - data-page-num="*"
    var cols = Columns.splitText(
        content.html(),
        params.pageWidth,
        (params.pageHeight - params.earlyCutOff) // Sometimes too long.
    );
    for (var i = 0; i < cols.length; i ++)
    {
        $(book_selector).append(
            '<' + params.paginateElement +
            ' class="page"' +
            ' data-page-num="' + (i + 1) + '"' +
            '>' +
            cols[i] +
            '</' + params.paginateElement + '>'
        );
    }

    // Prepare the e-book container.
    var book = $(book_selector);
    book.css('width', params.pageWidth + 'px');
    book.css('height', params.pageHeight + 'px');

    // Generate/render E-book.
    book.easyPaginate({
        paginateElement: params.paginateElement,
        elementsPerPage: params.elementsPerPage,
        effect: params.effect,
        prevButtonText: params.prevButtonText,
        firstButtonText: params.firstButtonText,
        nextButtonText: params.nextButtonText,
        lastButtonText: params.lastButtonText
    });
}
</script>

JAVASCRIPT - my_app.js JAVASCRIPT -my_app.js

<!-- my_app.js -->
<script>
// When document is ready.
$(function() {
    // When the screen size/dimensions changes:
    $(window).on("resize", function() {
        // Current screen size.
        var width = $(window).width() - 150; // 150px gutter.
        var height = $(window).height() - 125; // 125px gutter.

        // Render e-book.
        my_paginate('#ebook', '#content', {
            pageWidth: width,
            pageHeight: height,
            prevButtonText: '<span class="glyphicon glyphicon-step-backward" aria-hidden="true"></span>',
            firstButtonText: '<span class="glyphicon glyphicon-fast-backward" aria-hidden="true"></span>',
            nextButtonText: '<span class="glyphicon glyphicon-step-forward" aria-hidden="true"></span>',
            lastButtonText: '<span class="glyphicon glyphicon-fast-forward" aria-hidden="true"></span>',
            earlyCutOff: 50
        });
    }).resize(); // Force trigger a resize event.
});
</script>

JAVASCRIPT - extra JAVASCRIPT-额外

<script>
function resizeText(multiplier) {
    if (document.body.style.fontSize == "") {
        document.body.style.fontSize = "1.0em";
    }
    document.body.style.fontSize = parseFloat(document.body.style.fontSize) + (multiplier * 0.2) + "em";
}
</script>

Comments 评论

Using CSS Columns (via the "columns:" property) would be difficult because those columns are generated by CSS, not HTML. 使用CSS列（通过“ columns：”属性）将很困难，因为这些列是由CSS而不是HTML生成的。

With HTML (markup), we then have our columns in the DOM and therefore can better interact with and manipulate them. 使用HTML（标记），然后将列放在DOM中，因此可以更好地与它们进行交互和操作。

You then use JavaScript libraries such as jQuery to interact with and manipulate your columns. 然后，您可以使用JavaScript库（例如jQuery）与列进行交互并对其进行操作。

使用CSS列在epub上进行分页

问题描述

1 个解决方案

解决方案1
4 2017-06-12 04:13:00

使用CSS列在epub上进行分页

问题描述

1 个解决方案

解决方案1 4 2017-06-12 04:13:00

解决方案1
4 2017-06-12 04:13:00