<RT·theme-selector></RT·theme-selector>
<RT·article>
+ <!-- Title Page Scope -->
<RT·title
title="RT Style System: Reference Manual"
author="Thomas Walker Lynch"
- date="2026-08-03 01:52Z"
+ date="2026-08-04 16:15Z"
copyright="2026 Reasoning Technology">
</RT·title>
- <RT·TOC level="1-2"></RT·TOC>
-
- <h1>Leonardo·da·Vinci and other notes</h1>
-
- <p>
- 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.
+ <p style="text-align: center; font-size: 1.2em; font-style: italic; margin-bottom: 4rem;">
+ A semantic JavaScript engine for intercepting and compiling raw DOM data graphs into formatted technical manuscripts.
</p>
- <p>
- <RT·term>Content</RT·term> is found between the opening HTML tag and the closing HTML tag. E.g. <RT·code><RT·noop>This is content.</RT·noop></RT·code>.
- </p>
+ <RT·TOC level="1-2"></RT·TOC>
- <p>
- An <RT·term>attribute</RT·term> is a name-value pair found within an opening HTML tag. E.g. <RT·code><RT·noop name="value"></RT·code>. Here the attribute name is <em>name</em> and the attribute value is <em>value</em>.
- </p>
+ <RT·section>
+ <RT·name>Core Philosophy</RT·name>
+ <p>
+ The RT Style framework fundamentally rejects static CSS class mapping. Instead, it relies on semantic DOM isolation. Authors define logical boundaries utilizing <code>RT·</code> tags, completely separating the data graph from its physical presentation.
+ </p>
+ <p>
+ Styling is executed dynamically at runtime. JavaScript closure functions (e.g., <code>apply_style</code>) intercept the parsed DOM tree, evaluate the active theme variables, calculate necessary dimensions, and inject inline styles directly into the elements.
+ </p>
+ <p>
+ <strong>Typography Note:</strong> 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 -.
+ </p>
+ <p>
+ <RT·term>Content</RT·term> is found between the opening HTML tag and the closing HTML tag. E.g. <RT·code><RT·noop>This is content.</RT·noop></RT·code>.
+ </p>
+ <p>
+ An <RT·term>attribute</RT·term> is a name-value pair found within an opening HTML tag. E.g. <RT·code><RT·noop name="value"></RT·code>. Here the attribute name is <em>name</em> and the attribute value is <em>value</em>.
+ </p>
+ </RT·section>
- <p>
- All tags must be provided in pairs, though not all enforce scoped content constraints.
- </p>
-
- <h1>Manuscript types</h1>
- <p>
- Top-level semantic environments. These boundaries enforce the rendering constraints for all scoped content, encompassing both custom RT elements and standard HTML tags.
- </p>
-
- <RT·dictionary key="Tag" definition="Description & Arguments">
- <RT·entry key="<RT·article>">
- Standard technical document architecture.
- </RT·entry>
- <RT·entry key="<RT·memo>">
- Strict print layout constraint (6.5-inch width boundary, serif typography, monochrome execution).
- </RT·entry>
- <RT·entry key="<RT·book>">
- Multi-chapter architecture. (Implementation pending; currently routes through the article layout).
- </RT·entry>
- </RT·dictionary>
+ <RT·section>
+ <RT·name>Execution Pipeline Schedule</RT·name>
+ <p>
+ 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.
+ </p>
+ <p>
+ RT-Style operates on a strictly phased, non-monotonic DOM evaluation schedule governed by the <code>stage_manager.js</code>. Developers writing custom elements must target the correct execution phase to prevent destructive collisions.
+ </p>
- <h2>Article manuscript</h2>
+ <RT·dictionary key="Phase" definition="Operation">
+ <RT·entry key="Phase 1: Elements">
+ Evaluates raw 1D streams. Injects section wrappers, maps counter states, evaluates math tokens, and isolates explicit string payloads.
+ </RT·entry>
+ <RT·entry key="Phase 2: Paginate 0">
+ Initial document chunking. Slices the continuous DOM into discrete <code><RT·page></code> boundaries based on height configurations. Modifies the tree aggressively.
+ </RT·entry>
+ <RT·entry key="Phase 3: Page Style">
+ Applies geometric CSS configurations to the generated pages.
+ </RT·entry>
+ <RT·entry key="Phase 4: Counters">
+ Walks the tree to increment the state machines and populates snapshot variables. Must run after pagination to ensure page numbers exist.
+ </RT·entry>
+ <RT·entry key="Phase 5: Cross Reference">
+ Resolves mapping dictionaries bridging logical content with its physically paginated layout geometry.
+ </RT·entry>
+ <RT·entry key="Phase 6: Paginate 1">
+ Absorbs dimensional deltas. Expands page limits to accommodate space consumed by injected cross-references and generated indices.
+ </RT·entry>
+ </RT·dictionary>
+ </RT·section>
- <p>Structural header template for an article instance.</p>
+ <RT·section>
+ <RT·name>Manuscript Types</RT·name>
+ <p>
+ These are the top-level semantic environments. They establish the macro-boundaries that enforce the rendering constraints for all scoped child content.
+ </p>
- <RT·code>
- <!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>
- </RT·code>
+ <RT·dictionary key="Tag" definition="Description & Arguments">
+ <RT·entry key="<RT·article>">
+ Standard technical document architecture designed for continuous digital reading.
+ </RT·entry>
+ <RT·entry key="<RT·memo>">
+ Strict print layout constraint designed to mirror standard physical paper dimensions.
+ </RT·entry>
+ <RT·entry key="<RT·book>">
+ Multi-chapter assembly architecture.
+ </RT·entry>
+ </RT·dictionary>
- <h3>Decorators</h3>
- <RT·dictionary key="Tag" definition="Description & Arguments">
- <RT·entry key="<RT·term>">
- 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.<br>
- <div class="attr-list">
- <br><strong>Attributes:</strong><br>
- <code>id</code>: (Default: Auto-generated slug, e.g., "def-my-term")
- </div>
- </RT·entry>
- <RT·entry key="<RT·neologism>">
- Semantic anchor for a novel term coined within the current document boundaries. Registers the ID for index generation.<br>
- <div class="attr-list">
- <br><strong>Attributes:</strong><br>
- <code>id</code>: (Default: Auto-generated slug, e.g., "def-neo-my-term")
- </div>
- </RT·entry>
- </RT·dictionary>
+ <p>
+ <strong>Implementation Note:</strong> The <code><RT·book></code> element is a planned extension. We are deliberately delaying its separation from the <code>article</code> 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.
+ </p>
+ </RT·section>
- <h3>Layout environments</h3>
- <p>
- Context-aware formatting blocks. Valid inline or as distinct structural segments.
- </p>
- <RT·dictionary key="Tag" definition="Description & Arguments">
- <RT·entry key="<RT·code>">
- Code span or pre-formatted code block. Automatically dedents structural alignment spaces and inherits theme boundaries.
- </RT·entry>
- <RT·entry key="<RT·math>">
- Injects mathematical layout evaluation via the MathJax rendering engine.
- </RT·entry>
- </RT·dictionary>
+ <RT·section>
+ <RT·name>Article Environment</RT·name>
+ <p>The standard operational header template for an article instance:</p>
- <h3>Grid environments</h3>
- <p>
- These structures map semantic data into an internal Cartesian grid state prior to CSS projection, isolating the markup from physical layout mechanics.
- </p>
- <RT·dictionary key="Tag" definition="Description & Arguments">
- <RT·entry key="<RT·grid>">
- Base Cartesian coordinate grid. Projects child <RT·code><RT·e></RT·code> elements based on explicitly defined <em>x</em> and <em>y</em> index geometries.<br>
- <div class="attr-list">
- <br><strong>Attributes:</strong><br>
- <code>model</code>: Projection strategy. "html-grid-direct" or "html-grid-transpose". (Default: "html-grid-direct")<br>
- <code>major</code>: Carriage return trigger direction. "x" or "y". (Default: "x")<br>
- <br>
- <strong>Child Element:</strong> <RT·code><RT·e></RT·code><br>
- <code>x</code>: Target <em>x</em>-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.<br>
- <code>y</code>: Target <em>y</em>-axis index or index range. Default is to keep the prior value.<br>
- <code>type</code>: Decoration type. "data", "x-label", "y-label", or "name". (Default: "data")
- </div>
- </RT·entry>
- <RT·entry key="<RT·dictionary>">
- Two-column associative layout mapping explicitly declared keys to their scoped definitions.<br>
- <div class="attr-list">
- <br><strong>Attributes:</strong><br>
- <code>key</code>: Header text for the identifier column.<br>
- <code>definition</code>: Header text for the data payload column.<br>
- <br>
- <strong>Child Element:</strong> <RT·code><RT·entry></RT·code><br>
- <code>key</code>: The term being defined. The scoped HTML of the entry forms the definition value.
- </div>
- </RT·entry>
- <RT·entry key="<RT·relation>">
- Relational algebra layout formatter. Enforces multi-line text wrapping limits, calculates row distinction boundaries, and restricts column headers to the tuple scope.<br>
- <div class="attr-list">
- <br><strong>Attributes:</strong><br>
- <code>layout-intention</code>: "row-tuple" or "column-tuple". (Default: "row-tuple")<br>
- <br>
- <strong>Child Elements:</strong><br>
- <RT·code><RT·tuple-meta></RT·code>: Describes the components rather than providing them. E.g.<RT·code><RT·label></RT·code> provides a component label.<br>
- <RT·code><RT·tuple></RT·code>: Container for components. Each <RT·code><RT·name></RT·code> is taken as a first component. If there is more than one <RT·code><RT·name></RT·code>, they are concatenated with a newline separator. If any tupple has a <RT·code><RT·name></RT·code>, 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·code><RT·e></RT·code> tags, these are taken in the order they occur.
- </div>
- </RT·entry>
- <RT·entry key="<RT·matrix>">
- Linear algebraic matrix representation. Enforces rigid structural padding, brackets mathematical delimiters, and suppresses the exterior grid coordinate layout.<br>
- <div class="attr-list">
- <br><strong>Attributes:</strong><br>
- <code>layout-intention</code>: "row-vector" or "column-vector". (Default: "row-vector")<br>
- <br>
- <strong>Child Elements:</strong><br>
- <RT·code><RT·vector-meta></RT·code>: Describes the components rather than providing them. E.g. <RT·code><RT·label></RT·code> provides a component label.<br>
- <RT·code><RT·vector></RT·code>: Container for components. Each <RT·code><RT·name></RT·code> is taken as a first component. If there is more than one <RT·code><RT·name></RT·code>, they are concatenated with a newline separator. If any vector has a <RT·code><RT·name></RT·code>, 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·code><RT·e></RT·code> tags, these are taken in the order they occur.
- </div>
- </RT·entry>
- </RT·dictionary>
+ <RT·code>
+ <!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>
+ </RT·code>
- <h3>Generators</h3>
+ <RT·section>
+ <RT·name>Decorators</RT·name>
+ <RT·dictionary key="Tag" definition="Description & Arguments">
+ <RT·entry key="<RT·term>">
+ 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.<br>
+ <div class="attr-list">
+ <br><strong>Attributes:</strong><br>
+ <code>id</code>: (Default: Auto-generated slug, e.g., "def-my-term")
+ </div>
+ </RT·entry>
+ <RT·entry key="<RT·neologism>">
+ Semantic anchor for a novel term coined within the current document boundaries. Registers the ID for index generation.<br>
+ <div class="attr-list">
+ <br><strong>Attributes:</strong><br>
+ <code>id</code>: (Default: Auto-generated slug, e.g., "def-neo-my-term")
+ </div>
+ </RT·entry>
+ </RT·dictionary>
+ </RT·section>
- <p>Data-injection nodes. These elements do not wrap content; execution is governed strictly by the attributes provided.</p>
+ <RT·section>
+ <RT·name>Layout environments</RT·name>
+ <p>
+ Context-aware formatting blocks. Valid inline or as distinct segments.
+ </p>
+ <RT·dictionary key="Tag" definition="Description & Arguments">
+ <RT·entry key="<RT·section>">
+ Establishes a scoped 1D execution boundary. Manages hierarchical counting numbering, page breaks for top-level scopes, and injects the formatted title.
+ <div class="attr-list">
+ <br><strong>Child Element:</strong> <RT·code><RT·name></RT·code> (Required: The title payload for the section).
+ </div>
+ </RT·entry>
+ <RT·entry key="<RT·name>">
+ The semantic title payload for a container. Evaluated by sections, grids, and relations. Multiple instances are concatenated with newlines.
+ </RT·entry>
+ <RT·entry key="<RT·code>">
+ Code span or pre-formatted code block. Automatically dedents alignment spaces and inherits theme boundaries.
+ </RT·entry>
+ <RT·entry key="<RT·math>">
+ Injects mathematical layout evaluation via the MathJax rendering engine.
+ </RT·entry>
+ </RT·dictionary>
+ </RT·section>
- <RT·dictionary key="Tag" definition="Description & Arguments">
- <RT·entry key="<RT·title>">
- Constructs the primary document header block.<br>
- <div class="attr-list">
- <br><strong>Attributes:</strong><br>
- <code>title</code>: (Default: "Untitled Document")<br>
- <code>author</code>: (Default: None)<br>
- <code>date</code>: (Default: None)<br>
- <code>copyright</code>: (Default: None)
- </div>
- </RT·entry>
- <RT·entry key="<RT·TOC>">
- Compiles an automated Table of Contents by scanning the document's header hierarchy depth.<br>
- <div class="attr-list">
- <br><strong>Attributes:</strong><br>
- <code>level</code>: 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)).
- </div>
- </RT·entry>
- <RT·entry key="<RT·endnotes>">
- Generates the numeric list of endnote payloads. Replaces all inline endnote citations with bracketed indices.
- </RT·entry>
- </RT·dictionary>
+ <RT·section>
+ <RT·name>Grid environments</RT·name>
+ <p>
+ These elements map semantic data into an internal Cartesian grid state prior to CSS projection, isolating the markup from physical layout mechanics.
+ </p>
+ <RT·dictionary key="Tag" definition="Description & Arguments">
+ <RT·entry key="<RT·grid>">
+ Base Cartesian coordinate grid. Projects child <RT·code><RT·e></RT·code> elements based on explicitly defined <em>x</em> and <em>y</em> index geometries.<br>
+ <div class="attr-list">
+ <br><strong>Attributes:</strong><br>
+ <code>model</code>: Projection strategy. "html-grid-direct" or "html-grid-transpose". (Default: "html-grid-direct")<br>
+ <code>major</code>: Carriage return trigger direction. "x" or "y". (Default: "x")<br>
+ <br>
+ <strong>Child Element:</strong> <RT·code><RT·e></RT·code><br>
+ <code>x</code>: Target <em>x</em>-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.<br>
+ <code>y</code>: Target <em>y</em>-axis index or index range. Default is to keep the prior value.<br>
+ <code>type</code>: Decoration type. "data", "x-label", "y-label", or "name". (Default: "data")
+ </div>
+ </RT·entry>
+ <RT·entry key="<RT·dictionary>">
+ Two-column associative layout mapping explicitly declared keys to their scoped definitions.<br>
+ <div class="attr-list">
+ <br><strong>Attributes:</strong><br>
+ <code>key</code>: Header text for the identifier column.<br>
+ <code>definition</code>: Header text for the data payload column.<br>
+ <br>
+ <strong>Child Element:</strong> <RT·code><RT·entry></RT·code><br>
+ <code>key</code>: The term being defined. The scoped HTML of the entry forms the definition value.
+ </div>
+ </RT·entry>
+ <RT·entry key="<RT·relation>">
+ Relational algebra layout formatter. Enforces multi-line text wrapping limits, calculates row distinction boundaries, and restricts column headers to the tuple scope.<br>
+ <div class="attr-list">
+ <br><strong>Attributes:</strong><br>
+ <code>layout-intention</code>: "row-tuple" or "column-tuple". (Default: "row-tuple")<br>
+ <br>
+ <strong>Child Elements:</strong><br>
+ <RT·code><RT·tuple-meta></RT·code>: Describes the components rather than providing them. E.g.<RT·code><RT·label></RT·code> provides a component label.<br>
+ <RT·code><RT·tuple></RT·code>: Container for components. Each <RT·code><RT·name></RT·code> is taken as a first component. If there is more than one <RT·code><RT·name></RT·code>, they are concatenated with a newline separator. If any tuple has a <RT·code><RT·name></RT·code>, 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·code><RT·e></RT·code> tags, these are taken in the order they occur.
+ </div>
+ </RT·entry>
+ <RT·entry key="<RT·matrix>">
+ Linear algebraic matrix representation. Enforces rigid padding, brackets mathematical delimiters, and suppresses the exterior grid coordinate layout.<br>
+ <div class="attr-list">
+ <br><strong>Attributes:</strong><br>
+ <code>layout-intention</code>: "row-vector" or "column-vector". (Default: "row-vector")<br>
+ <br>
+ <strong>Child Elements:</strong><br>
+ <RT·code><RT·vector-meta></RT·code>: Describes the components rather than providing them. E.g. <RT·code><RT·label></RT·code> provides a component label.<br>
+ <RT·code><RT·vector></RT·code>: Container for components. Each <RT·code><RT·name></RT·code> is taken as a first component. If there is more than one <RT·code><RT·name></RT·code>, they are concatenated with a newline separator. If any vector has a <RT·code><RT·name></RT·code>, 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·code><RT·e></RT·code> tags, these are taken in the order they occur.
+ </div>
+ </RT·entry>
+ </RT·dictionary>
+ </RT·section>
- <h3>Counters</h3>
- <p>
- 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.
- </p>
-
- <RT·dictionary key="Tag" definition="Description & Arguments">
- <RT·entry key="<RT·Counter·make>">
- Initializes the named counter state machine.<br>
- <div class="attr-list">
- <br><strong>Attributes:</strong><br>
- <code>counter</code>: Required state identifier.<br>
- <code>style</code>: 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")<br>
- <code>on-first-step</code>: The initial base value. (Default: "0")<br>
- <code>separator</code>: String appended between depth sequence levels. (Default: ".")<br>
- <code>separator-placement</code>: "embedded" or "embedded-after". (Default: "embedded")<br>
- <code>mode</code>: "scoped" (content embedded between count boundaries receives the parent scope's value) or "milestone" (state carries forward sequentially irrespective of lexical depth).
- </div>
- </RT·entry>
- <RT·entry key="<RT·Counter·step>">
- Increments the counter block. Executing a step inside an existing step boundary pushes the state to the next depth index.<br>
- <div class="attr-list">
- <br><strong>Attributes:</strong><br>
- <code>counter</code>: Required state identifier.
- </div>
- </RT·entry>
- <RT·entry key="<RT·Counter·snapshot>">
- Clones the active count variables into the lookup dictionary. Snapshot processing operates independently of the layout pass, allowing global retrieval regardless of physical placement.<br>
- <div class="attr-list">
- <br><strong>Attributes:</strong><br>
- <code>counter</code>: Required state identifier.<br>
- <code>snapshot</code>: Required dictionary assignment key.
- </div>
- </RT·entry>
- <RT·entry key="<RT·Counter·read>">
- Retrieves the stored snapshot and projects it as innerHTML.<br>
- <div class="attr-list">
- <br><strong>Attributes:</strong><br>
- <code>snapshot</code>: Required dictionary assignment key.<br>
- <code>key</code>: 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")
- </div>
- </RT·entry>
- </RT·dictionary>
+ <RT·section>
+ <RT·name>Generators</RT·name>
+ <p>Data-injection nodes. These elements do not wrap content; execution is governed strictly by the attributes provided.</p>
- <h3>Cross reference</h3>
- <p>
- A two-pass structural mechanism bridging logical content with its physically paginated layout geometry.
- </p>
-
- <RT·dictionary key="Tag" definition="Description & Arguments">
- <RT·entry key="<RT·Note·write>">
- Registers the scoped content and its finalized layout page index into the reference dictionary.<br>
- <div class="attr-list">
- <br><strong>Attributes:</strong><br>
- <code>key</code>: Required mapping identifier.
- </div>
- </RT·entry>
- <RT·entry key="<RT·Note·read>">
- Queries the reference dictionary and injects the output.<br>
- <div class="attr-list">
- <br><strong>Attributes:</strong><br>
- <code>key</code>: Target mapping identifier.<br>
- <code>field</code>: Data extraction parameter. Valid targets are "content" (the original HTML payload) or "page" (the evaluated layout page number). (Default: "content")
- </div>
- </RT·entry>
- </RT·dictionary>
+ <RT·dictionary key="Tag" definition="Description & Arguments">
+ <RT·entry key="<RT·title>">
+ Constructs the primary document header block.<br>
+ <div class="attr-list">
+ <br><strong>Attributes:</strong><br>
+ <code>title</code>: (Default: "Untitled Document")<br>
+ <code>author</code>: (Default: None)<br>
+ <code>date</code>: (Default: None)<br>
+ <code>copyright</code>: (Default: None)
+ </div>
+ </RT·entry>
+ <RT·entry key="<RT·TOC>">
+ Compiles an automated Table of Contents by scanning the document's nested <code><RT·section></code> hierarchy depth.<br>
+ <div class="attr-list">
+ <br><strong>Attributes:</strong><br>
+ <code>level</code>: Target section depth index "N" or range "A-B". (Default: 1-6).
+ </div>
+ </RT·entry>
+ <RT·entry key="<RT·endnotes>">
+ Generates the numeric list of endnote payloads. Replaces all inline endnote citations with bracketed indices.
+ </RT·entry>
+ </RT·dictionary>
+ </RT·section>
- <h3>Annotation</h3>
- <RT·dictionary key="Tag" definition="Description & Arguments">
- <RT·entry key="<RT·endnote>">
- Marks the scoped content for extraction and placement in the endnotes block.
- </RT·entry>
- <RT·entry key="<RT·footnote>">
- Marks the scoped content for layout relocation to the active page's footer.
- </RT·entry>
- </RT·dictionary>
+ <RT·section>
+ <RT·name>Counters</RT·name>
+ <p>
+ 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.
+ </p>
+
+ <RT·dictionary key="Tag" definition="Description & Arguments">
+ <RT·entry key="<RT·Counter·make>">
+ Initializes the named counter state machine.<br>
+ <div class="attr-list">
+ <br><strong>Attributes:</strong><br>
+ <code>counter</code>: Required state identifier.<br>
+ <code>style</code>: 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")<br>
+ <code>on-first-step</code>: The initial base value. (Default: "0")<br>
+ <code>separator</code>: String appended between depth sequence levels. (Default: ".")<br>
+ <code>separator-placement</code>: "embedded" or "embedded-after". (Default: "embedded")<br>
+ <code>mode</code>: "scoped" (content embedded between count boundaries receives the parent scope's value) or "milestone" (state carries forward sequentially irrespective of lexical depth).
+ </div>
+ </RT·entry>
+ <RT·entry key="<RT·Counter·step>">
+ Increments the counter block. Executing a step inside an existing step boundary pushes the state to the next depth index.<br>
+ <div class="attr-list">
+ <br><strong>Attributes:</strong><br>
+ <code>counter</code>: Required state identifier.
+ </div>
+ </RT·entry>
+ <RT·entry key="<RT·Counter·snapshot>">
+ Clones the active count variables into the lookup dictionary. Snapshot processing operates independently of the layout pass, allowing global retrieval regardless of physical placement.<br>
+ <div class="attr-list">
+ <br><strong>Attributes:</strong><br>
+ <code>counter</code>: Required state identifier.<br>
+ <code>snapshot</code>: Required dictionary assignment key.
+ </div>
+ </RT·entry>
+ <RT·entry key="<RT·Counter·read>">
+ Retrieves the stored snapshot and projects it as innerHTML.<br>
+ <div class="attr-list">
+ <br><strong>Attributes:</strong><br>
+ <code>snapshot</code>: Required dictionary assignment key.<br>
+ <code>key</code>: 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")
+ </div>
+ </RT·entry>
+ </RT·dictionary>
+ </RT·section>
- <h3>Pagination</h3>
- <RT·dictionary key="Tag" definition="Description & Arguments">
- <RT·entry key="<RT·page>">
- Physical document boundary generated dynamically by the paginator. Not for manual insertion.
- </RT·entry>
- <RT·entry key="<RT·page-break>">
- Explicit directive terminating the current <RT·code><RT·page></RT·code> evaluation and pushing subsequent data to the next boundary.
- </RT·entry>
- </RT·dictionary>
+ <RT·section>
+ <RT·name>Cross reference</RT·name>
+ <p>
+ A two-pass mechanism bridging logical content with its physically paginated layout geometry.
+ </p>
+
+ <RT·dictionary key="Tag" definition="Description & Arguments">
+ <RT·entry key="<RT·Note·write>">
+ Registers the scoped content and its finalized layout page index into the reference dictionary.<br>
+ <div class="attr-list">
+ <br><strong>Attributes:</strong><br>
+ <code>key</code>: Required mapping identifier.
+ </div>
+ </RT·entry>
+ <RT·entry key="<RT·Note·read>">
+ Queries the reference dictionary and injects the output.<br>
+ <div class="attr-list">
+ <br><strong>Attributes:</strong><br>
+ <code>key</code>: Target mapping identifier.<br>
+ <code>field</code>: Data extraction parameter. Valid targets are "content" (the original HTML payload) or "page" (the evaluated layout page number). (Default: "content")
+ </div>
+ </RT·entry>
+ </RT·dictionary>
+ </RT·section>
- <h2>Memo environment</h2>
- <p>
- The <RT·code><RT·memo></RT·code> container inherits all layout functionality from the Article configuration but enforces a static, print-ready CSS environment.
- </p>
+ <RT·section>
+ <RT·name>Annotation</RT·name>
+ <RT·dictionary key="Tag" definition="Description & Arguments">
+ <RT·entry key="<RT·endnote>">
+ Marks the scoped content for extraction and placement in the endnotes block.
+ </RT·entry>
+ <RT·entry key="<RT·footnote>">
+ Marks the scoped content for layout relocation to the active page's footer.
+ </RT·entry>
+ </RT·dictionary>
+ </RT·section>
- <h2>Book environment</h2>
- <p>
- The <RT·code><RT·book></RT·code> container manages multi-chapter assemblies. It executes tags restricted to macro-level architectural transitions.
- </p>
+ <RT·section>
+ <RT·name>Pagination</RT·name>
+ <RT·dictionary key="Tag" definition="Description & Arguments">
+ <RT·entry key="<RT·page>">
+ Physical document boundary generated dynamically by the paginator. Not for manual insertion.
+ </RT·entry>
+ <RT·entry key="<RT·page-break>">
+ Explicit directive terminating the current <RT·code><RT·page></RT·code> evaluation and pushing subsequent data to the next boundary.
+ </RT·entry>
+ </RT·dictionary>
+ </RT·section>
+ </RT·section>
- <h3>Book specific tags</h3>
- <RT·dictionary key="Tag" definition="Description & Arguments">
- <RT·entry key="<RT·chapter>">
- Chapter delimiter. Triggers an immediate page break, escalates to H1 typography, and writes a top-level node to the TOC sequence. Retains any authored <code>class</code> attributes.
- </RT·entry>
- </RT·dictionary>
+ <RT·section>
+ <RT·name>Memo Environment</RT·name>
+ <p>
+ The <RT·code><RT·memo></RT·code> container inherits all layout functionality from the Article configuration but enforces a static, print-ready CSS environment.
+ </p>
+ <p>
+ <strong>Implementation Note:</strong> This layout model is currently maintained as a legacy execution branch. Continued parity with the core layout engine is not guaranteed.
+ </p>
+ </RT·section>
- <h1>Global widgets</h1>
- <RT·dictionary key="Tag" definition="Description & Arguments">
- <RT·entry key="<RT·theme-selector>">
- Injects a floating overlay permitting real-time CSS theme execution. Writes the selection to the browser's <code>localStorage</code>.
- </RT·entry>
- </RT·dictionary>
+ <RT·section>
+ <RT·name>Global widgets</RT·name>
+ <RT·dictionary key="Tag" definition="Description & Arguments">
+ <RT·entry key="<RT·theme-selector>">
+ Injects a floating overlay permitting real-time CSS theme execution. Writes the selection to the browser's <code>localStorage</code>.
+ </RT·entry>
+ </RT·dictionary>
+ </RT·section>
</RT·article>
</body>
/*
+ Element/TOC.js
Processes <RT·TOC> 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 <RT·section> 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';
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');
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';
const listStack = [topList];
- for (const item of headings) {
+ for (const item of sections) {
const depth = item.level - start_level;
while (listStack.length - 1 > depth) {
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);
/*
- Element/TOC.js
- Processes <RT·TOC> tags.
- Iterates nested <RT·section> boundaries, evaluates tree depth,
- and duplicates the title payload for automated navigation.
+ Element/title.js
+ Processes <RT·title> 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(`<span style="font-weight:600; color:${config.brand_secondary}">${author}</span>`);
+ 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);
+ }
});
})();
projects / RT-Style / commitdiff