From: Thomas Walker Lynch Date: Tue, 4 Aug 2026 16:01:22 +0000 (+0000) Subject: nested sectioning, fixes strange title problem X-Git-Url: https://git.reasoningtechnology.com/%27%20%20%20window.RT.dirpr_library%20%20%20%27/%27%20%20%20key%20%20%20%27?a=commitdiff_plain;h=d593f191de80b10c7569595cad0fee9d58c916b2;p=RT-Style nested sectioning, fixes strange title problem --- diff --git a/developer/authored/Manuscript.copy/Document/manual.html b/developer/authored/Manuscript.copy/Document/manual.html index a20912e..5ec4847 100644 --- a/developer/authored/Manuscript.copy/Document/manual.html +++ b/developer/authored/Manuscript.copy/Document/manual.html @@ -15,297 +15,360 @@ + - - -

Leonardo·da·Vinci and other notes

- -

- The middle dot used as a namespace separator is the middle dot of typography. On macOS: Option + Shift + 9. On Windows: Hold Alt and type 0183 on the numeric keypad. Linux: Compose Key followed by . and -. It can be added to editor settings. If necessary, it can also be copied then pasted from the heading above. +

+ A semantic JavaScript engine for intercepting and compiling raw DOM data graphs into formatted technical manuscripts.

-

- Content is found between the opening HTML tag and the closing HTML tag. E.g. <RT·noop>This is content.</RT·noop>. -

+ -

- An attribute is a name-value pair found within an opening HTML tag. E.g. <RT·noop name="value">. Here the attribute name is name and the attribute value is value. -

+ + Core Philosophy +

+ The RT Style framework fundamentally rejects static CSS class mapping. Instead, it relies on semantic DOM isolation. Authors define logical boundaries utilizing RT· tags, completely separating the data graph from its physical presentation. +

+

+ Styling is executed dynamically at runtime. JavaScript closure functions (e.g., apply_style) intercept the parsed DOM tree, evaluate the active theme variables, calculate necessary dimensions, and inject inline styles directly into the elements. +

+

+ Typography Note: The middle dot used as a namespace separator in tags is the middle dot of typography. On macOS: Option + Shift + 9. On Windows: Hold Alt and type 0183 on the numeric keypad. Linux: Compose Key followed by . and -. +

+

+ Content is found between the opening HTML tag and the closing HTML tag. E.g. <RT·noop>This is content.</RT·noop>. +

+

+ An attribute is a name-value pair found within an opening HTML tag. E.g. <RT·noop name="value">. Here the attribute name is name and the attribute value is value. +

+ -

- All tags must be provided in pairs, though not all enforce scoped content constraints. -

- -

Manuscript types

-

- Top-level semantic environments. These boundaries enforce the rendering constraints for all scoped content, encompassing both custom RT elements and standard HTML tags. -

- - - - Standard technical document architecture. - - - Strict print layout constraint (6.5-inch width boundary, serif typography, monochrome execution). - - - Multi-chapter architecture. (Implementation pending; currently routes through the article layout). - - + + Execution Pipeline Schedule +

+ Standard web developers utilize browser inspection tools assuming the rendered elements map directly to the authored HTML. In the RT framework, this is false. The layout engine routinely executes destructive, multi-pass operations—ripping out text arrays to synthesize coordinate grids or wrapping linear flows into soft-paginated boundaries. +

+

+ RT-Style operates on a strictly phased, non-monotonic DOM evaluation schedule governed by the stage_manager.js. Developers writing custom elements must target the correct execution phase to prevent destructive collisions. +

-

Article manuscript

+ + + Evaluates raw 1D streams. Injects section wrappers, maps counter states, evaluates math tokens, and isolates explicit string payloads. + + + Initial document chunking. Slices the continuous DOM into discrete <RT·page> boundaries based on height configurations. Modifies the tree aggressively. + + + Applies geometric CSS configurations to the generated pages. + + + Walks the tree to increment the state machines and populates snapshot variables. Must run after pagination to ensure page numbers exist. + + + Resolves mapping dictionaries bridging logical content with its physically paginated layout geometry. + + + Absorbs dimensional deltas. Expands page limits to accommodate space consumed by injected cross-references and generated indices. + + + -

Structural header template for an article instance.

+ + Manuscript Types +

+ These are the top-level semantic environments. They establish the macro-boundaries that enforce the rendering constraints for all scoped child content. +

