From: Thomas Walker Lynch Date: Mon, 1 Jun 2026 13:08:35 +0000 (+0000) Subject: adds X-Git-Url: https://git.reasoningtechnology.com/?a=commitdiff_plain;h=47c403970651f7b82c4291cc965d2433da775c1c;p=RT-style-JS_public adds --- diff --git a/developer/authored/RT/layout/paginate_by_element.js b/developer/authored/RT/layout/paginate_by_element.js index 2955b3b..8c2dbb6 100644 --- a/developer/authored/RT/layout/paginate_by_element.js +++ b/developer/authored/RT/layout/paginate_by_element.js @@ -1,16 +1,15 @@ window.StyleRT.paginate_by_element = function () { const RT = window.StyleRT; + const debug = RT.debug || { log: function(){}, error: function(){} }; const page_conf = (RT.config && RT.config.page) ? RT.config.page : {}; const page_height_limit = page_conf.height_limit || 1000; - const article_seq = document.querySelectorAll('RT-article'); - if (article_seq.length === 0) { - RT.debug.error('pagination', 'No elements found. Pagination aborted.'); - return; - } + let measureContainer = null; - // ---------- helpers ---------- - const get_el_height = (el) => { + // ========================================================= + // 1. DOM Measurement Utilities + // ========================================================= + function getElHeight(el) { const wasInDOM = el.parentNode !== null; if (!wasInDOM) document.body.appendChild(el); const rect = el.getBoundingClientRect(); @@ -18,24 +17,21 @@ window.StyleRT.paginate_by_element = function () { const margin = parseFloat(style.marginTop) + parseFloat(style.marginBottom); if (!wasInDOM) el.remove(); return (rect.height || 0) + (margin || 0); - }; + } - // Create a hidden measurement container that mimics the article's layout - let measureContainer = null; - const getMeasureContainer = () => { + function getMeasureContainer() { if (measureContainer && measureContainer.parentNode) return measureContainer; const article = document.querySelector('RT-article'); if (!article) { const temp = document.createElement('div'); temp.style.visibility = 'hidden'; temp.style.position = 'absolute'; - temp.style.width = '100%'; // fallback + temp.style.width = '100%'; document.body.appendChild(temp); measureContainer = temp; return temp; } const container = document.createElement('div'); - // Copy the computed width and font styles from the article const articleStyle = window.getComputedStyle(article); container.style.visibility = 'hidden'; container.style.position = 'absolute'; @@ -47,31 +43,66 @@ window.StyleRT.paginate_by_element = function () { document.body.appendChild(container); measureContainer = container; return container; - }; + } - // Measure a fragment by temporarily inserting it into the measurement container - const measureFragment = (frag) => { + function measureFragment(frag) { const container = getMeasureContainer(); container.appendChild(frag); - const h = get_el_height(frag); + const h = getElHeight(frag); container.removeChild(frag); return h; - }; + } - const isSplittable = (el) => { + // ========================================================= + // STEP 1: PREPARE FOOTNOTES (Strip and tag) + // ========================================================= + const article_seq = document.querySelectorAll('RT-article'); + if (article_seq.length === 0) { + debug.error('pagination', 'No elements found. Pagination aborted.'); + return; + } + + const footnote_registry = {}; + let footnote_counter = 1; + + Array.from(article_seq).forEach(article => { + // Bulletproof extraction: immune to XML/HTML case-sensitivity parsing quirks + const all_nodes = Array.from(article.querySelectorAll('*')); + const raw_footnotes = all_nodes.filter(node => node.tagName.toLowerCase() === 'rt-footnote'); + + raw_footnotes.forEach(fn => { + const id = footnote_counter++; + footnote_registry[id] = fn.innerHTML; // Save the payload + + // Trim any standard HTML whitespace immediately preceding the tag + const prev = fn.previousSibling; + if (prev && prev.nodeType === Node.TEXT_NODE) { + prev.textContent = prev.textContent.replace(/\s+$/, ''); + } + + // Replace with a zero-height marker that rides along with the text + const marker = document.createElement('rt-fn-marker'); + marker.setAttribute('data-id', id); + + if (fn.parentNode) { + fn.parentNode.replaceChild(marker, fn); + } + }); + }); + + // ========================================================= + // Splitting Logic (Clean and undisturbed) + // ========================================================= + function isSplittable(el) { const tag = el.tagName; if (tag === 'UL' || tag === 'OL') { const items = Array.from(el.children).filter(c => c.tagName === 'LI'); if (items.length === 0) return null; - // Measure item heights once (still in DOM) - const itemHeights = items.map(li => get_el_height(li)); - - // Measure empty list overhead + const itemHeights = items.map(li => getElHeight(li)); const emptyClone = el.cloneNode(false); - const overhead = get_el_height(emptyClone); + const overhead = getElHeight(emptyClone); - // Store info on the original element (and on rest fragments later) el._splitInfo = { type: 'list', itemHeights, overhead, offset: 0 }; return makeListSplitter(el, el._splitInfo); } @@ -82,36 +113,29 @@ window.StyleRT.paginate_by_element = function () { const rows = tbody ? Array.from(tbody.rows) : Array.from(el.rows); if (rows.length === 0) return null; - const theadHeight = thead ? get_el_height(thead) : 0; - const rowHeights = rows.map(row => get_el_height(row)); + const theadHeight = thead ? getElHeight(thead) : 0; + const rowHeights = rows.map(row => getElHeight(row)); const emptyClone = el.cloneNode(false); - if (thead) { - const theadClone = thead.cloneNode(true); - emptyClone.appendChild(theadClone); - } - const tbodyClone = document.createElement('tbody'); - emptyClone.appendChild(tbodyClone); - const overhead = get_el_height(emptyClone) - theadHeight; + if (thead) emptyClone.appendChild(thead.cloneNode(true)); + emptyClone.appendChild(document.createElement('tbody')); + const overhead = getElHeight(emptyClone) - theadHeight; el._splitInfo = { type: 'table', rowHeights, overhead, theadHeight, offset: 0 }; return makeTableSplitter(el, el._splitInfo); } - - return null; // not splittable - }; + return null; + } function makeListSplitter(el, info) { return (remaining) => { const children = Array.from(el.children).filter(c => c.tagName === 'LI'); const start = info.offset; - const relevantHeights = info.itemHeights.slice(start, start + children.length); - // Build fragments iteratively and measure them for exact height let bestCount = 0; let bestHeight = 0; - // Try to include as many items as possible const tempList = el.cloneNode(false); + for (let i = 0; i < children.length; i++) { const itemClone = children[i].cloneNode(true); tempList.appendChild(itemClone); @@ -120,24 +144,18 @@ window.StyleRT.paginate_by_element = function () { bestCount = i + 1; bestHeight = fragHeight; } else { - // Remove the last item tempList.removeChild(itemClone); break; } } - if (bestCount === 0) { - return { first: null, rest: el, firstHeight: 0 }; - } + if (bestCount === 0) return { first: null, rest: el, firstHeight: 0 }; - // Build first fragment (with exactly bestCount items) const first = el.cloneNode(false); for (let i = 0; i < bestCount; i++) { first.appendChild(children[i].cloneNode(true)); } - - // Build rest fragment only if there are remaining items let rest = null; if (bestCount < children.length) { rest = el.cloneNode(false); @@ -145,13 +163,11 @@ window.StyleRT.paginate_by_element = function () { rest.appendChild(children[i].cloneNode(true)); } - // Explicitly inject the starting index for ordered lists if (el.tagName === 'OL') { const currentStart = parseInt(el.getAttribute('start'), 10) || 1; rest.setAttribute('start', currentStart + bestCount); } - // Forward split info rest._splitInfo = { type: 'list', itemHeights: info.itemHeights, @@ -164,15 +180,11 @@ window.StyleRT.paginate_by_element = function () { }; } - - function makeTableSplitter(el, info) { const thead = el.querySelector('thead'); const createShell = () => { const shell = el.cloneNode(false); - if (thead) { - shell.appendChild(thead.cloneNode(true)); - } + if (thead) shell.appendChild(thead.cloneNode(true)); const newTbody = document.createElement('tbody'); shell.appendChild(newTbody); return shell; @@ -182,41 +194,38 @@ window.StyleRT.paginate_by_element = function () { const tbody = el.querySelector('tbody'); const rows = tbody ? Array.from(tbody.rows) : Array.from(el.rows); const start = info.offset; - const relevantRows = rows.slice(start, start + rows.length); let bestCount = 0; let bestHeight = 0; const tempTable = createShell(); const tempBody = tempTable.querySelector('tbody'); - for (let i = 0; i < relevantRows.length; i++) { - tempBody.appendChild(relevantRows[i].cloneNode(true)); + + for (let i = 0; i < rows.length; i++) { + tempBody.appendChild(rows[i].cloneNode(true)); const h = measureFragment(tempTable); if (h <= remaining) { bestCount = i + 1; bestHeight = h; } else { - // Remove the last row tempBody.removeChild(tempBody.lastChild); break; } } - if (bestCount === 0) { - return { first: null, rest: el, firstHeight: 0 }; - } + if (bestCount === 0) return { first: null, rest: el, firstHeight: 0 }; const first = createShell(); const firstBody = first.querySelector('tbody'); for (let i = 0; i < bestCount; i++) { - firstBody.appendChild(relevantRows[i].cloneNode(true)); + firstBody.appendChild(rows[i].cloneNode(true)); } let rest = null; - if (bestCount < relevantRows.length) { + if (bestCount < rows.length) { rest = createShell(); const restBody = rest.querySelector('tbody'); - for (let i = bestCount; i < relevantRows.length; i++) { - restBody.appendChild(relevantRows[i].cloneNode(true)); + for (let i = bestCount; i < rows.length; i++) { + restBody.appendChild(rows[i].cloneNode(true)); } rest._splitInfo = { @@ -232,82 +241,70 @@ window.StyleRT.paginate_by_element = function () { }; } - // ---------- main pagination loop ---------- - let article_index = 0; - while (article_index < article_seq.length) { - const article = article_seq[article_index]; - + // ========================================================= + // STEP 2: NORMAL PAGINATOR + // ========================================================= + function paginateArticle(article) { const raw_element_seq = Array.from(article.children).filter(el => !['SCRIPT', 'STYLE', 'RT-PAGE'].includes(el.tagName) ); - if (raw_element_seq.length === 0) { - article_index++; - continue; - } + if (raw_element_seq.length === 0) return; const page_seq = []; let current_batch_seq = []; let current_h = 0; - let i = 0; + while (i < raw_element_seq.length) { const el = raw_element_seq[i]; const splitter = isSplittable(el); - // --- Splittable element --- if (splitter) { const remaining = page_height_limit - current_h; const { first, rest, firstHeight } = splitter(remaining); if (first) { - // Place the fitting fragment current_batch_seq.push(first); - current_h += firstHeight; // exact measured height + current_h += firstHeight; if (rest) { - // Replace original with remainder raw_element_seq.splice(i, 1, rest); } else { - // Element is completely consumed raw_element_seq.splice(i, 1); } - // Do not increment i - the next element is now at index i } else { - // Not even one item fits on this page if (current_batch_seq.length === 0) { - // Empty page -> wrap whole element in a scroll frame const frame = document.createElement('rt-scroll-frame'); frame.style.display = 'block'; frame.style.overflowY = 'auto'; frame.style.maxHeight = page_height_limit + 'px'; frame.appendChild(el); current_batch_seq.push(frame); - i++; // element consumed + i++; } else { - // Page has content -> start a new page and keep rest for later page_seq.push(current_batch_seq); current_batch_seq = []; current_h = 0; - raw_element_seq[i] = rest; + raw_element_seq[i] = rest || el; } } continue; } // --- Ordinary (non-splittable) element --- - const h = get_el_height(el); + const h = getElHeight(el); if (current_h + h > page_height_limit && current_batch_seq.length > 0) { - // Backtrack widowed headings let backtrack_seq = []; let backtrack_h = 0; + while (current_batch_seq.length > 0) { const last = current_batch_seq[current_batch_seq.length - 1]; if (!/^H[1-6]/.test(last.tagName)) break; const popped = current_batch_seq.pop(); backtrack_seq.unshift(popped); - backtrack_h += get_el_height(popped); + backtrack_h += getElHeight(popped); } if (current_batch_seq.length > 0) { @@ -341,15 +338,58 @@ window.StyleRT.paginate_by_element = function () { article.appendChild(page_el); p++; } + } - if (RT.debug) { - RT.debug.log('pagination', `Article paginated into ${page_seq.length} pages.`); - } + // Execute pagination + Array.from(article_seq).forEach(article => paginateArticle(article)); + + // ========================================================= + // STEP 3: RESOLVE FOOTNOTES & EXPAND PAGES + // ========================================================= + Array.from(article_seq).forEach(article => { + const rendered_pages = article.querySelectorAll('rt-page'); + + Array.from(rendered_pages).forEach(page => { + // Bulletproof extraction for the markers + const all_page_nodes = Array.from(page.querySelectorAll('*')); + const markers = all_page_nodes.filter(node => node.tagName.toLowerCase() === 'rt-fn-marker'); + + if (markers.length === 0) return; + + // Construct the footer block for this page + const fn_container = document.createElement('div'); + fn_container.className = 'rt-footnote-container'; + fn_container.style.borderTop = '1px solid var(--rt-border-default)'; + fn_container.style.marginTop = '2rem'; + fn_container.style.paddingTop = '1rem'; + fn_container.style.fontSize = '0.9em'; + + markers.forEach(marker => { + const id = marker.getAttribute('data-id'); + const html = footnote_registry[id]; + + // Replace the invisible marker with the visible naked superscript link + const sup = document.createElement('sup'); + sup.innerHTML = `${id}`; + + if (marker.parentNode) { + marker.parentNode.replaceChild(sup, marker); + } - article_index++; - } + // Append the actual text to the footer with a clean, print-ready number format + const fn_line = document.createElement('div'); + fn_line.id = `fn-${id}`; + fn_line.style.marginBottom = '0.5rem'; + fn_line.innerHTML = `${id}.${html}`; + fn_container.appendChild(fn_line); + }); + + // Attach the footer. The page organically stretches to fit. + page.appendChild(fn_container); + }); + }); - // Clean up measurement container + // Cleanup if (measureContainer && measureContainer.parentNode) { measureContainer.remove(); measureContainer = null; diff --git a/document/RT-semantic-HTML-tags.html b/document/RT-semantic-HTML-tags.html new file mode 100644 index 0000000..defa81a --- /dev/null +++ b/document/RT-semantic-HTML-tags.html @@ -0,0 +1,457 @@ + + + + + RT semantic HTML tags + + + + + + + + + + +

