[paged.js] control hyphenation #8

Hyphenation in Paged.js is currently supported only in Chromium/Chrome from version 88 on, but soon will be supported in Firefox:

A good ref about hyphenation and CSS: http://clagnut.com/blog/2395

I bumped into two specific things:

hyphenate-limit-chars is not supported...
word are hyphenated across page breaks (see example)

Found ways of working with the hyphenation issues:

For the general handling of hyphenation, which allows to control the hyphenation settings, the code now uses Hyphenopoly. See this snippet from templates/template.html:

<script>
        // Hyphenopoly is used for the hyphenation of the book.
        // Thank you paged.js team for the Hyphenopoly tip!
        // config for hyphenopoly
        var Hyphenopoly = {
            require: {
                "en-us": "FORCEHYPHENOPOLY"
            },
            paths: {
                patterndir: "./js/hyphens/patterns/",
                maindir: "./js/hyphens/"
            },
            setup: {
                dontHyphenateClass: "noHyphen",
                safeCopy: false,
                hide: "nothing",
                selectors: {
                    "p": {
                        hyphen: "\u00AD",
                        // hyphen: "•",
                        compound: "all",
                        minWordLength: 5,
                        leftmin: 3,
                        rightmin: 0,
                        orphanControl: 1
                    }
                }
            }
        }
    </script>

For the issue with hyphenated words across page breaks, the following code has been used to resolve this (from templates/template.html again):

<script>
    // With many thanks to Julien Taquet for digging into Paged.js
    // to find a way to remove hyphenated words on page breaks!!
    class noHyphenBetweenPage extends Paged.Handler {
        constructor(chunker, polisher, caller) {
            super(chunker, polisher, caller);
            this.hyphenToken;
        }
        afterPageLayout(pageFragment, page, breakToken) {
            if (pageFragment.querySelector('.pagedjs_hyphen')) {
                // find the hyphenated word  
                let block = pageFragment.querySelector('.pagedjs_hyphen');
                block.dataset.ref = this.prevHyphen;
                // move the breakToken
                let offsetMove = getFinalWord(block.innerHTML).length;
                // move the token accordingly
                page.breakToken = page.endToken.offset - offsetMove;
                // remove the last word
                block.innerHTML = block.innerHTML.replace(getFinalWord(block.innerHTML), "");
                breakToken.offset = page.endToken.offset - offsetMove;       
            }
        }
    }
    Paged.registerHandlers(noHyphenBetweenPage);

    function getFinalWord(words) {
        var n = words.split(" ");
        return n[n.length - 1];
    }
    </script>

Found ways of working with the hyphenation issues: For the general handling of hyphenation, which allows to control the hyphenation settings, the code now uses Hyphenopoly. See this snippet from `templates/template.html`: ``` <script> // Hyphenopoly is used for the hyphenation of the book. // Thank you paged.js team for the Hyphenopoly tip! // config for hyphenopoly var Hyphenopoly = { require: { "en-us": "FORCEHYPHENOPOLY" }, paths: { patterndir: "./js/hyphens/patterns/", maindir: "./js/hyphens/" }, setup: { dontHyphenateClass: "noHyphen", safeCopy: false, hide: "nothing", selectors: { "p": { hyphen: "\u00AD", // hyphen: "•", compound: "all", minWordLength: 5, leftmin: 3, rightmin: 0, orphanControl: 1 } } } } </script> ``` For the issue with hyphenated words across page breaks, the following code has been used to resolve this (from `templates/template.html` again): ``` <script> // With many thanks to Julien Taquet for digging into Paged.js // to find a way to remove hyphenated words on page breaks!! class noHyphenBetweenPage extends Paged.Handler { constructor(chunker, polisher, caller) { super(chunker, polisher, caller); this.hyphenToken; } afterPageLayout(pageFragment, page, breakToken) { if (pageFragment.querySelector('.pagedjs_hyphen')) { // find the hyphenated word let block = pageFragment.querySelector('.pagedjs_hyphen'); block.dataset.ref = this.prevHyphen; // move the breakToken let offsetMove = getFinalWord(block.innerHTML).length; // move the token accordingly page.breakToken = page.endToken.offset - offsetMove; // remove the last word block.innerHTML = block.innerHTML.replace(getFinalWord(block.innerHTML), ""); breakToken.offset = page.endToken.offset - offsetMove; } } } Paged.registerHandlers(noHyphenBetweenPage); function getFinalWord(words) { var n = words.split(" "); return n[n.length - 1]; } </script> ```