- - <!DOCTYPE html> - <html lang="en"> - <head> - <meta charset="UTF-8"> - <title>RT Manuscript: Reference Manual</title> - <script src="RT-Manuscript_locator.js"></script> - <script> - window.RT.theme_preference('inverse_wheat'); - window.RT.load('Layout/paginate'); - window.RT.load('Layout/article_tech_ref'); - window.RT.load('Element/theme_selector'); - </script> - </head> - <body> - <RT·theme-selector></RT·theme-selector> - <RT·article> - … - </RT·article> - </body> - </html> - + + + Standard technical document architecture designed for continuous digital reading. + + + Strict print layout constraint designed to mirror standard physical paper dimensions. + + + Multi-chapter assembly architecture. + + -

Decorators

- - - Semantic anchor for technical terminology. Formats the initial occurrence and registers the element ID for index generation. Authors must mark all occurrences of the term.
-
-
Attributes:
- id: (Default: Auto-generated slug, e.g., "def-my-term") -
- - - Semantic anchor for a novel term coined within the current document boundaries. Registers the ID for index generation.
-
-
Attributes:
- id: (Default: Auto-generated slug, e.g., "def-neo-my-term") -
- - +

+ Implementation Note: The <RT·book> element is a planned extension. We are deliberately delaying its separation from the article layout until the core engine's pagination and state machine logic are fully stabilized. Currently, book mechanics operate by triggering page breaks and section scoping within the standard article stream. +

+ -

Layout environments

-

- Context-aware formatting blocks. Valid inline or as distinct structural segments. -

- - - Code span or pre-formatted code block. Automatically dedents structural alignment spaces and inherits theme boundaries. - - - Injects mathematical layout evaluation via the MathJax rendering engine. - - + + Article Environment +

The standard operational header template for an article instance:

-

Grid environments

-

- These structures map semantic data into an internal Cartesian grid state prior to CSS projection, isolating the markup from physical layout mechanics. -

- - - Base Cartesian coordinate grid. Projects child <RT·e> elements based on explicitly defined x and y index geometries.
-
-
Attributes:
- model: Projection strategy. "html-grid-direct" or "html-grid-transpose". (Default: "html-grid-direct")
- major: Carriage return trigger direction. "x" or "y". (Default: "x")
-
- Child Element: <RT·e>
- x: Target x-axis index or index range (e.g., "0-2", where 2 is the maximum index extent). Default when no y value, is to auto increment, default with a y value is to reset to 0.
- y: Target y-axis index or index range. Default is to keep the prior value.
- type: Decoration type. "data", "x-label", "y-label", or "name". (Default: "data") -
- - - Two-column associative layout mapping explicitly declared keys to their scoped definitions.
-
-
Attributes:
- key: Header text for the identifier column.
- definition: Header text for the data payload column.
-
- Child Element: <RT·entry>
- key: The term being defined. The scoped HTML of the entry forms the definition value. -
- - - Relational algebra layout formatter. Enforces multi-line text wrapping limits, calculates row distinction boundaries, and restricts column headers to the tuple scope.
-
-
Attributes:
- layout-intention: "row-tuple" or "column-tuple". (Default: "row-tuple")
-
- Child Elements:
- <RT·tuple-meta>: Describes the components rather than providing them. E.g.<RT·label> provides a component label.
- <RT·tuple>: Container for components. Each <RT·name> is taken as a first component. If there is more than one <RT·name>, they are concatenated with a newline separator. If any tupple has a <RT·name>, then the name column is reserved. Missing names in the name column are given a visual placeholder value of '•'. Component data values are given in <RT·e> tags, these are taken in the order they occur. -
- - - Linear algebraic matrix representation. Enforces rigid structural padding, brackets mathematical delimiters, and suppresses the exterior grid coordinate layout.
-
-
Attributes:
- layout-intention: "row-vector" or "column-vector". (Default: "row-vector")
-
- Child Elements:
- <RT·vector-meta>: Describes the components rather than providing them. E.g. <RT·label> provides a component label.
- <RT·vector>: Container for components. Each <RT·name> is taken as a first component. If there is more than one <RT·name>, they are concatenated with a newline separator. If any vector has a <RT·name>, then the name column is reserved. Missing names in the name column are given a visual placeholder value of '•'. Component scalar values are given in <RT·e> tags, these are taken in the order they occur. -
- - + + <!DOCTYPE html> + <html lang="en"> + <head> + <meta charset="UTF-8"> + <title>RT Manuscript: Reference Manual</title> + <script src="RT-Manuscript_locator.js"></script> + <script> + window.RT.theme_preference('inverse_wheat'); + window.RT.load('Layout/paginate'); + window.RT.load('Layout/article_tech_ref'); + window.RT.load('Element/theme_selector'); + </script> + </head> + <body> + <RT·theme-selector></RT·theme-selector> + <RT·article> + … + </RT·article> + </body> + </html> + -

