--- /dev/null
+// block_visibility_during_layout.js
+
+// 1. Hide the document immediately upon execution in the <head>
+document.documentElement.style.visibility = "hidden";
+
+// 2. Define the restoration function
+const restore_visibility = function() {
+ document.documentElement.style.visibility = "";
+ document.removeEventListener("RT_layout_complete", restore_visibility);
+ window.removeEventListener("load", restore_visibility);
+};
+
+// 3. Listen for a specific completion signal from the layout engine
+document.addEventListener("RT_layout_complete", restore_visibility);
+
+// 4. Structural Safety Net: If the layout engine fails or is never loaded,
+// restore visibility on the final window 'load' event so the page doesn't remain blank.
+window.addEventListener("load", restore_visibility);
+
+++ /dev/null
-/*
- Targets the root element to ensure total blackout during load.
-*/
-function body_visibility_hidden(){
- const gate = document.createElement('style');
- gate.id = 'rt-visibility-gate';
- gate.textContent = 'html{visibility:hidden !important; background:black !important;}';
- document.head.appendChild(gate);
-}
-
-window.StyleRT = window.StyleRT || {};
-window.StyleRT.body_visibility_hidden = body_visibility_hidden;
+++ /dev/null
-/*
- Restores visibility by removing the visibility gate.
-*/
-function body_visibility_visible(){
- const gate = document.getElementById('rt-visibility-gate');
- if (gate){
- gate.remove();
- }
- document.body.style.visibility = 'visible';
-}
-
-window.StyleRT = window.StyleRT || {};
-window.StyleRT.body_visibility_visible = body_visibility_visible;
-window.StyleRT = window.StyleRT || {};
+window.RT = window.RT || {};
-window.StyleRT.include = function(path_identifier){
- let parts_seq = path_identifier.split('/');
- let namespace = parts_seq[0];
-
- let module_path = parts_seq.slice(1).join('/');
+window.RT.load = function(module_path){
+ let target_module = module_path;
- if(module_path === 'theme'){
+ if(target_module === 'theme'){
let saved_theme = localStorage.getItem('RT_theme_preference');
if(!saved_theme){
saved_theme = 'dark_gold';
- localStorage.setItem('RT_theme_preference' ,saved_theme);
+ localStorage.setItem('RT_theme_preference', saved_theme);
}
- module_path = 'theme/' + saved_theme;
+ target_module = 'theme/' + saved_theme;
}
- let base_path = window.StyleRT_namespaces[namespace];
- if(!base_path){
- console.error("Namespace not found: " + namespace);
- return;
+ let resolved_path = window.RT.dirpr_library + '/' + target_module;
+
+ if(!resolved_path.endsWith('.js')){
+ resolved_path = resolved_path + '.js';
}
- let full_path = base_path + '/' + module_path + '.js';
- // FIXED: No backslashes in the closing script tag
- document.write('<script src="' + full_path + '"></script>');
+ document.write('<script src="' + resolved_path + '"></script>');
};
/*
- General utilities for the StyleRT library.
+ General utilities for the RT Style library.
*/
-window.StyleRT = window.StyleRT || {};
+window.RT = window.RT || {};
// --- DEBUG SYSTEM ---
-window.StyleRT.debug = {
+window.RT.debug = {
// all debug messages enabled
/*
log: function(token, message) {
if (this.active_tokens.has(token)) {
- console.log(`[StyleRT:${token}]`, message);
+ console.log(`[RT:${token}]`, message);
}
},
warn: function(token, message) {
if (this.active_tokens.has(token)) {
- console.warn(`[StyleRT:${token}]`, message);
+ console.warn(`[RT:${token}]`, message);
}
},
- // New: Always log errors regardless of token, but tag them
error: function(token, message) {
- console.error(`[StyleRT:${token}] CRITICAL:`, message);
+ console.error(`[RT:${token}] CRITICAL:`, message);
},
enable: function(token) { this.active_tokens.add(token); console.log(`Enabled: ${token}`); },
};
// --- UTILITIES ---
-window.StyleRT.utility = {
+window.RT.utility = {
// --- FONT PHYSICS ---
measure_ink_ratio: function(target_font, ref_font = null) {
- const debug = window.StyleRT.debug;
+ const debug = window.RT.debug;
debug.log('layout', `Measuring ink ratio for ${target_font}`);
const canvas = document.createElement('canvas');
const target_m = get_metrics(target_font);
const ratio = ref_m.ascent / target_m.ascent;
- // debug.log('layout', `Ink Ratio calculated: ${ratio.toFixed(3)}`);
return {
ratio: ratio,
// --- COLOR PHYSICS ---
is_color_light: function(color_string) {
- const debug = window.StyleRT.debug;
-
// 1. HSL Check
if (color_string.startsWith('hsl')) {
const numbers = color_string.match(/\d+/g);
// 2. RGB Check
const rgb = color_string.match(/\d+/g);
if (!rgb) {
- // debug.warn('color_layout', `Failed to parse color: "${color_string}". Defaulting to Light.`);
return true;
}
+++ /dev/null
-window.RT_REPO_ROOT = "../../../../";
-document.write('<script src="' + window.RT_REPO_ROOT + 'shared/style_directory_dict.js"></script>');
-document.write('<script src="' + window.RT_REPO_ROOT + 'developer/authored/RT/core/loader.js"></script>');
-document.write('<script src="' + window.RT_REPO_ROOT + 'developer/authored/RT/core/body_visibility_hidden.js"></script>');
<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');
+ window.RT = window.RT || {};
+
+ // !! document author !! This must point, relative to the document directory, to the RT library:
+ window.RT.dirpr_library = "../consumer/release/RT";
+
+ document.write('<script src="' + window.RT.dirpr_library + '/core/loader.js"><\\/script>');
+ </script>
+ <script>
+ window.RT.load('core/utility');
+ window.RT.load('core/block_visibility_during_layout');
+ window.RT.load('theme');
+ window.RT.load('layout/article_tech_ref');
</script>
</head>
+
<body>
<RT-article>
<RT-TOC level="1"></RT-TOC>
- <h1>Table of custom tags</h1>
+ <RT-chapter>Table of custom tags</RT-chapter>
<h2>Style tag reference</h2>
</tbody>
</table>
- <h1>Architecture overview</h1>
+ <RT-chapter>Architecture overview</RT-chapter>
<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>
`setup.js` points at the style files and is installation specific.</p>
- <h1>Semantic tags</h1>
+ <RT-chapter>Semantic tags</RT-chapter>
<p>
The system relies on a specific set of custom tags in the <RT-code>RT-</RT-code> namespace to separate meaning from presentation.
</p>
Use <RT-code><RT-cite></RT-code> with the <RT-code>ref</RT-code> attribute to insert bibliographic citations. This ensures formatting remains consistent and separates citation data from standard prose.
</p>
<RT-code>
- ... formalized as Basic Law V <RT-cite ref="Gottlob Frege, Grundgesetze, 1903"></RT-cite>.
+ ... formalized as Basic Law V <RT-endnote ref="Gottlob Frege, Grundgesetze, 1903"></RT-endnote>.
</RT-code>
<h3>Dynamic cross referencing</h3>
Use <RT-code><RT-index></RT-code> at the end of the document to compile a glossary. Similar to the TOC compiler, this tag scans the DOM for automatic definition anchors produced by the term module and generates an alphabetized list of defined terms and neologisms.
</p>
- <h1>Navigation and layout</h1>
+ <RT-chapter>Navigation and layout</RT-chapter>
<h2>Automatic table of contents</h2>
<p>
For major document divisions, use <RT-code><RT-chapter></RT-code>. The semantic processor translates this tag into an <RT-code><RT-page-break></RT-code> followed by an <RT-code><h1 class="RT-chapter"></RT-code>. This ensures the chapter starts on a new page, inherits standard typography, and is automatically indexed by the TOC engine.
</p>
- <h1>Debugging</h1>
+ <RT-chapter>Debugging</RT-chapter>
<h2>Debug tokens</h2>
<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>
+ <RT-chapter>Themes</RT-chapter>
<p>
The system supports hot swapping themes by changing the script import in the head.
</p>
<li><strong>Light:</strong> <RT-code>style/theme_light_gold.js</RT-code></li>
</ul>
- <h1>Manifest</h1>
+ <RT-chapter>Manifest</RT-chapter>
<RT-code>
1. style_orchestrator.js (Example/default footer script)
2. utility.js (Math/Color physics)
window.StyleRT.style_orchestrator();
</script>
- <h1>RT conventions</h1>
+ <RT-chapter>RT conventions</RT-chapter>
<p> Headings are first letter capitalized. Remaining words are as they would be in English prose.</p>
- <h1>Exercises</h1>
+ <RT-chapter>Exercises</RT-chapter>
<ol>
<li>
*/
-window.StyleRT = window.StyleRT || {};
+window.RT = window.RT || {};
-window.StyleRT.TOC = function(){
- const debug = window.StyleRT.debug || { log: function(){} };
+window.RT.TOC = function(){
+ const debug = window.RT.debug || { log: function(){} };
const TOC_seq = document.querySelectorAll('rt-toc');
TOC_seq.forEach( (container ,TOC_index) => {
Processes <RT-chapter> tags.
Transforms the tag into an <RT-page-break> followed by an <h1> with the RT-chapter class.
*/
-window.StyleRT = window.StyleRT || {};
+window.RT = window.RT || {};
-window.StyleRT.chapter = function(){
- const debug = window.StyleRT.debug || { log: function(){} };
+window.RT.chapter = function(){
+ const debug = window.RT.debug || { log: function(){} };
document.querySelectorAll('RT-chapter').forEach( (el ,index) => {
if(debug.log) debug.log('chapter' ,`Processing chapter ${index + 1}`);
+++ /dev/null
-window.StyleRT = window.StyleRT || {};
-
-window.StyleRT.citation = function(){
- const citations = document.querySelectorAll('rt-cite');
- if(citations.length === 0) return;
-
- const article = document.querySelector('rt-article');
- if(!article) return;
-
- // 1. Ensure the H1 is a direct child of the article so the TOC can see it
- let endnotesHeader = document.getElementById('endnotes-header');
- if (!endnotesHeader) {
- endnotesHeader = document.createElement('h1');
- endnotesHeader.id = 'endnotes-header';
- endnotesHeader.innerText = 'Endnotes';
- article.appendChild(endnotesHeader);
- }
-
- // 2. Locate or generate the endnotes list container
- let endnoteContainer = document.querySelector('rt-endnotes');
- if(!endnoteContainer) {
- endnoteContainer = document.createElement('rt-endnotes');
- article.appendChild(endnoteContainer);
- }
-
- // 3. Ensure the list structure exists
- if(!endnoteContainer.querySelector('ol')) {
- endnoteContainer.innerHTML = '<ol></ol>';
- }
-
- const list = endnoteContainer.querySelector('ol');
-
- // Process each inline citation
- citations.forEach((cite, index) => {
- const refNum = index + 1;
- const refText = cite.getAttribute('ref') || cite.innerHTML;
-
- cite.innerHTML = `<a href="#note-${refNum}" id="cite-${refNum}">[${refNum}]</a>`;
- cite.style.cursor = 'pointer';
- cite.style.color = 'var(--rt-brand-link)';
- cite.style.textDecoration = 'none';
-
- // Append the corresponding entry into the endnotes list
- const li = document.createElement('li');
- li.id = `note-${refNum}`;
- li.innerHTML = `${refText} <a href="#cite-${refNum}" style="text-decoration:none;">↩</a>`;
- list.appendChild(li);
- });
-
- // Style the container
- endnoteContainer.style.display = 'block';
- endnoteContainer.style.marginTop = '1rem';
- endnoteContainer.style.borderTop = '1px solid var(--rt-surface-3)';
- endnoteContainer.style.paddingTop = '1rem';
-};
Removes common indent from lines of code.
*/
function code() {
- const RT = window.StyleRT;
+ const RT = window.RT;
const U = RT.utility;
const debug = RT.debug;
debug.log('code', 'Render cycle complete.');
}
-window.StyleRT = window.StyleRT || {};
-window.StyleRT.code = code;
+window.RT = window.RT || {};
+window.RT.code = code;
// developer/authored/RT/element/constraint.js
-window.StyleRT = window.StyleRT || {};
+window.RT = window.RT || {};
-window.StyleRT.constraint = function(){
+window.RT.constraint = function(){
document.querySelectorAll('rt-constraint').forEach( (el) => {
el.style.display = 'block';
el.style.borderLeft = '4px solid var(--rt-state-warning)';
// developer/authored/RT/element/crossref.js
-window.StyleRT = window.StyleRT || {};
+window.RT = window.RT || {};
-window.StyleRT.crossref = function(){
+window.RT.crossref = function(){
document.querySelectorAll('rt-crossref').forEach( (el) => {
el.style.color = 'var(--rt-brand-link)';
el.style.textDecoration = 'underline';
--- /dev/null
+window.RT = window.RT || {};
+
+window.RT.end_note = function(){
+ const citations = document.querySelectorAll('rt-cite');
+ if(citations.length === 0) return;
+
+ const article = document.querySelector('rt-article');
+ if(!article) return;
+
+ // 1. Ensure the H1 is a direct child of the article so the TOC can see it
+ let endnotesHeader = document.getElementById('endnotes-header');
+ if (!endnotesHeader) {
+ endnotesHeader = document.createElement('h1');
+ endnotesHeader.id = 'endnotes-header';
+ endnotesHeader.innerText = 'Endnotes';
+ article.appendChild(endnotesHeader);
+ }
+
+ // 2. Locate or generate the endnotes list container
+ let endnoteContainer = document.querySelector('rt-endnotes');
+ if(!endnoteContainer) {
+ endnoteContainer = document.createElement('rt-endnotes');
+ article.appendChild(endnoteContainer);
+ }
+
+ // 3. Ensure the list structure exists
+ if(!endnoteContainer.querySelector('ol')) {
+ endnoteContainer.innerHTML = '<ol></ol>';
+ }
+
+ const list = endnoteContainer.querySelector('ol');
+
+ // Process each inline citation
+ citations.forEach((cite, index) => {
+ const refNum = index + 1;
+ const refText = cite.getAttribute('ref') || cite.innerHTML;
+
+ cite.innerHTML = `<a href="#note-${refNum}" id="cite-${refNum}">[${refNum}]</a>`;
+ cite.style.cursor = 'pointer';
+ cite.style.color = 'var(--rt-brand-link)';
+ cite.style.textDecoration = 'none';
+
+ // Append the corresponding entry into the endnotes list
+ const li = document.createElement('li');
+ li.id = `note-${refNum}`;
+ li.innerHTML = `${refText} <a href="#cite-${refNum}" style="text-decoration:none;">↩</a>`;
+ list.appendChild(li);
+ });
+
+ // Style the container
+ endnoteContainer.style.display = 'block';
+ endnoteContainer.style.marginTop = '1rem';
+ endnoteContainer.style.borderTop = '1px solid var(--rt-surface-3)';
+ endnoteContainer.style.paddingTop = '1rem';
+};
document.head.appendChild(script);
}
-window.StyleRT = window.StyleRT || {};
-window.StyleRT.math = math;
+window.RT = window.RT || {};
+window.RT.math = math;
// developer/authored/RT/element/symbol.js
-window.StyleRT = window.StyleRT || {};
+window.RT = window.RT || {};
-window.StyleRT.symbol = function(){
+window.RT.symbol = function(){
document.querySelectorAll('rt-symbol').forEach( (el) => {
el.style.fontFamily = '"Courier New", Courier, monospace';
el.style.fontWeight = '600';
- Automatically generates IDs for first occurrences for future indexing.
*/
-window.StyleRT = window.StyleRT || {};
+window.RT = window.RT || {};
-window.StyleRT.term = function() {
- const RT = window.StyleRT;
+window.RT.term = function() {
+ const RT = window.RT;
const debug = RT.debug || {
log: function() {}
Usage:
<RT-title title="..." author="..." date="..." copyright="..."></RT-title>
*/
-window.StyleRT = window.StyleRT || {};
+window.RT = window.RT || {};
-window.StyleRT.title = function() {
- const debug = window.StyleRT.debug || { log: function(){} };
+window.RT.title = function() {
+ const debug = window.RT.debug || { log: function(){} };
document.querySelectorAll('rt-title').forEach(el => {
const title = el.getAttribute('title') || 'Untitled Document';
-// debug messsages don't work here, because RT/core/utility isn't loaded until after the function runs.
+// debug messages don't work here, because core/utility isn't loaded until after the function runs.
(function(){
- const RT = window.StyleRT = window.StyleRT || {};
+ const RT = window.RT = window.RT || {};
const debug = RT.debug || { log: function(){} };
debug.log('scroll', "1. Initializing script.");
// 4. The Lock
let is_layout_locked = true;
- // 5. Declare Dependencies
- RT.include('RT/element/chapter');
- RT.include('RT/element/citation');
- RT.include('RT/core/utility');
- RT.include('RT/element/math');
- RT.include('RT/element/code');
- RT.include('RT/element/term');
- RT.include('RT/element/TOC');
- RT.include('RT/element/title');
- RT.include('RT/element/theme_selector');
- RT.include('RT/element/symbol');
- RT.include('RT/element/constraint');
- RT.include('RT/element/crossref');
-
-
- RT.include('RT/layout/paginate_by_element');
- RT.include('RT/layout/page_fixed_glow');
- RT.include('RT/layout/paginate_by_element');
-
- RT.include('RT/core/body_visibility_visible');
+ // Helper to ensure we only signal completion once
+ function unlock_layout() {
+ if (!is_layout_locked) return;
+ is_layout_locked = false;
+ debug.log('scroll', "10. Layout fully unlocked. Emitting completion signal.");
+ document.dispatchEvent(new Event("RT_layout_complete"));
+ }
+ // 5. Declare Dependencies
+ RT.load('element/chapter');
+ RT.load('element/endnote');
+ RT.load('element/math');
+ RT.load('element/code');
+ RT.load('element/term');
+ RT.load('element/TOC');
+ RT.load('element/title');
+ RT.load('element/theme_selector');
+ RT.load('element/symbol');
+ RT.load('element/constraint');
+ RT.load('element/crossref');
+
+ RT.load('layout/paginate_by_element');
+ RT.load('layout/page_fixed_glow');
// 6. The Typography Layout
RT.article = function(){
style.color = "var(--rt-content-main)";
}
- window.StyleRT = window.StyleRT || {};
- window.StyleRT.config = window.StyleRT.config || {};
- window.StyleRT.config.page = window.StyleRT.config.page || {};
- window.StyleRT.config.page.height_limit = 900;
+ window.RT = window.RT || {};
+ window.RT.config = window.RT.config || {};
+ window.RT.config.page = window.RT.config.page || {};
+ window.RT.config.page.height_limit = 900;
const style_node = document.createElement("style");
style_node.innerHTML = `
max-width: 100%;
height: auto;
display: block;
- margin: 1.5rem auto; /* Centers the image */
+ margin: 1.5rem auto;
}
-
`;
document.head.appendChild(style_node);
};
function run_semantics(){
debug.log('scroll' ,`4. run_semantics starting.`);
if(RT.theme) RT.theme();
- if(RT.citation) RT.citation();
+ if(RT.endnote) RT.endnote();
RT.article();
if(RT.title) RT.title();
if(RT.term) RT.term();
if(RT.TOC) RT.TOC();
if(RT.paginate_by_element) RT.paginate_by_element();
if(RT.page) RT.page();
- if(RT.body_visibility_visible) RT.body_visibility_visible();
debug.log('scroll', `6. Pagination complete.`);
function enforce_scroll(target, use_hash, attempts) {
if (attempts > 15) {
debug.log('scroll', "8. Scroll enforcement timed out. Unlocking.");
- is_layout_locked = false;
+ unlock_layout();
return;
}
debug.log('scroll', `9a. Browser late-stage rebellion detected. Re-enforcing.`);
enforce_scroll(target, use_hash, attempts + 1);
} else {
- is_layout_locked = false;
- debug.log('scroll', "10. Layout fully unlocked.");
+ unlock_layout();
}
}, 100);
} else {
});
// 10. Bind to DOM Ready
- document.addEventListener( 'DOMContentLoaded' ,run_semantics );
+ document.addEventListener('DOMContentLoaded', run_semantics);
})();
+
--- /dev/null
+
+1.
+
+<RT-counter name="figure" style="Natural" initial="1" separator=".">
+
+name can be any string
echo "Harmony v2.2 2026-03-06"
-echo "RT-style-JS_public v2.1 2026-06-01"
+echo "RT-style-JS_public v3.1 2026-06-20 10:39:27 Z"
projects / RT-style / commitdiff