The code related to this discussion is implemented in Python, however issues with other languages are considered. On salient difference that is considered is that Python integers are bignums are passed by reference. In some other languages integers are considered primitives, are bounded and bit copied.
</p>
-<h2>Symbol</h2>
+ <h2>Symbol</h2>
<h3>Instance</h3>
The factory’s <RT-code>make</RT-code> returns an original instance that is not equal to any other original. All copies stemming from an original remain in the same equivalence class. Therefore any instance in the class can represent the symbol, and we may choose any one instance as the symbol’s name (a canonical representative), or we could use a dictionary, and use, say, the original instance, to lookup a string as a name.
</p>
- <h2>Symbol</h2>
-
- <h3>Instance</h3>
-
- <p>
- We are given a symbol instance factory. Each time the <RT-code>make</RT-code> function on the factory interface is called, the factory returns an instance of a distinct symbol.
- </p>
-
- <p>
- A symbol instance may be copied. A common method for
- making a copy in many languages is to use assignment, e.g.,
- <RT-code>x = y</RT-code>, where <RT-code>y</RT-code> is a variable holding a symbol instance. After execution of the assignment, <RT-code>x</RT-code> will hold another instance of the same symbol. However in Python an
- assignment will copy a reference, and the symbol itself will not be copied.
- </p>
-
- <p>
- Any two, or by transitivity, any number of, symbol instances can be compared for equality, say
- <RT-code>x == y</RT-code>. A comparison between symbol instances
- will always return <RT-code>True</RT-code> or <RT-code>False</RT-code>.
- </p>
-
- <p>
- A symbol instance newly minted using the given symbol factory <RT-code>make</RT-code> function is said to come direct from the factory. Such a symbol is also called an <RT-term>original</RT-term>.
- </p>
-
- <h2>Required Properties</h2>
-
- <p>
- Any two symbol instances returned directly from the factory using two different make calls will always equality compare to be <RT-code>False</RT-code>. In other words, two distinct <RT-term>originals</RT-term> will always be not equal.
- </p>
-
- <p>
- Given an original, all copies stemming from it will be equal to each other and to the original. By <RT-term>stemming</RT-term> we mean to include all direct copies and copies of copies.
- </p>
-
- <p>
- Given any two originals, say A and B, we know that A is not equal to B, as discussed above. Note also that A is not equal to any copy stemming from B, and B is not equal to any copy stemming from A.
- </p>
-
- <p>
- Though symbol instances are integer-like in that copy and equality compare can be used with them, symbol instances are disallowed from being used with other integer operators. Symbols cannot be compared for greater-than or less-than; they cannot be incremented, added, nor subtracted, etc.
- </p>
-
-
- <h2>What <em>is</em> a Symbol</h2>
-
- <p>
- A symbol is not manipulated directly. Only symbol instances exist at runtime.
- </p>
-
- <p>
- Define a relation ~ over instances by x ~ y iff x == y. This partitions instances into equivalence classes. Each such equivalence class is a <RT-term>symbol</RT-term>.
- <p>
-
- <p>
- The factory’s make returns an original instance that is not equal to any other original. All copies stemming from an original remain in the same equivalence class. Therefore any instance in the class can represent the symbol, and we may choose any one instance as the symbol’s name (a canonical representative).
- </p>
-
<h3>Distinctness Across Contexts</h3>
<p>
/*
- Processes existing <RT-TOC> tags.
- Populates each with headings found below it that are exactly one level deeper.
- Stops scanning if a heading of the same or higher level is encountered.
+ 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).
*/
window.StyleRT = window.StyleRT || {};
window.StyleRT.RT_TOC = function() {
- const debug = window.StyleRT.debug;
+ const debug = window.StyleRT.debug || { log: function(){} };
const toc_tags = document.querySelectorAll('rt-toc');
toc_tags.forEach((container, toc_index) => {
container.style.display = 'block';
- // 1. Determine the context level of this TOC
- // We look backward to find the most recent heading (H1-H6)
- let context_level = 0; // Default to 0 (looking for H1s)
- let prev = container.previousElementSibling;
+ // 1. Determine Target Level
+ const attr_level = parseInt(container.getAttribute('level'));
+ let target_level;
- while (prev) {
- const match = prev.tagName.match(/^H([1-6])$/);
- if (match) {
- context_level = parseInt(match[1]);
- break;
- }
- prev = prev.previousElementSibling;
+ if (!isNaN(attr_level)) {
+ // EXPLICIT MODE
+ target_level = attr_level;
+ if (debug.log) debug.log('RT_TOC', `TOC #${toc_index} explicit target: H${target_level}`);
+ } else {
+ // IMPLICIT / CONTEXT MODE
+ let context_level = 0; // Default 0 (Root)
+ let prev = container.previousElementSibling;
+ while (prev) {
+ const match = prev.tagName.match(/^H([1-6])$/);
+ if (match) {
+ context_level = parseInt(match[1]);
+ break;
+ }
+ prev = prev.previousElementSibling;
+ }
+ target_level = context_level + 1;
+ if (debug.log) debug.log('RT_TOC', `TOC #${toc_index} context implied target: H${target_level}`);
}
- const target_level = context_level + 1;
- const stop_at_or_above = context_level;
-
- if (debug) debug.log('RT_TOC', `TOC #${toc_index} context: H${context_level}. Targeting: H${target_level}`);
+ // Stop condition: Stop if we hit a heading that is a "parent" or "sibling" of the context.
+ // Mathematically: Stop if found_level < target_level.
+ const stop_threshold = target_level;
- // 2. Setup Internal Structure
- container.innerHTML = ''; // Clear any placeholder content
+ // 2. Setup Container
+ container.innerHTML = '';
const title = document.createElement('h1');
- title.textContent = context_level === 0 ? 'Table of Contents' : 'Section Contents';
+ // Title logic: If targeting H1, it's a Main TOC. Otherwise it's a Section TOC.
+ title.textContent = target_level === 1 ? 'Table of Contents' : 'Section Contents';
title.style.textAlign = 'center';
container.appendChild(title);
list.style.paddingLeft = '0';
container.appendChild(list);
- // 3. Scan Forward for headings
+ // 3. Scan Forward
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]);
- // STOP condition: We hit a heading at our level or higher
- // (e.g., if we are under an H1 looking for H2s, we stop at the next H1)
- if (context_level !== 0 && found_level <= stop_at_or_above) {
+ // STOP Logic:
+ // If we are looking for H2s, we stop if we hit an H1 (level 1).
+ // If we are looking for H1s, we stop if we hit... nothing (level 0).
+ if (found_level < target_level) {
break;
}
- // COLLECT condition: Heading is exactly one level deeper
+ // COLLECT Logic:
if (found_level === target_level) {
if (!next_el.id) next_el.id = `toc-ref-${toc_index}-${found_level}-${list.children.length}`;
a.style.color = 'inherit';
a.style.display = 'block';
- // Hover effects
- a.onmouseover = () => a.style.color = 'hsl(42, 100%, 50%)';
+ a.onmouseover = () => a.style.color = 'var(--rt-brand-primary)';
a.onmouseout = () => a.style.color = 'inherit';
li.appendChild(a);
--- /dev/null
+/*
+ Processes <RT-TITLE> tags.
+ Generates a standard document header block.
+
+ Usage:
+ <RT-title title="..." author="..." date="..."></RT-title>
+*/
+window.StyleRT = window.StyleRT || {};
+
+window.StyleRT.RT_title = function() {
+ const debug = window.StyleRT.debug || { log: function(){} };
+
+ document.querySelectorAll('rt-title').forEach(el => {
+ const title = el.getAttribute('title') || 'Untitled Document';
+ const author = el.getAttribute('author');
+ const date = el.getAttribute('date');
+
+ if (debug.log) debug.log('RT_title', `Generating title block: ${title}`);
+
+ // Container
+ const container = document.createElement('div');
+ container.style.textAlign = 'center';
+ container.style.marginBottom = '3rem';
+ container.style.marginTop = '2rem';
+ container.style.borderBottom = '1px solid var(--rt-border-default)';
+ container.style.paddingBottom = '1.5rem';
+
+ // Main Title (H1)
+ const h1 = document.createElement('h1');
+ h1.textContent = title;
+ h1.style.margin = '0 0 0.8rem 0';
+ h1.style.border = 'none'; // Override standard H1 border
+ h1.style.padding = '0';
+ h1.style.color = 'var(--rt-brand-primary)';
+ h1.style.fontSize = '2.5em';
+ h1.style.lineHeight = '1.1';
+ h1.style.letterSpacing = '-0.03em';
+
+ container.appendChild(h1);
+
+ // Metadata Row (Author | Date)
+ if (author || date) {
+ const meta = document.createElement('div');
+ meta.style.color = 'var(--rt-content-muted)';
+ meta.style.fontStyle = 'italic';
+ meta.style.fontSize = '1.1em';
+ meta.style.fontFamily = '"Georgia", "Times New Roman", serif'; // Classy serif
+
+ const parts = [];
+ if (author) parts.push(`<span style="font-weight:600; color:var(--rt-brand-secondary)">${author}</span>`);
+ if (date) parts.push(date);
+
+ meta.innerHTML = parts.join(' — ');
+ container.appendChild(meta);
+ }
+
+ // Replace the raw tag with the generated block
+ el.replaceWith(container);
+ });
+};
--- /dev/null
+/*
+ Article Layout: Technical Reference
+ Standard: Theme 1.0
+ Description: High-readability layout for technical documentation on screens.
+ Features: Sans-serif, justified text, distinct headers, boxed code.
+*/
+(function(){
+ const RT = window.StyleRT = window.StyleRT || {};
+
+ RT.article = function() {
+ const debug = RT.debug || { log: function(){} };
+ debug.log('layout', 'RT.article starting...');
+
+ RT.config = RT.config || {};
+
+ // Default Configuration
+ RT.config.article = {
+ font_family: '"Noto Sans", "Segoe UI", "Helvetica Neue", sans-serif'
+ ,line_height: "1.8"
+ ,font_size: "16px"
+ ,font_weight: "400" // Default (String)
+ ,max_width: "820px"
+ ,margin: "0 auto"
+ };
+
+ // SAFE THEME DETECTION
+ // If the theme is loaded and explicitly Light, bump the weight.
+ try {
+ if (RT.config.theme && RT.config.theme.meta_is_dark === false) {
+ RT.config.article.font_weight = "600";
+ debug.log('layout', 'Light theme detected: adjusting font weight to 600.');
+ }
+ } catch(e) {
+ console.warn("StyleRT: Auto-weight adjustment failed, using default.", e);
+ }
+
+ const conf = RT.config.article;
+ const article_seq = document.querySelectorAll("RT-article");
+
+ if(article_seq.length === 0) {
+ debug.log('layout', 'No <RT-article> elements found. Exiting.');
+ return;
+ }
+
+ // 1. Apply Container Styles
+ article_seq.forEach( (article) =>{
+ const style = article.style;
+ style.display = "block";
+ style.fontFamily = conf.font_family;
+ style.fontSize = conf.font_size;
+ style.lineHeight = conf.line_height;
+ style.fontWeight = conf.font_weight;
+ style.maxWidth = conf.max_width;
+ style.margin = conf.margin;
+ style.padding = "0 20px";
+ style.color = "var(--rt-content-main)";
+ });
+
+ // 2. Inject Child Typography
+ const style_id = 'rt-article-typography';
+ if (!document.getElementById(style_id)) {
+ debug.log('layout', 'Injecting CSS typography rules.');
+ const style_el = document.createElement('style');
+ style_el.id = style_id;
+
+ style_el.textContent = `
+ /* --- HEADERS --- */
+ rt-article h1 {
+ color: var(--rt-brand-primary);
+ font-size: 2.0em;
+ font-weight: 500;
+ text-align: center;
+ margin-top: 1.2em;
+ margin-bottom: 0.6em;
+ border-bottom: 2px solid var(--rt-border-default);
+ padding-bottom: 0.3em;
+ line-height: 1.2;
+ letter-spacing: -0.02em;
+ }
+
+ rt-article h2 {
+ color: var(--rt-brand-secondary);
+ font-size: 1.5em;
+ font-weight: 400;
+ text-align: center;
+ margin-top: 1.0em;
+ margin-bottom: 0.5em;
+ }
+
+ rt-article h2 + h3 {
+ margin-top: -0.3em;
+ padding-top: 0;
+ }
+
+ rt-article h3 {
+ color: var(--rt-brand-tertiary);
+ font-size: 1.4em;
+ font-weight: 400;
+ margin-top: 1.0em;
+ margin-bottom: 0.5em;
+ }
+
+ /* --- DEEP LEVELS (H4-H6) --- */
+ rt-article h4, rt-article h5, rt-article h6 {
+ color: var(--rt-brand-tertiary);
+ font-weight: bold;
+ margin-top: 1.2em;
+ font-style: italic;
+ }
+ rt-article h4 { margin-left: 2em; }
+ rt-article h5 { margin-left: 4em; }
+ rt-article h6 { margin-left: 6em; }
+
+ /* --- SEMANTIC TAGS --- */
+ rt-article rt-neologism {
+ font-family: "Georgia", "Times New Roman", serif;
+ font-size: 1.2em; /* <--- ADD THIS LINE */
+ font-style: italic;
+ font-weight: 400;
+ color: var(--rt-brand-tertiary);
+ letter-spacing: 0.02em;
+ }
+
+
+ /* --- BODY TEXT --- */
+ rt-article p {
+ margin-bottom: 1.4em;
+ text-align: justify;
+ hyphens: auto;
+ color: var(--rt-content-main);
+ }
+
+ /* --- RICH ELEMENTS --- */
+ rt-article blockquote {
+ border-left: 4px solid var(--rt-brand-secondary);
+ margin: 1.5em 0;
+ padding: 0.5em 1em;
+ font-style: italic;
+ color: var(--rt-content-muted);
+ background: var(--rt-surface-1);
+ border-radius: 0 4px 4px 0;
+ }
+
+ rt-article ul, rt-article ol {
+ margin-bottom: 1.4em;
+ padding-left: 2em;
+ }
+ rt-article li {
+ margin-bottom: 0.4em;
+ }
+ rt-article li::marker {
+ color: var(--rt-brand-secondary);
+ font-weight: bold;
+ }
+
+ /* Links */
+ rt-article a {
+ color: var(--rt-brand-link);
+ text-decoration: none;
+ border-bottom: 1px dotted var(--rt-border-default);
+ transition: all 0.2s;
+ }
+ rt-article a:hover {
+ color: var(--rt-brand-primary);
+ border-bottom: 1px solid var(--rt-brand-primary);
+ background: var(--rt-surface-1);
+ }
+
+ /* --- TECHNICAL --- */
+ rt-article pre {
+ background: var(--rt-surface-code);
+ padding: 1em;
+ border-radius: 4px;
+ overflow-x: auto;
+ border: 1px solid var(--rt-border-default);
+ }
+ `;
+ document.head.appendChild(style_el);
+ }
+ };
+})();
/*
Master Loader & Orchestrator for StyleRT.
- Renamed from do_style.js
*/
window.StyleRT = window.StyleRT || {};
const modules = [
// Theme & Semantics
+ 'style/RT_title.js',
'style/theme_dark_gold.js',
'style/RT_term.js',
'style/RT_math.js',
'style/RT_code.js',
- 'style/article_tech_ref.js', // Renamed from article_generic
- 'style/RT_TOC.js',
+ 'style/article_tech_ref_2.js',
+ 'style/RT_TOC.js',
// Layout & Pagination
'style/paginate_by_element.js',
RT.debug.log('style', 'Starting Phase 1: Setup & Semantics');
// Naming Convention: RT.<filename_without_js>
- if(RT.theme) RT.theme(); // Was theme
- if(RT.article) RT.article(); // Was article_generic
+ if(RT.theme) RT.theme();
+ if(RT.article) RT.article();
+
+ // NEW: Trigger the Title Generator
+ if(RT.RT_title) RT.RT_title();
+
if(RT.RT_term) RT.RT_term();
if(RT.RT_math) RT.RT_math();
if(RT.RT_code) RT.RT_code();
}
};
- // Auto-load for dev
- RT.theme_dark();
} )();
}
};
- if(!RT.theme_loaded) {
- RT.theme();
- RT.theme_loaded = true;
- }
} )();
--- /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-title author="Gemini" date="2026-01-14" title="RT Style System: Reference Manual"></RT-title>
+ <RT-article>
+
+ <RT-TOC level="1"></RT-TOC>
+
+ <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.
+ </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 (Novel Concepts)</h3>
+ <p>
+ Use <RT-code><RT-neologism></RT-code> for terms invented specifically for the current document or project. This visually distinguishes "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>
+
+ <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 (Recommended)</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 (Context Aware)</h3>
+ <p>
+ If no level is specified, the TOC scans backwards to find the nearest heading (e.g., H1) and assumes you want to collect children one level deeper (e.g., H2).
+ </p>
+ <p>
+ <em>Note: Implicit mode can fail if placed before the first heading of a section (the "Halting Problem" scenario). Use explicit levels for robust results.</em>
+ </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>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>Recovery Manifest</h1>
+ <p>
+ If memory is lost, ensure these files exist in <RT-code>style/</RT-code>:
+ </p>
+ <RT-code>
+1. style_orchestrator.js (The brain)
+2. utility.js (Math/Color physics)
+3. article_tech_ref.js (Typography & 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 / Epimetheus / .git / commitdiff