Generators

+ + Decorators + + + Semantic anchor for technical terminology. Formats the initial occurrence and registers the element ID for index generation. Authors must mark all occurrences of the term.
+
+
Attributes:
+ id: (Default: Auto-generated slug, e.g., "def-my-term") +
+ + + Semantic anchor for a novel term coined within the current document boundaries. Registers the ID for index generation.
+
+
Attributes:
+ id: (Default: Auto-generated slug, e.g., "def-neo-my-term") +
+ + + -

Data-injection nodes. These elements do not wrap content; execution is governed strictly by the attributes provided.

+ + Layout environments +

+ Context-aware formatting blocks. Valid inline or as distinct segments. +

+ + + Establishes a scoped 1D execution boundary. Manages hierarchical counting numbering, page breaks for top-level scopes, and injects the formatted title. +
+
Child Element: <RT·name> (Required: The title payload for the section). +
+ + + The semantic title payload for a container. Evaluated by sections, grids, and relations. Multiple instances are concatenated with newlines. + + + Code span or pre-formatted code block. Automatically dedents alignment spaces and inherits theme boundaries. + + + Injects mathematical layout evaluation via the MathJax rendering engine. + + + - - - Constructs the primary document header block.
-
-
Attributes:
- title: (Default: "Untitled Document")
- author: (Default: None)
- date: (Default: None)
- copyright: (Default: None) -
- - - Compiles an automated Table of Contents by scanning the document's header hierarchy depth.
-
-
Attributes:
- level: Target heading index "N" or range "A-B". (Default: Context-aware. Scans backward for the nearest heading H(N) and evaluates targets at H(N+1)). -
- - - Generates the numeric list of endnote payloads. Replaces all inline endnote citations with bracketed indices. - - + + Grid environments +

+ These elements map semantic data into an internal Cartesian grid state prior to CSS projection, isolating the markup from physical layout mechanics. +

+ + + Base Cartesian coordinate grid. Projects child <RT·e> elements based on explicitly defined x and y index geometries.
+
+
Attributes:
+ model: Projection strategy. "html-grid-direct" or "html-grid-transpose". (Default: "html-grid-direct")
+ major: Carriage return trigger direction. "x" or "y". (Default: "x")
+
+ Child Element: <RT·e>
+ x: Target x-axis index or index range (e.g., "0-2", where 2 is the maximum index into an array regardless of data type). Default when no y value, is to auto increment, default with a y value is to reset to 0.
+ y: Target y-axis index or index range. Default is to keep the prior value.
+ type: Decoration type. "data", "x-label", "y-label", or "name". (Default: "data") +
+ + + Two-column associative layout mapping explicitly declared keys to their scoped definitions.
+
+
Attributes:
+ key: Header text for the identifier column.
+ definition: Header text for the data payload column.
+
+ Child Element: <RT·entry>
+ key: The term being defined. The scoped HTML of the entry forms the definition value. +
+ + + Relational algebra layout formatter. Enforces multi-line text wrapping limits, calculates row distinction boundaries, and restricts column headers to the tuple scope.
+
+
Attributes:
+ layout-intention: "row-tuple" or "column-tuple". (Default: "row-tuple")
+
+ Child Elements:
+ <RT·tuple-meta>: Describes the components rather than providing them. E.g.<RT·label> provides a component label.
+ <RT·tuple>: Container for components. Each <RT·name> is taken as a first component. If there is more than one <RT·name>, they are concatenated with a newline separator. If any tuple has a <RT·name>, then the name column is reserved. Missing names in the name column are given a visual placeholder value of '•'. Component data values are given in <RT·e> tags, these are taken in the order they occur. +
+ + + Linear algebraic matrix representation. Enforces rigid padding, brackets mathematical delimiters, and suppresses the exterior grid coordinate layout.
+
+
Attributes:
+ layout-intention: "row-vector" or "column-vector". (Default: "row-vector")
+
+ Child Elements:
+ <RT·vector-meta>: Describes the components rather than providing them. E.g. <RT·label> provides a component label.
+ <RT·vector>: Container for components. Each <RT·name> is taken as a first component. If there is more than one <RT·name>, they are concatenated with a newline separator. If any vector has a <RT·name>, then the name column is reserved. Missing names in the name column are given a visual placeholder value of '•'. Component scalar values are given in <RT·e> tags, these are taken in the order they occur. +
+ + + -