Table of custom tags

+ +

Style tag reference

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TagDescription
<RT-article>Article container.
<RT-memo>Alternative strict print layout container.
<RT-title>Title block and metadata.
<RT-TOC>Generates TOC.
<RT-term>Conventional term.
<RT-term-em>Forces emphasis for a term even after first occurrence.
<RT-neologism>Project specific term.
<RT-neologism-em>Forces emphasis for a neologism even after first occurrence.
<RT-code>Code span or code block.
<RT-math>Inline or block math.
<RT-symbol>Technical or mathematical symbol wrapper.
<RT-constraint>Architectural limits or hard requirement block.
<RT-crossref>Context-aware internal link.
<RT-cite>Inline reference marker.
<RT-endnotes>Container for extracted citations.
<RT-footnote>Inline footnote generator.
<RT-page>Automatically inserted pagination tag.
<rt-theme-selector>Floating widget for hot-swapping themes.
+ +

Architecture overview

+

+ The RT Style System is a client-side, JavaScript-driven publishing framework designed to turn raw HTML into high-readability technical documentation. RT uses JavaScript to handle complex layout tasks like ink-ratio balancing and dynamic pagination, operating quite differently than standard CSS frameworks. +

+ +

The document header

+

+ The document header must bootstrap the RT Style engine before the body renders. An author places setup.js in the directory and includes it via a script tag at the top of the document. Following this, the window.StyleRT.include directives pull in the necessary modules, such as the theme and the specific layout orchestrator (e.g., RT/layout/article_tech_ref). +

