Using Paged.js with dropcap.js

I wanted to use dropcap.js with Paged.js and I went with the most obvious solution which is to process the DOM elements with letters in the afterPageLayout hook. However, it is unsafe, as it potentially can mess up the layout because there is no processing done by Paged.js after this hook. A better way is to use renderNode hook. https://gitlab.pagedmedia.org/tools/experiments/tree/master/drop-cap

renderNode(node, sourceNode) {
    // test node type to see if it’s an element (1) and if it has a child with a call 'dropcap'. If yes, run the dropcap script on the element with a dropcap class
    if (node.nodeType == 1 && node.querySelector(".dropcap")) {
        window.Dropcap.layout(node.querySelector(".dropcap"), 3);
    }
}
1 Like