Counters

-

- Counters operate as explicit state machines. Initialization requires a unique identifier. Execution evaluates scope depth and increments the state. The layout engine maintains a single internal representation but maps it to multiple visual styles upon request. -

- - - - Initializes the named counter state machine.
-
-
Attributes:
- counter: Required state identifier.
- style: Single style string, or comma-separated hierarchy defining formats at each nesting depth. The terminal format applies to all deeper nestings. Valid arguments: "NaturalNumber", "CountingNumber", "Roman", "roman", "Alpha", "alpha". The "outline" flag translates to a standard mixed document array. (Default: "NaturalNumber")
- on-first-step: The initial base value. (Default: "0")
- separator: String appended between depth sequence levels. (Default: ".")
- separator-placement: "embedded" or "embedded-after". (Default: "embedded")
- mode: "scoped" (content embedded between count boundaries receives the parent scope's value) or "milestone" (state carries forward sequentially irrespective of lexical depth). -
- - - Increments the counter block. Executing a step inside an existing step boundary pushes the state to the next depth index.
-
-
Attributes:
- counter: Required state identifier. -
- - - Clones the active count variables into the lookup dictionary. Snapshot processing operates independently of the layout pass, allowing global retrieval regardless of physical placement.
-
-
Attributes:
- counter: Required state identifier.
- snapshot: Required dictionary assignment key. -
- - - Retrieves the stored snapshot and projects it as innerHTML.
-
-
Attributes:
- snapshot: Required dictionary assignment key.
- key: Sub-state query property. Resolves dot-notation parameters (e.g., "count.status", "count.list"). Querying "count" triggers the style formatter and separator join parameters. (Default: "count") -
- - + + Generators +

Data-injection nodes. These elements do not wrap content; execution is governed strictly by the attributes provided.

-

Cross reference

-

- A two-pass structural mechanism bridging logical content with its physically paginated layout geometry. -

- - - - Registers the scoped content and its finalized layout page index into the reference dictionary.
-
-
Attributes:
- key: Required mapping identifier. -
- - - Queries the reference dictionary and injects the output.
-
-
Attributes:
- key: Target mapping identifier.
- field: Data extraction parameter. Valid targets are "content" (the original HTML payload) or "page" (the evaluated layout page number). (Default: "content") -
- - + + + Constructs the primary document header block.
+
+
Attributes:
+ title: (Default: "Untitled Document")
+ author: (Default: None)
+ date: (Default: None)
+ copyright: (Default: None) +
+ + + Compiles an automated Table of Contents by scanning the document's nested <RT·section> hierarchy depth.
+
+
Attributes:
+ level: Target section depth index "N" or range "A-B". (Default: 1-6). +
+ + + Generates the numeric list of endnote payloads. Replaces all inline endnote citations with bracketed indices. + + + -

Annotation

- - - Marks the scoped content for extraction and placement in the endnotes block. - - - Marks the scoped content for layout relocation to the active page's footer. - - + + Counters +

+ Counters operate as explicit state machines. Initialization requires a unique identifier. Execution evaluates scope depth and increments the state. The layout engine maintains a single internal representation but maps it to multiple visual styles upon request. +

+ + + + Initializes the named counter state machine.
+
+
Attributes:
+ counter: Required state identifier.
+ style: Single style string, or comma-separated hierarchy defining formats at each nesting depth. The terminal format applies to all deeper nestings. Valid arguments: "NaturalNumber", "CountingNumber", "Roman", "roman", "Alpha", "alpha". The "outline" flag translates to a standard mixed document array. (Default: "NaturalNumber")
+ on-first-step: The initial base value. (Default: "0")
+ separator: String appended between depth sequence levels. (Default: ".")
+ separator-placement: "embedded" or "embedded-after". (Default: "embedded")
+ mode: "scoped" (content embedded between count boundaries receives the parent scope's value) or "milestone" (state carries forward sequentially irrespective of lexical depth). +
+ + + Increments the counter block. Executing a step inside an existing step boundary pushes the state to the next depth index.
+
+
Attributes:
+ counter: Required state identifier. +
+ + + Clones the active count variables into the lookup dictionary. Snapshot processing operates independently of the layout pass, allowing global retrieval regardless of physical placement.
+
+
Attributes:
+ counter: Required state identifier.
+ snapshot: Required dictionary assignment key. +
+ + + Retrieves the stored snapshot and projects it as innerHTML.
+
+
Attributes:
+ snapshot: Required dictionary assignment key.
+ key: Sub-state query property. Resolves dot-notation parameters (e.g., "count.status", "count.list"). Querying "count" triggers the style formatter and separator join parameters. (Default: "count") +
+ + + -

Pagination

- - - Physical document boundary generated dynamically by the paginator. Not for manual insertion. - - - Explicit directive terminating the current <RT·page> evaluation and pushing subsequent data to the next boundary. - - + + Cross reference +

+ A two-pass mechanism bridging logical content with its physically paginated layout geometry. +

+ + + + Registers the scoped content and its finalized layout page index into the reference dictionary.
+
+
Attributes:
+ key: Required mapping identifier. +
+ + + Queries the reference dictionary and injects the output.
+
+
Attributes:
+ key: Target mapping identifier.
+ field: Data extraction parameter. Valid targets are "content" (the original HTML payload) or "page" (the evaluated layout page number). (Default: "content") +
+ + + -

Memo environment

-

- The <RT·memo> container inherits all layout functionality from the Article configuration but enforces a static, print-ready CSS environment. -

+ + Annotation + + + Marks the scoped content for extraction and placement in the endnotes block. + + + Marks the scoped content for layout relocation to the active page's footer. + + + -

Book environment

-

- The <RT·book> container manages multi-chapter assemblies. It executes tags restricted to macro-level architectural transitions. -

+ + Pagination + + + Physical document boundary generated dynamically by the paginator. Not for manual insertion. + + + Explicit directive terminating the current <RT·page> evaluation and pushing subsequent data to the next boundary. + + + + -

Book specific tags

- - - Chapter delimiter. Triggers an immediate page break, escalates to H1 typography, and writes a top-level node to the TOC sequence. Retains any authored class attributes. - - + + Memo Environment +

+ The <RT·memo> container inherits all layout functionality from the Article configuration but enforces a static, print-ready CSS environment. +

+

+ Implementation Note: This layout model is currently maintained as a legacy execution branch. Continued parity with the core layout engine is not guaranteed. +

+ -

Global widgets

- - - Injects a floating overlay permitting real-time CSS theme execution. Writes the selection to the browser's localStorage. - - + + Global widgets + + + Injects a floating overlay permitting real-time CSS theme execution. Writes the selection to the browser's localStorage. + + + diff --git a/developer/authored/Manuscript.copy/Element/TOC.js b/developer/authored/Manuscript.copy/Element/TOC.js index b91835a..b1c6df1 100644 --- a/developer/authored/Manuscript.copy/Element/TOC.js +++ b/developer/authored/Manuscript.copy/Element/TOC.js @@ -1,28 +1,15 @@ /* + Element/TOC.js Processes tags. - Populates each with headings found below it. - - Attributes: - level="N" : Explicitly sets the target heading level (1-6). - e.g., level="1" collects H1s. level="2" collects H2s. - Stops collecting if it hits a heading of (level - 1) or higher. - - Default (No attribute): - Context Aware. Looks backwards for the nearest heading H(N). - Targets H(N+1). Stops at the next H(N). - -First heading 1 1 - First heading 2 2 - Next heading 2 2 -Next heading 2 3 - + Iterates nested boundaries, evaluates tree depth, + and duplicates the title payload for automated navigation. */ (function() { if (!window.RT) return; - const apply_style = function(a, config) { + const apply_style = function(a ,config) { a.style.textDecoration = 'none'; a.style.color = 'inherit'; a.style.display = 'block'; @@ -33,6 +20,8 @@ Next heading 2 3 RT.Element.add( function() { const debug = window.RT.Debug || { log: function(){} }; + if (debug.log) debug.log('TOC' ,'Generating Table of Contents from nested sections'); + const config = window.RT.layout_config || {}; const TOC_seq = document.querySelectorAll('rt·toc, RT·TOC'); @@ -40,68 +29,65 @@ Next heading 2 3 container.style.display = 'block'; const attr_val = container.getAttribute('level'); - let start_level, end_level; - + let start_level = 1; + let end_level = 6; + if (attr_val) { const rangeMatch = attr_val.match(/^(\d)-(\d)$/); if (rangeMatch) { - const a = parseInt(rangeMatch[1]); - const b = parseInt(rangeMatch[2]); - if (a >= 1 && a <= 6 && b >= 1 && b <= 6 && a <= b) { - start_level = a; - end_level = b; - } + start_level = parseInt(rangeMatch[1]); + end_level = parseInt(rangeMatch[2]); } else { const single = parseInt(attr_val); - if (!isNaN(single) && single >= 1 && single <= 6) { + if (!isNaN(single)) { start_level = single; end_level = single; } } } - if (start_level === undefined || end_level === undefined) { - let context_level = 0; - let prev = container.previousElementSibling; - while (prev) { - const match = prev.tagName.match(/^H([1-6])$/); - if (match) { - context_level = parseInt(match[1]); - break; + const sections = []; + const all_sections = document.querySelectorAll('rt·section, RT·section'); + + all_sections.forEach(section => { + let depth = 0; + let curr = section.parentElement; + + while (curr) { + if (curr.tagName && curr.tagName.toLowerCase() === 'rt·section') { + depth++; } - prev = prev.previousElementSibling; + curr = curr.parentElement; } - const target_level = Math.min(context_level + 1, 6); - start_level = target_level; - end_level = target_level; - } - - const headings = []; - let next_el = container.nextElementSibling; - while (next_el) { - const match = next_el.tagName.match(/^H([1-6])$/); - if (match) { - const found_level = parseInt(match[1]); - - if (found_level < start_level) break; - - if (found_level >= start_level && found_level <= end_level) { - if (!next_el.id) { - next_el.id = `TOC-ref-${TOC_index}-${found_level}-${headings.length}`; - } - headings.push({ el: next_el, level: found_level }); + + const level = depth + 1; + if (level >= start_level && level <= end_level) { + + // Use querySelector to safely find the title regardless of nested wrapper logic + const title_node = section.querySelector('.RT·section-title'); + + if (title_node) { + sections.push({ + id: section.id + ,level: level + ,html: title_node.innerHTML + }); } } - next_el = next_el.nextElementSibling; - } + }); container.innerHTML = ''; - const title = document.createElement('h1'); + const title = document.createElement('div'); + title.className = 'RT·TOC-title'; title.textContent = start_level === 1 ? 'Table of Contents' : 'Section Contents'; title.style.textAlign = 'center'; + title.style.fontWeight = '600'; + title.style.fontSize = '1.5em'; + title.style.marginBottom = '1.5rem'; + title.style.color = config.brand_primary || '#000'; container.appendChild(title); - if (headings.length === 0) return; + if (sections.length === 0) return; const topList = document.createElement('ul'); topList.style.listStyle = 'none'; @@ -111,7 +97,7 @@ Next heading 2 3 const listStack = [topList]; - for (const item of headings) { + for (const item of sections) { const depth = item.level - start_level; while (listStack.length - 1 > depth) { @@ -139,10 +125,10 @@ Next heading 2 3 li.style.marginTop = depth === 0 ? '1.25rem' : '0.25rem'; const a = document.createElement('a'); - a.href = `#${item.el.id}`; - a.textContent = item.el.textContent; + a.href = `#${item.id}`; + a.innerHTML = item.html; - apply_style(a, config); + apply_style(a ,config); li.appendChild(a); listStack[listStack.length - 1].appendChild(li); diff --git a/developer/authored/Manuscript.copy/Element/section.js b/developer/authored/Manuscript.copy/Element/section.js index cb156fc..7fd9361 100644 --- a/developer/authored/Manuscript.copy/Element/section.js +++ b/developer/authored/Manuscript.copy/Element/section.js @@ -1,7 +1,8 @@ /* Element/section.js Processes tags. - Extracts payloads, manages outline numbering, and injects the formatted title. + Applies counting hierarchical numbering, conditional alignment/indents, + subdued dark red borders for top-level elements, and universal page breaks for chapters. */ (function() { @@ -9,26 +10,33 @@ if (!window.RT) return; const apply_style = function(title_node ,depth ,config) { - // Top-level sections start large; scale down based on nesting depth const base_size = 2.25; const size = Math.max(1.1 ,base_size - (depth * 0.35)); + const fade_opacity = Math.max(0.5 ,1 - (depth * 0.2)); + + if (depth === 0) { + title_node.style.textAlign = 'center'; + title_node.style.paddingLeft = '0'; + // Firebrick provides sufficient chroma contrast against dark backgrounds + title_node.style.borderBottom = '2px solid #B22222'; + title_node.style.paddingBottom = '0.5rem'; + } else { + title_node.style.textAlign = 'left'; + title_node.style.paddingLeft = (depth * 1.5) + 'rem'; + } title_node.style.fontSize = size + 'em'; title_node.style.fontWeight = '600'; title_node.style.color = config.brand_primary || '#000'; + title_node.style.opacity = fade_opacity.toString(); title_node.style.marginTop = depth === 0 ? '3rem' : '2rem'; title_node.style.marginBottom = '1rem'; title_node.style.lineHeight = '1.2'; - - if(depth === 0) { - title_node.style.borderBottom = '1px solid ' + (config.border_faint || '#ccc'); - title_node.style.paddingBottom = '0.5rem'; - } }; RT.Element.add(function() { const debug = window.RT.Debug || { log: function(){} }; - if (debug.log) debug.log('section' ,'Processing scoped sections'); + if (debug.log) debug.log('section' ,'Processing scoped sections with counting numbering'); const config = window.RT.layout_config || {}; const section_seq = document.querySelectorAll('RT·section, rt·section'); @@ -39,7 +47,8 @@ if (article && !document.querySelector('rt·counter·make[counter="RT_section"]')) { const make = document.createElement('rt·counter·make'); make.setAttribute('counter' ,'RT_section'); - make.setAttribute('style' ,'outline'); + // Utilizing CountingNumber to output 1.1.1 rather than 0.0.0 + make.setAttribute('style' ,'CountingNumber'); make.setAttribute('mode' ,'scoped'); make.setAttribute('on-first-step' ,'0'); article.insertBefore(make ,article.firstChild); @@ -59,6 +68,14 @@ curr = curr.parentElement; } + // Force ALL top-level sections to start on a new page + if (depth === 0) { + if (!section.previousElementSibling?.tagName?.toLowerCase().includes('page-break')) { + const pb = document.createElement('rt·page-break'); + section.parentNode.insertBefore(pb, section); + } + } + const names = []; const children = Array.from(section.children); children.forEach(child => { @@ -73,6 +90,10 @@ const step = document.createElement('rt·counter·step'); step.setAttribute('counter' ,'RT_section'); + while (section.firstChild) { + step.appendChild(section.firstChild); + } + const snap_id = 'section_snap_' + section_idx++; const snap = document.createElement('rt·counter·snapshot'); snap.setAttribute('counter' ,'RT_section'); @@ -80,15 +101,13 @@ const title_node = document.createElement('div'); title_node.className = 'RT·section-title'; - - // Map identifier for TOC routing if (!section.id) section.id = snap_id; const read = document.createElement('rt·counter·read'); read.setAttribute('snapshot' ,snap_id); const title_content = document.createElement('span'); - title_content.style.marginLeft = '1rem'; + title_content.style.marginLeft = '0.75rem'; title_content.innerHTML = title_text; title_node.appendChild(read); @@ -96,9 +115,10 @@ apply_style(title_node ,depth ,config); - section.insertBefore(title_node ,section.firstChild); - section.insertBefore(snap ,section.firstChild); - section.insertBefore(step ,section.firstChild); + step.insertBefore(title_node ,step.firstChild); + step.insertBefore(snap ,step.firstChild); + + section.appendChild(step); }); }); diff --git a/developer/authored/Manuscript.copy/Element/title.js b/developer/authored/Manuscript.copy/Element/title.js index c95ef75..23afa23 100644 --- a/developer/authored/Manuscript.copy/Element/title.js +++ b/developer/authored/Manuscript.copy/Element/title.js @@ -1,143 +1,77 @@ /* - Element/TOC.js - Processes tags. - Iterates nested boundaries, evaluates tree depth, - and duplicates the title payload for automated navigation. + Element/title.js + Processes tags and isolates internal styling logic. */ -(function() { - - if (!window.RT) return; - - const apply_style = function(a ,config) { - a.style.textDecoration = 'none'; - a.style.color = 'inherit'; - a.style.display = 'block'; - - a.onmouseover = () => a.style.color = config.brand_primary || '#000'; - a.onmouseout = () => a.style.color = 'inherit'; +(function(){ + + if(!window.RT) return; + + const apply_style = function(container ,h1 ,meta ,copy_div ,config){ + container.style.textAlign = 'center'; + container.style.marginBottom = '3rem'; + container.style.marginTop = '2rem'; + container.style.borderBottom = '1px solid ' + config.border_default; + container.style.paddingBottom = '1.5rem'; + + h1.style.margin = '0 0 0.8rem 0'; + h1.style.border = 'none'; + h1.style.padding = '0'; + h1.style.color = config.brand_primary; + h1.style.fontSize = '2.5em'; + h1.style.lineHeight = '1.1'; + h1.style.letterSpacing = '-0.03em'; + + if(meta){ + meta.style.color = config.content_muted; + meta.style.fontStyle = 'italic'; + meta.style.fontSize = '1.1em'; + meta.style.fontFamily = '"Georgia", "Times New Roman", serif'; + } + + if(copy_div){ + copy_div.style.color = config.content_muted; + copy_div.style.fontSize = '0.9em'; + copy_div.style.marginTop = '0.5rem'; + } }; - RT.Element.add( function() { - const debug = window.RT.Debug || { log: function(){} }; - if (debug.log) debug.log('TOC' ,'Generating Table of Contents from nested sections'); - + RT.Element.add(function(){ const config = window.RT.layout_config || {}; - const TOC_seq = document.querySelectorAll('rt·toc, RT·TOC'); - - TOC_seq.forEach( (container ,TOC_index) => { - container.style.display = 'block'; - - const attr_val = container.getAttribute('level'); - let start_level = 1; - let end_level = 6; - - if (attr_val) { - const rangeMatch = attr_val.match(/^(\d)-(\d)$/); - if (rangeMatch) { - start_level = parseInt(rangeMatch[1]); - end_level = parseInt(rangeMatch[2]); - } else { - const single = parseInt(attr_val); - if (!isNaN(single)) { - start_level = single; - end_level = single; - } - } + const nodes = document.querySelectorAll('rt·title, RT·title'); + + for(let i = 0; i < nodes.length; i++){ + const el = nodes[i]; + const title = el.getAttribute('title') || 'Untitled Document'; + const author = el.getAttribute('author'); + const date = el.getAttribute('date'); + const copyright = el.getAttribute('copyright'); + + const container = document.createElement('div'); + const h1 = document.createElement('h1'); + h1.textContent = title; + container.appendChild(h1); + + let meta = null; + if(author || date){ + meta = document.createElement('div'); + const parts = []; + if(author) parts.push(`${author}`); + if(date) parts.push(date); + meta.innerHTML = parts.join('  —  '); + container.appendChild(meta); } - const sections = []; - const all_sections = document.querySelectorAll('rt·section, RT·section'); - - all_sections.forEach(section => { - let depth = 0; - let curr = section.parentElement; - - while (curr) { - if (curr.tagName && curr.tagName.toLowerCase() === 'rt·section') { - depth++; - } - curr = curr.parentElement; - } - - const level = depth + 1; - if (level >= start_level && level <= end_level) { - let title_node = null; - for (let i = 0; i < section.children.length; i++) { - if (section.children[i].className === 'RT·section-title') { - title_node = section.children[i]; - break; - } - } - - if (title_node) { - sections.push({ - id: section.id - ,level: level - ,html: title_node.innerHTML - }); - } - } - }); - - container.innerHTML = ''; - const title = document.createElement('div'); - title.className = 'RT·TOC-title'; - title.textContent = start_level === 1 ? 'Table of Contents' : 'Section Contents'; - title.style.textAlign = 'center'; - title.style.fontWeight = '600'; - title.style.fontSize = '1.5em'; - title.style.marginBottom = '1.5rem'; - title.style.color = config.brand_primary || '#000'; - container.appendChild(title); - - if (sections.length === 0) return; - - const topList = document.createElement('ul'); - topList.style.listStyle = 'none'; - topList.style.paddingLeft = '0'; - topList.style.marginBottom = '0'; - container.appendChild(topList); - - const listStack = [topList]; - - for (const item of sections) { - const depth = item.level - start_level; - - while (listStack.length - 1 > depth) { - listStack.pop(); - } - - while (listStack.length - 1 < depth) { - const parentList = listStack[listStack.length - 1]; - const lastLi = parentList.lastElementChild; - - if (lastLi) { - const subList = document.createElement('ul'); - subList.style.listStyle = 'none'; - subList.style.paddingLeft = '1.5rem'; - subList.style.marginBottom = '0'; - lastLi.appendChild(subList); - listStack.push(subList); - } else { - break; - } - } - - const li = document.createElement('li'); - li.style.marginBottom = '0'; - li.style.marginTop = depth === 0 ? '1.25rem' : '0.25rem'; - - const a = document.createElement('a'); - a.href = `#${item.id}`; - a.innerHTML = item.html; - - apply_style(a ,config); - - li.appendChild(a); - listStack[listStack.length - 1].appendChild(li); + let copy_div = null; + if(copyright){ + copy_div = document.createElement('div'); + copy_div.innerHTML = `© ${copyright}`; + container.appendChild(copy_div); } - }); + + apply_style(container ,h1 ,meta ,copy_div ,config); + el.replaceWith(container); + } }); })();