+ +

Pulling style files into a document

+

+ Put `setup.js` in the directory, and include it at the top of the document. `setup.js` points at the style files and is installation specific. +

+ +

Semantic tags

+

+ The system relies on a specific set of custom tags in the RT- namespace to separate structure from presentation. +

+ +

Terminology

+ +

Conventional terms

+

+ Use <RT-term> 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. +

+ + + The Singleton Pattern restricts instantiation... + + +

+ Renders as: The Singleton Pattern restricts instantiation... +

+ +

Neologisms

+

+ Use <RT-neologism> 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 newly created." +

+ + + We define the Hyper Tape as a construct... + + +

+ Renders as: We define the Hyper Tape as a construct... +

+ +

First occurrence rule

+

+ The term system is intentionally conservative. For the tags <RT-term> and <RT-neologism>, only the first occurrence of a unique term is decorated. Subsequent mentions are rendered as normal prose. +

+ +

+ Uniqueness is tracked by normalizing the term text (trimmed, then lowercased). This means that Symbol and symbol count as the same term. +

+ +

Forced emphasis variants

+

+ Sometimes a later mention of a term should be emphasized again. For that purpose, the system provides explicit emphasis tags: +

+ +
    +
  • <RT-term-em>
  • +
  • <RT-neologism-em>
  • +
