.

diff --git a/developer/document/style/article_generic.js b/developer/document/style/article_generic.js
index 93000aa..ea8a926 100644 (file)
--- 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 (file)
--- 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 (file)
index 0000000..d57365f
--- /dev/null
+++ b/developer/document/style/page_css_pn.js
@@ -0,0 +1,58 @@
+/*
+  Defines the appearance of the <RT-PAGE> 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}.`);
+};