From: Thomas Walker Lynch Date: Mon, 12 Jan 2026 18:07:47 +0000 (+0000) Subject: . X-Git-Url: https://git.reasoningtechnology.com/style/utility.js?a=commitdiff_plain;h=beff586cf5dbbf7b20b3ac09b546fb8c28f899db;p=Epimetheus%2F.git . --- diff --git a/developer/document/style/article_generic.js b/developer/document/style/article_generic.js index 93000aa..ea8a926 100644 --- a/developer/document/style/article_generic.js +++ b/developer/document/style/article_generic.js @@ -24,9 +24,23 @@ window.StyleRT.article_generic = function() { // We apply the width to the body now so that getBoundingClientRect() // in the paginator reflects the final text wrapping. body.style.maxWidth = '50rem'; - body.style.margin = '0 auto'; // Center the content area + body.style.margin = '0 auto'; - // We store the target page height on the RT object for the paginator to find. - // This avoids assigning a height to the body itself (which would clip content). + // 4. Centered Headers + // We apply this via a quick style injection or direct selection + const h1s = document.querySelectorAll('h1'); + h1s.forEach(h => { + h.style.textAlign = 'center'; + h.style.width = '100%'; + }); + + // 5. Layout Variables + // We store the target page height for the paginator to find. RT.page_height = 1056; + + // Typographic constraints for future line-splitting logic + RT.orphans = 4; + RT.widows = 4; + + if (RT.debug) RT.debug.log('style', 'Article generic setup: H1 centered, orphans/widows set to 4.'); }; diff --git a/developer/document/style/do_style.js b/developer/document/style/do_style.js index 9fce950..588fd17 100644 --- a/developer/document/style/do_style.js +++ b/developer/document/style/do_style.js @@ -17,7 +17,8 @@ window.StyleRT.do_style = function() { 'style/RT_TOC.js', 'style/paginate_by_element.js', // 'style/page.js', - 'style/page_css.js', + // 'style/page_css.js', + 'style/page_css_pn.js', 'style/body_visibility_visible.js' ]; diff --git a/developer/document/style/page_css_pn.js b/developer/document/style/page_css_pn.js new file mode 100644 index 0000000..d57365f --- /dev/null +++ b/developer/document/style/page_css_pn.js @@ -0,0 +1,58 @@ +/* + Defines the appearance of the container. + Includes a page counter in the bottom-right and typographic constraints. +*/ +window.StyleRT = window.StyleRT || {}; + +window.StyleRT.page = function() { + const RT = window.StyleRT; + const style_id = 'rt-page-styles'; + const fixed_height = RT.page_height ? `${RT.page_height}px` : '1056px'; + + if (!document.getElementById(style_id)) { + const style_el = document.createElement('style'); + style_el.id = style_id; + + // We use CSS counters to automatically number the pages + style_el.textContent = ` + body { + counter-reset: rt-page-counter; + } + + rt-page { + display: block; + max-width: 50rem; + width: 100%; + margin: 4rem auto 6rem auto; + padding: 3rem; + box-sizing: border-box; + background-color: hsl(0, 0%, 0%); + border: 1px solid hsl(42, 100%, 50%); + height: ${fixed_height}; + position: relative; + filter: drop-shadow(8px 12px 40px hsl(44, 96%, 47%)); + counter-increment: rt-page-counter; + } + + /* Typographic Constraints */ + rt-page p { + orphans: ${RT.orphans || 4}; + widows: ${RT.widows || 4}; + } + + /* The Page Counter */ + rt-page::after { + content: "Page " counter(rt-page-counter); + position: absolute; + bottom: 1.5rem; + right: 3rem; + font-family: sans-serif; + font-size: 0.8rem; + color: hsl(42, 100%, 20%); /* Faded gold */ + } + `; + document.head.appendChild(style_el); + } + + if (RT.debug) RT.debug.log('style', `Pages numbered and fixed at ${fixed_height}.`); +};