+ +

+ These variants are always decorated, even if the term appeared earlier. +

+ +

Automatic definition anchors

+

+ For first occurrences, the term module automatically assigns an id attribute if one lacks existence. This creates stable anchors for future indexing and linking. +

+ + + We define a Symbol as... + + +

+ The first occurrence will be given an id similar to def-symbol. For neologisms, an additional marker is used, for example def-neo-hyper-tape. +

+ +

Technical content

+ +

Code

+

+ Use <RT-code>. When placed inline, it functions as a span. When placed as a block (with newlines), it functions as a pre formatted block with a theme aware border. The engine will automatically strip common leading whitespace so that the text aligns relative to the indentation of the <RT-code> tag itself. +

+ + + # Block Code Example + def hello(): + return "World" + + +

Mathematics

+

+ Use <RT-math>. The system auto detects if it is a block equation or inline variable and wraps it in MathJax delimiters. +

+

+ Inline: Let x be the input. +

+

+ Block: +

+ + f(x) = \sum_{i=0}^{n} x_i + + +

Architectural notation and constraints

+ +

Symbols

+

+ Use <RT-symbol> for specialized technical or mathematical symbols. This enforces a consistent font-weight and character spacing across different browser engines, ensuring that these symbols avoid anti-aliasing artifacts often seen with standard Unicode glyphs in technical documentation. +

