{% extends "_base.html" %} {% block title %}Text{% endblock %} {% block content_name %} Text {% endblock %} {% block content %} {% for font_class in font_styles or font_styles_old or font_styles_new %}
{{ font_class.class_name }} {{ pt_size }}pt
{{ sample_text }}
{% endfor %} {% endblock %} {% block js %} // break text so that no reflow happens async function breakText() { boxContent = document.getElementsByClassName("box-text") for (let box of boxContent) { switchFonts() await sleep(1) break1 = getLineBreaks(box) switchFonts() await sleep(1) break2 = getLineBreaks(box) if (break1.length >= break2.length) { breaks = break1 } else { breaks = break2 } insertBreaks(box, breaks) box.style.whiteSpace = "pre" console.log("set to pre") } } function getLineBreaks(elem) { const nodes = grabTextNodes(elem); for (const node of nodes) { // each node is a big block of text let rangeIndex = 1; let textIndex = 0; let nodeText = node.textContent; const textLength = nodeText.length; linebreaks = [] prevTop = 0; while (rangeIndex <= textLength) { const range = document.createRange(); range.setStart(node, rangeIndex-1); range.setEnd(node, rangeIndex) currentTop = range.getBoundingClientRect().top if (currentTop > prevTop) { linebreaks.push(rangeIndex-2) } rangeIndex += 1; prevTop = currentTop } } return linebreaks } function grabTextNodes(elem) { const walker = document.createTreeWalker(elem, NodeFilter.SHOW_TEXT, null); const nodes = []; while (walker.nextNode()) { nodes.push(walker.currentNode); } return nodes; } function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } function insertBreaks(node, breaks) { console.log(node, breaks) newText = "" currentText = node.textContent for (i=0; i