--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>RT Style System: Reference Manual</title>
+
+ <script src="style/body_visibility_hidden.js"></script>
+ <script> window.StyleRT.body_visibility_hidden(); </script>
+
+ <script src="style/utility.js"></script>
+
+ <script src="style/theme_dark_gold.js"></script>
+
+ <script src="style/article_tech_ref.js"></script>
+
+ <script src="style/RT_math.js"></script>
+ <script src="style/RT_code.js"></script>
+ <script src="style/RT_term.js"></script>
+ <script src="style/RT_TOC.js"></script>
+
+</head>
+<body>
+
+ <RT-article>
+ <RT-title author="Gemini" date="2026-01-14" title="RT Style System: Reference Manual"></RT-title>
+
+ <RT-TOC level="1"></RT-TOC>
+
+ <h1> Table of Custom Tags </h1>
+
+ <h2>Style Tag Reference</h2>
+
+<table>
+ <thead>
+ <tr>
+ <th>Tag</th>
+ <th>Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td><RT-code><RT-article></RT-code></td>
+ <td>Article container.</td>
+ </tr>
+
+ <tr>
+ <td><RT-code><RT-title></RT-code></td>
+ <td>
+ Title block and metadata.
+ </td>
+ </tr>
+
+ <tr>
+ <td><RT-code><RT-TOC></RT-code></td>
+ <td>Generates TOC.</td>
+ </tr>
+
+ <tr>
+ <td><RT-code><RT-term></RT-code></td>
+ <td>Conventional term.</td>
+ </tr>
+
+ <tr>
+ <td><RT-code><RT-term-em></RT-code></td>
+ <td>Forces emphasis for a term even after first occurrence.</td>
+ </tr>
+
+ <tr>
+ <td><RT-code><RT-neologism></RT-code></td>
+ <td>Project specific term.</td>
+ </tr>
+
+ <tr>
+ <td><RT-code><RT-neologism-em></RT-code></td>
+ <td>Forces emphasis for a neologism even after first occurrence.</td>
+ </tr>
+
+ <tr>
+ <td><RT-code><RT-code></RT-code></td>
+ <td>Code span or code block.</td>
+ </tr>
+
+ <tr>
+ <td><RT-code><RT-math></RT-code></td>
+ <td>Inline or block math.</td>
+ </tr>
+
+ <tr>
+ <td><RT-code><RT-page></RT-code></td>
+ <td>Automatically inserted pagination tag.</td>
+ </tr>
+ </tbody>
+</table>
+
+ <h1>Architecture Overview</h1>
+ <p>
+ The <RT-term>RT Style System</RT-term> is a client-side, JavaScript-driven publishing framework designed to turn raw HTML into high-readability technical documentation. Unlike standard CSS frameworks, RT uses JavaScript to handle complex layout tasks like <RT-neologism>ink-ratio balancing</RT-neologism> and dynamic pagination.
+ </p>
+
+ <h2>The Orchestrator</h2>
+ <p>
+ The core of the system is <RT-code>style_orchestrator.js</RT-code>. It is placed at the bottom of the HTML <RT-code><body></RT-code>. Its job is to:
+ </p>
+ <ol>
+ <li>Detect which modules are already loaded.</li>
+ <li>Load missing modules (defaulting to Dark Theme if none is specified).</li>
+ <li>Execute the <strong>Semantics Phase</strong> (styling tags).</li>
+ <li>Wait for MathJax (if present).</li>
+ <li>Execute the <strong>Layout Phase</strong> (pagination, page rendering).</li>
+ <li>Reveal the document.</li>
+ </ol>
+
+ <h1>Semantic Tags</h1>
+ <p>
+ The system relies on a specific set of custom tags in the <RT-code>RT-</RT-code> namespace to separate structure from presentation.
+ </p>
+
+ <h2>Terminology</h2>
+
+ <h3>Conventional Terms</h3>
+ <p>
+ Use <RT-code><RT-term></RT-code> for standard, industry accepted technical terms. The system decorates only the first occurrence of each unique term so that the first appearance functions as a definition point, and later appearances do not overload the page with styling.
+ </p>
+
+ <RT-code>
+The <RT-term>Singleton Pattern</RT-term> restricts instantiation...
+ </RT-code>
+
+ <p>
+ <em>Renders as:</em> The <RT-term>Singleton Pattern</RT-term> restricts instantiation...
+ </p>
+
+ <h3>Neologisms</h3>
+ <p>
+ Use <RT-code><RT-neologism></RT-code> for terms invented specifically for the current document or project. Neologisms are styled more strongly than conventional terms, visually distinguishing "jargon you should know" from "jargon we just made up."
+ </p>
+
+ <RT-code>
+We define the <RT-neologism>Hyper Tape</RT-neologism> as a construct...
+ </RT-code>
+
+ <p>
+ <em>Renders as:</em> We define the <RT-neologism>Hyper Tape</RT-neologism> as a construct...
+ </p>
+
+ <h3>First Occurrence Rule</h3>
+ <p>
+ The term system is intentionally conservative. For the tags <RT-code><RT-term></RT-code> and <RT-code><RT-neologism></RT-code>, only the first occurrence of a unique term is decorated. Subsequent mentions are rendered as normal prose.
+ </p>
+
+ <p>
+ Uniqueness is tracked by normalizing the term text (trimmed, then lowercased). This means that <RT-code>Symbol</RT-code> and <RT-code>symbol</RT-code> count as the same term.
+ </p>
+
+ <h3>Forced Emphasis Variants</h3>
+ <p>
+ Sometimes a later mention of a term should be emphasized again. For that purpose, the system provides explicit emphasis tags:
+ </p>
+
+ <ul>
+ <li><RT-code><RT-term-em></RT-code></li>
+ <li><RT-code><RT-neologism-em></RT-code></li>
+ </ul>
+
+ <p>
+ These variants are always decorated, even if the term appeared earlier.
+ </p>
+
+ <h3>Automatic Definition Anchors</h3>
+ <p>
+ For first occurrences, the term module automatically assigns an <RT-code>id</RT-code> attribute if one does not already exist. This creates stable anchors for future indexing and linking.
+ </p>
+
+ <RT-code>
+We define a <RT-term>Symbol</RT-term> as...
+ </RT-code>
+
+ <p>
+ The first occurrence will be given an id similar to <RT-code>def-symbol</RT-code>. For neologisms, an additional marker is used, for example <RT-code>def-neo-hyper-tape</RT-code>.
+ </p>
+
+ <h2>Technical Content</h2>
+
+ <h3>Code</h3>
+ <p>
+ Use <RT-code><RT-code></RT-code>. If placed inline, it acts like a span. If placed as a block (with newlines), it acts like a pre formatted block with a theme aware border.
+ </p>
+
+ <RT-code>
+# Block Code Example
+def hello():
+ return "World"
+ </RT-code>
+
+ <h3>Mathematics</h3>
+ <p>
+ Use <RT-code><RT-math></RT-code>. The system auto detects if it is a block equation or inline variable and wraps it in MathJax delimiters.
+ </p>
+ <p>
+ Inline: Let <RT-math>x</RT-math> be the input.
+ </p>
+ <p>
+ Block:
+ </p>
+ <RT-math>
+ f(x) = \sum_{i=0}^{n} x_i
+ </RT-math>
+
+ <h1>Navigation & Layout</h1>
+
+ <h2>Automatic Table of Contents</h2>
+ <p>
+ Use <RT-code><RT-TOC></RT-code> to insert a generated table of contents. The tag scans the document <em>forward</em> from its current position to collect headings.
+ </p>
+
+ <h3>Explicit Mode</h3>
+ <p>
+ Use the <RT-code>level="N"</RT-code> attribute to target a specific heading depth.
+ </p>
+ <ul>
+ <li><RT-code><RT-TOC level="1"></RT-code>: Collects all <RT-code><h1></RT-code> elements until the end of the document. Best for the main document index.</li>
+ <li><RT-code><RT-TOC level="2"></RT-code>: Collects all <RT-code><h2></RT-code> elements until it encounters the next <RT-code><h1></RT-code>. Best for chapter summaries.</li>
+ </ul>
+
+ <h3>Implicit Mode</h3>
+ <p>
+ If no level is specified, the TOC scans backwards to find the nearest heading (for example H1) and assumes you want to collect children one level deeper (for example H2).
+ </p>
+ <p>
+ <em>Note: Implicit mode can fail if placed before the first heading of a section. Use explicit levels for robust results.</em>
+ </p>
+
+ <h2>The Title Block</h2>
+ <p>
+ Use <RT-code><RT-title></RT-code> as the first element in your <RT-code><body></RT-code> (before the article container). This tag generates a standardized, styled header block with the document title and metadata.
+ </p>
+
+ <h3>Attributes</h3>
+ <ul>
+ <li><RT-code>title</RT-code> (Required): The main heading of the document.</li>
+ <li><RT-code>author</RT-code> (Optional): The author's name. Renders in a bold accent color.</li>
+ <li><RT-code>date</RT-code> (Optional): The publication or revision date.</li>
+ </ul>
+
+ <h3>Example</h3>
+ <RT-code>
+ <RT-title
+ title="RT Style System: Reference Manual"
+ author="Gemini"
+ date="2026-01-14">
+ </RT-title>
+ </RT-code>
+
+ <p>
+ <em>Renders as:</em> A centered, high contrast H1 followed by a serif styled metadata row containing the author and date.
+ </p>
+
+ <h2>The Article Container</h2>
+ <p>
+ The root element must be <RT-code><RT-article></RT-code>. This is the boundary for the pagination logic.
+ </p>
+
+ <h2>Pagination</h2>
+ <p>
+ The script <RT-code>paginate_by_element.js</RT-code> scans the article. It calculates the height of every element (including margins) and bundles them into <RT-code><RT-page></RT-code> elements.
+ </p>
+ <p>
+ <RT-neologism>Soft Limit Pagination</RT-neologism>: The system attempts to keep headers with their following paragraphs. It will break a page early rather than stranding a header at the bottom.
+ </p>
+
+ <h1>Debugging</h1>
+
+ <h2>Debug Tokens</h2>
+ <p>
+ RT provides a lightweight debug logging system in <RT-code>utility.js</RT-code>. Logging is controlled by a set of active debug tokens. Each log message is assigned a token, and the message prints only if that token is enabled.
+ </p>
+
+ <p>
+ Examples of common tokens include <RT-code>style</RT-code>, <RT-code>layout</RT-code>, <RT-code>pagination</RT-code>, <RT-code>selector</RT-code>, <RT-code>config</RT-code>, and <RT-code>term</RT-code>.
+ </p>
+
+ <h2>How Logging is Gated</h2>
+ <p>
+ Normal log and warning output are gated. The methods <RT-code>debug.log(token,message)</RT-code> and <RT-code>debug.warn(token,message)</RT-code> will print only when the token exists in <RT-code>debug.active_tokens</RT-code>.
+ </p>
+
+ <p>
+ This prevents the console from being flooded during normal use, while still allowing deep visibility during development.
+ </p>
+
+ <h2>Errors are Always Printed</h2>
+ <p>
+ Errors are treated differently. The method <RT-code>debug.error(token,message)</RT-code> always prints, regardless of token state. These messages represent failures that require attention.
+ </p>
+
+ <h2>Enabling and Disabling Tokens</h2>
+ <p>
+ Tokens may be enabled or disabled in two ways: by editing the <RT-code>active_tokens</RT-code> set in <RT-code>utility.js</RT-code>, or at runtime by calling:
+ </p>
+
+ <RT-code>
+window.StyleRT.debug.enable('term')
+window.StyleRT.debug.disable('term')
+ </RT-code>
+
+ <p>
+ For example, the term system (<RT-code>RT_term.js</RT-code>) uses the <RT-code>term</RT-code> token. When that token is enabled, the module will print messages describing how terms were detected and which term definitions were assigned IDs.
+ </p>
+
+ <h1>Themes</h1>
+ <p>
+ The system supports hot swapping themes by changing the script import in the head.
+ </p>
+ <ul>
+ <li><strong>Dark:</strong> <RT-code>style/theme_dark_gold.js</RT-code> (Default)</li>
+ <li><strong>Light:</strong> <RT-code>style/theme_light_gold.js</RT-code></li>
+ </ul>
+
+ <h1>Manifest</h1>
+ <RT-code>
+1. style_orchestrator.js (Example/default footer script)
+2. utility.js (Math/Color physics)
+3. article_tech_ref.js (Typography and CSS injection)
+4. RT_code.js (Code block logic)
+5. RT_math.js (MathJax wrapper)
+6. RT_term.js (Term styling)
+7. RT_TOC.js (Navigation generator)
+8. paginate_by_element.js (Page splitter)
+9. page_fixed_glow.js (Visual page container)
+ </RT-code>
+
+ <script src="style/style_orchestrator.js"></script>
+ <script>
+ window.StyleRT.style_orchestrator();
+ </script>
+ </RT-article>
+</body>
+</html>
projects / RT-style-JS_public / commitdiff