+ +

Constraints

+

+ Use <RT-constraint> to explicitly highlight physical limitations, memory boundaries, or structural constraints within a system. This tag triggers a unique block-display, rendering with a distinct background shade and a left-hand rule, visually separating hard requirements from descriptive prose. +

+ +

Cross-references

+

+ Use <RT-crossref> for internal structural linking between sections. This tag provides context-aware linking, managing anchor states to jump across soft-limit boundaries seamlessly. +

+ +

Citations, endnotes, and footnotes

+

+ The system manages academic and technical references through a paired tag approach, ensuring citations are extracted and formatted before the layout engine calculates page boundaries. It also supports dynamically expanding footnotes. +

+ +

Inline citations

+

+ An author places <RT-cite ref="Author, Source"></RT-cite> inline within the text. The engine transforms this into a superscript bracketed number, establishing a bi-directional link. +

+ +

Endnote generation

+

+ The <RT-endnotes> container functions as the destination for all extracted citations. If an author places this tag at the bottom of the article, the engine populates it with an ordered list of references. Should the author omit the tag, the semantic parser will dynamically generate and append it as a top-level child of the article. +

+ +

Footnotes

+

+ An author places <RT-footnote>Note text</RT-footnote> inline within the prose. The engine operates in three phases: it strips the tag to prevent layout disruption, paginates the raw text blindly, and finally expands the completed page to append the extracted footnote block at the bottom. This ensures perfect spatial routing across soft limits. +

+ + + The core architecture operates at 5GHz.Assuming optimal thermal conditions. + + +

Navigation and layout

+ +

Automatic table of contents

+

+ Use <RT-TOC> to insert a generated table of contents. The tag scans the document forward from its current position to collect headings. +

+ +

Explicit mode (Specific levels or ranges)

+

+ Use the level attribute to target a specific heading depth or a range of depths. +

+
    +
  • <RT-TOC level="1">: Collects all <h1> elements until the end of the document. Best for the main document index.
  • +
  • <RT-TOC level="1-3">: Collects all <h1>, <h2>, and <h3> elements, nesting them structurally.
  • +
  • <RT-TOC level="2">: Collects all <h2> elements until it encounters the next <h1>. Best for chapter summaries.
  • +
+ +

Implicit mode

+

+ If no level is specified, the TOC scans backwards to find the nearest heading (for example H1) and assumes an author wants to collect children one level deeper (for example H2). +

+

+ Note: Implicit mode has a probability to fail if placed before the first heading of a section. Use explicit levels for robust results. +

+ +

The title block

+

+ Use <RT-title> as the first element in your <body> (before the article container). This tag generates a standardized, styled header block with the document title and metadata. +

+ +

Attributes

+
    +
  • title (Required): The main heading of the document.
  • +
  • author (Optional): The author's name. Renders in a bold accent color.
  • +
  • date (Optional): The publication or revision date.
  • +
  • copyright (Optional): Appends a copyright notice to the bottom of the title block.
  • +
+ +

Example

+ + + + + +

+ Renders as: A centered, high contrast H1 followed by a serif styled metadata row containing the author and date, and a smaller copyright note. +

+ +

Layout containers

+ +

The article container

+

+ The primary root element for documentation is <RT-article>. This establishes the boundary for the standard typography rules and the dynamic pagination logic. +

+ +

The memo container

+

+ Alternatively, use <RT-memo> for strict print formatting. This sets the document width to a strict 6.5 inches (standard 8.5 inch page with 1-inch margins), overrides theme colors to enforce black text on a white background, and sets the typography to a 12pt serif font (Times New Roman) suitable for formal documentation. +

+ +

Pagination

+

+ The script paginate_by_element.js scans the article. It calculates the height of every element (including margins) and bundles them into <RT-page> elements. +

+

+ Soft Limit Pagination: The system attempts to keep headers with their following paragraphs. It will break a page early rather than stranding a header at the bottom. +

+

