+++ /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>
- <head>
- <meta charset="UTF-8">
- <title>RT Style System: Reference Manual</title>
- <script src="setup.js"></script>
- <script>
- window.StyleRT.include('RT/theme');
- window.StyleRT.include('RT/layout/article_tech_ref');
- </script>
- </head>
- <body>
--
- <RT-article>
- <RT-title author="Gemini" date="2026-01-14" title="RT Style System: Reference Manual"></RT-title>
- <RT-article>
- <RT-title author="Gemini" date="2026-01-14" title="RT Style System: Reference Manual"></RT-title>
--
- <RT-TOC level="1"></RT-TOC>
- <RT-TOC level="1"></RT-TOC>
--
- <h1> Table of Custom Tags </h1>
- <h1> Table of Custom Tags </h1>
--
- <h2>Style Tag Reference</h2>
- <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>
- <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-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-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></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-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></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-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-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-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>
- <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>
- <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>
- <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>
- <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>
- <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>
- <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>
- <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>
- <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>
- <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>
- <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>
- <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>
- <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>
- <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>
- <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>
- <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>
- <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>
- <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>
- <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>
- <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>
- <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>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>
- <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>
- <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>
- <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>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>
- <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>
- <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>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>
- <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>
- <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>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>
- <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>
- <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>
- <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>
- <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>
- <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>
- <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>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>
- <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>
- <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>
- <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>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>
- <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>
- <script src="style/style_orchestrator.js"></script>
- <script>
- window.StyleRT.style_orchestrator();
- </script>
- </RT-article>
- </body>
--</html>
projects / RT-style-JS_public / commitdiff