+ Fragment Splitting: When confronted with large unbroken data structures, the paginator acts intelligently to split `

    `, `
      `, and `` elements across multiple pages to maximize space efficiency without breaking the document structure. +

      + +

      Debugging

      + +

      Debug tokens

      +

      + RT provides a lightweight debug logging system in utility.js. 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. +

      + +

      + Examples of common tokens include style, layout, pagination, selector, config, and term. +

      + +

      How logging is gated

      +

      + Normal log and warning output are gated. The methods debug.log(token,message) and debug.warn(token,message) will print only when the token exists in debug.active_tokens. +

      + +

      + This prevents the console from being flooded during normal use, while still allowing deep visibility during development. +

      + +

      Errors are always printed

      +

      + Errors are treated differently. The method debug.error(token,message) always prints, regardless of token state. These messages represent failures that require attention. +

      + +

      Enabling and disabling tokens

      +

      + Tokens have permission to be enabled or disabled in two ways: by editing the active_tokens set in utility.js, or at runtime by calling: +

      + + + window.StyleRT.debug.enable('term') + window.StyleRT.debug.disable('term') + + +

      + For example, the term system (RT_term.js) uses the term token. When that token is enabled, the module will print messages describing how terms were detected and which term definitions were assigned IDs. +

      + +

      Themes

      +

      + The system supports hot swapping themes by changing the script import in the head. +

      +
        +
      • Dark: style/theme_dark_gold.js (Default)
      • +
      • Light: style/theme_light_gold.js
      • +
      + +

      Theme selector widget

      +

      + Including the tag <rt-theme-selector></rt-theme-selector> anywhere in the DOM will generate a floating widget in the upper right corner of the window, permitting the user to hot-swap the visual theme and automatically persist the choice via local storage. +

      + +

      Manifest

      + + 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 conventions

      +

      Headings are first letter capitalized. Remaining words are as they would be in English prose.

      + +

      Exercises

      + +
        +
      1. +

        + Term Occurrences: If an author tags a word with <RT-term> five times in a document, how many times will the term be visually decorated by the styling engine? How does a person force the engine to decorate a later occurrence? +

        +
      2. +
      3. +

        + Term Normalization: A person writes <RT-term>Parse Tree</RT-term> in paragraph one, and <RT-term>parse tree</RT-term> in paragraph two. Will the system assign a definition anchor to the second occurrence? +

        +
      4. +
      5. +

        + TOC Generation: What happens if a person places an <RT-TOC> tag without a level attribute before the first heading of a section? +

        +
      6. +
      7. +

        + Code and Math Formatting: How does the RT system determine whether to render an <RT-code> or <RT-math> element inline with the text versus as a standalone block? +

        +
      8. +
      9. +

        + Pagination Logic: When the script bundles elements into an <RT-page> container, how does the soft limit pagination handle a heading that falls at the very bottom of the page capacity? +

        +
      10. +
      + + + + + diff --git a/document/style_manual.html b/document/style_manual.html deleted file mode 100644 index ebaf512..0000000 --- a/document/style_manual.html +++ /dev/null @@ -1,442 +0,0 @@ - - - - - The RT semantic HTML tags - - - - - - - - - - -

      Table of custom tags

      - -

      Style tag reference

      - -
      - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
      TagDescription
      <RT-article>Article container.
      <RT-memo>Alternative strict print layout container.
      <RT-title>Title block and metadata.
      <RT-TOC>Generates TOC.
      <RT-term>Conventional term.
      <RT-term-em>Forces emphasis for a term even after first occurrence.
      <RT-neologism>Project specific term.
      <RT-neologism-em>Forces emphasis for a neologism even after first occurrence.
      <RT-code>Code span or code block.
      <RT-math>Inline or block math.
      <RT-symbol>Technical or mathematical symbol wrapper.
      <RT-constraint>Architectural limits or hard requirement block.
      <RT-crossref>Context-aware internal link.
      <RT-cite>Inline reference marker.
      <RT-endnotes>Container for extracted citations.
      <RT-page>Automatically inserted pagination tag.
      <rt-theme-selector>Floating widget for hot-swapping themes.
      - -

      Architecture overview

      -

      - The RT Style System is a client-side, JavaScript-driven publishing framework designed to turn raw HTML into high-readability technical documentation. RT uses JavaScript to handle complex layout tasks like ink-ratio balancing and dynamic pagination, operating quite differently than standard CSS frameworks. -

      - -

      The document header

      -

      - The document header must bootstrap the RT Style engine before the body renders. An author places setup.js in the directory and includes it via a script tag at the top of the document. Following this, the window.StyleRT.include directives pull in the necessary modules, such as the theme and the specific layout orchestrator (e.g., RT/layout/article_tech_ref). -

      - -

      Pulling style files into a document

      -

      - Put `setup.js` in the directory, and include it at the top of the document. `setup.js` points at the style files and is installation specific. -

      - -

      Semantic tags

      -

      - The system relies on a specific set of custom tags in the RT- namespace to separate structure from presentation. -

      - -

      Terminology

      - -

      Conventional terms

      -

      - Use <RT-term> 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. -

      - - - The Singleton Pattern restricts instantiation... - - -

      - Renders as: The Singleton Pattern restricts instantiation... -

      - -

      Neologisms

      -

      - Use <RT-neologism> 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 newly created." -

      - - - We define the Hyper Tape as a construct... - - -

      - Renders as: We define the Hyper Tape as a construct... -

      - -

      First occurrence rule

      -

      - The term system is intentionally conservative. For the tags <RT-term> and <RT-neologism>, only the first occurrence of a unique term is decorated. Subsequent mentions are rendered as normal prose. -

      - -

      - Uniqueness is tracked by normalizing the term text (trimmed, then lowercased). This means that Symbol and symbol count as the same term. -

      - -

      Forced emphasis variants

      -

      - Sometimes a later mention of a term should be emphasized again. For that purpose, the system provides explicit emphasis tags: -

      - -
        -
      • <RT-term-em>
      • -
      • <RT-neologism-em>
      • -
      - -

      - These variants are always decorated, even if the term appeared earlier. -

      - -

      Automatic definition anchors

      -

      - For first occurrences, the term module automatically assigns an id attribute if one lacks existence. This creates stable anchors for future indexing and linking. -

      - - - We define a Symbol as... - - -

      - The first occurrence will be given an id similar to def-symbol. For neologisms, an additional marker is used, for example def-neo-hyper-tape. -

      - -

      Technical content

      - -

      Code

      -

      - Use <RT-code>. When placed inline, it functions as a span. When placed as a block (with newlines), it functions as a pre formatted block with a theme aware border. The engine will automatically strip common leading whitespace so that the text aligns relative to the indentation of the <RT-code> tag itself. -

      - - - # Block Code Example - def hello(): - return "World" - - -

      Mathematics

      -

      - Use <RT-math>. The system auto detects if it is a block equation or inline variable and wraps it in MathJax delimiters. -

      -

      - Inline: Let x be the input. -

      -

      - Block: -

      - - f(x) = \sum_{i=0}^{n} x_i - - -

      Architectural notation and constraints

      - -

      Symbols

      -

      - Use <RT-symbol> for specialized technical or mathematical symbols. This enforces a consistent font-weight and character spacing across different browser engines, ensuring that these symbols avoid anti-aliasing artifacts often seen with standard Unicode glyphs in technical documentation. -

      - -

      Constraints

      -

      - Use <RT-constraint> to explicitly highlight physical limitations, memory boundaries, or structural constraints within a system. This tag triggers a unique block-display, rendering with a distinct background shade and a left-hand rule, visually separating hard requirements from descriptive prose. -

      - -

      Cross-references

      -

      - Use <RT-crossref> for internal structural linking between sections. This tag provides context-aware linking, managing anchor states to jump across soft-limit boundaries seamlessly. -

      - -

      Citations and endnotes

      -

      - The system manages academic and technical references through a paired tag approach, ensuring citations are extracted and formatted before the layout engine calculates page boundaries. -

      - -

      Inline citations

      -

      - An author places <RT-cite ref="Author, Source"></RT-cite> inline within the text. The engine transforms this into a superscript bracketed number, establishing a bi-directional link. -

      - -

      Endnote generation

      -

      - The <RT-endnotes> container functions as the destination for all extracted citations. If an author places this tag at the bottom of the article, the engine populates it with an ordered list of references. Should the author omit the tag, the semantic parser will dynamically generate and append it as a top-level child of the article. -

      - -

      Navigation and layout

      - -

      Automatic table of contents

      -

      - Use <RT-TOC> to insert a generated table of contents. The tag scans the document forward from its current position to collect headings. -

      - -

      Explicit mode (Specific levels or ranges)

      -

      - Use the level attribute to target a specific heading depth or a range of depths. -

      -
        -
      • <RT-TOC level="1">: Collects all <h1> elements until the end of the document. Best for the main document index.
      • -
      • <RT-TOC level="1-3">: Collects all <h1>, <h2>, and <h3> elements, nesting them structurally.
      • -
      • <RT-TOC level="2">: Collects all <h2> elements until it encounters the next <h1>. Best for chapter summaries.
      • -
      - -

      Implicit mode

      -

      - If no level is specified, the TOC scans backwards to find the nearest heading (for example H1) and assumes an author wants to collect children one level deeper (for example H2). -

      -

      - Note: Implicit mode has a probability to fail if placed before the first heading of a section. Use explicit levels for robust results. -

      - -

      The title block

      -

      - Use <RT-title> as the first element in your <body> (before the article container). This tag generates a standardized, styled header block with the document title and metadata. -

      - -

      Attributes

      -
        -
      • title (Required): The main heading of the document.
      • -
      • author (Optional): The author's name. Renders in a bold accent color.
      • -
      • date (Optional): The publication or revision date.
      • -
      • copyright (Optional): Appends a copyright notice to the bottom of the title block.
      • -
      - -

      Example

      - - - - - -

      - Renders as: A centered, high contrast H1 followed by a serif styled metadata row containing the author and date, and a smaller copyright note. -

      - -

      Layout containers

      - -

      The article container

      -

      - The primary root element for documentation is <RT-article>. This establishes the boundary for the standard typography rules and the dynamic pagination logic. -

      - -

      The memo container

      -

      - Alternatively, use <RT-memo> for strict print formatting. This sets the document width to a strict 6.5 inches (standard 8.5 inch page with 1-inch margins), overrides theme colors to enforce black text on a white background, and sets the typography to a 12pt serif font (Times New Roman) suitable for formal documentation. -

      - -

      Pagination

      -

      - The script paginate_by_element.js scans the article. It calculates the height of every element (including margins) and bundles them into <RT-page> elements. -

      -

      - Soft Limit Pagination: The system attempts to keep headers with their following paragraphs. It will break a page early rather than stranding a header at the bottom. -

      -

      - Fragment Splitting: When confronted with large unbroken data structures, the paginator acts intelligently to split `

        `, `
          `, and `` elements across multiple pages to maximize space efficiency without breaking the document structure. -

          - -

          Debugging

          - -

          Debug tokens

          -

          - RT provides a lightweight debug logging system in utility.js. 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. -

          - -

          - Examples of common tokens include style, layout, pagination, selector, config, and term. -

          - -

          How logging is gated

          -

          - Normal log and warning output are gated. The methods debug.log(token,message) and debug.warn(token,message) will print only when the token exists in debug.active_tokens. -

          - -

          - This prevents the console from being flooded during normal use, while still allowing deep visibility during development. -

          - -

          Errors are always printed

          -

          - Errors are treated differently. The method debug.error(token,message) always prints, regardless of token state. These messages represent failures that require attention. -

          - -

          Enabling and disabling tokens

          -

          - Tokens have permission to be enabled or disabled in two ways: by editing the active_tokens set in utility.js, or at runtime by calling: -

          - - - window.StyleRT.debug.enable('term') - window.StyleRT.debug.disable('term') - - -

          - For example, the term system (RT_term.js) uses the term token. When that token is enabled, the module will print messages describing how terms were detected and which term definitions were assigned IDs. -

          - -

          Themes

          -

          - The system supports hot swapping themes by changing the script import in the head. -

          -
            -
          • Dark: style/theme_dark_gold.js (Default)
          • -
          • Light: style/theme_light_gold.js
          • -
          - -

          Theme selector widget

          -

          - Including the tag <rt-theme-selector></rt-theme-selector> anywhere in the DOM will generate a floating widget in the upper right corner of the window, permitting the user to hot-swap the visual theme and automatically persist the choice via local storage. -

          - -

          Manifest

          - - 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 conventions

          -

          Headings are first letter capitalized. Remaining words are as they would be in English prose.

          - -

          Exercises

          - -
            -
          1. -

            - Term Occurrences: If an author tags a word with <RT-term> five times in a document, how many times will the term be visually decorated by the styling engine? How does a person force the engine to decorate a later occurrence? -

            -
          2. -
          3. -

            - Term Normalization: A person writes <RT-term>Parse Tree</RT-term> in paragraph one, and <RT-term>parse tree</RT-term> in paragraph two. Will the system assign a definition anchor to the second occurrence? -

            -
          4. -
          5. -

            - TOC Generation: What happens if a person places an <RT-TOC> tag without a level attribute before the first heading of a section? -

            -
          6. -
          7. -

            - Code and Math Formatting: How does the RT system determine whether to render an <RT-code> or <RT-math> element inline with the text versus as a standalone block? -

            -
          8. -
          9. -

            - Pagination Logic: When the script bundles elements into an <RT-page> container, how does the soft limit pagination handle a heading that falls at the very bottom of the page capacity? -

            -
          10. -
          - - - - diff --git a/shared/authored/version b/shared/authored/version index 146a089..4284d43 100755 --- a/shared/authored/version +++ b/shared/authored/version @@ -1,5 +1,5 @@ echo "Harmony v2.2 2026-03-06" -echo "RT-style-JS_public v1.6 2026-05-20" +echo "RT-style-JS_public v2.1 2026-06-01"