Supported HTML
The THINK Reference compiler will interpret most HTML 1.1 standard tags, including
anchor tage. External links in the viewer are handled via Internet Config, so Internet
Config should be configured correctly before using the viewer.
The basic layout of a HTML file for THINK Reference is identical to the HTML layout
used for the web. In other words:
All the html commands and text that you wish to see when you look
at this page of the database are between the and
commands
The tags specify the title of a page in the compiled THINK Reference database. </span></div><div class="chunk"><span class="style0">Every page within a THINK Reference database must have a unique name.</span></div><div class="chunk"><span class="style0">Basic paragraph formatting tags (<P>, <HR>, <BR>, <CENTER>) are supported along</span></div><div class="chunk"><span class="style0">with the basic character formatting tags such as <B>, <I>, <U>, <PRE>, etc. In addition,</span></div><div class="chunk"><span class="style0">the three basic types of HTML lists (ordered, unordered, and definition) are supported</span></div><div class="chunk"><span class="style0">in THINK Reference as are heading (<H1>, etc.) and font (<FONT>) tags.</span></div><div class="chunk"><span class="style0">Images can also be compiled into THINK Reference documents by using the standard</span></div><div class="chunk"><span class="style0"><IMG> tags, however the actual GIFs must be no wider than 400 pixels for them to be</span></div><div class="chunk"><span class="style0">compiled correctly. JPEGs are not supported.</span></div><div class="chunk"><span class="style0">Anchor <A> tags are supported by THINK Reference, but only as links to external sites,</span></div><div class="chunk"><span class="style0">not as internal links to other places on the page. In other words,</span></div><div class="chunk"><span class="style5"><A HREF="http://www.apple.com/">http://www.apple.com/</A></span></div><div class="chunk"><span class="style0">is supported by THINK Reference, but</span></div><div class="chunk"><span class="style5"><A HREF="#samefile">different place on the same page</A></span></div><div class="chunk"><span class="style0">is not.</span></div><div class="chunk"><span class="style0">THINK Reference has limited support for HTML tables. The main difference is that text</span></div><div class="chunk"><span class="style0">wrapping within a table item is not supported except in the last column of the table. </span></div><div class="chunk"><span class="style0">Table elements can only be text (no images) and the size of the table's columns must be</span></div><div class="chunk"><span class="style0">explicitly defined i.e. <TR WIDTH=100>. The maximum width for a table in THINK</span></div><div class="chunk"><span class="style0">Reference is 400.</span></div><div class="chunk"><span class="style0">Finally, horizontal rule tags <HR> are supported, but are only drawn one-third of the</span></div><div class="chunk"><span class="style0">way across a THINK Reference page.</span></div><div class="backlinks"><div class="backlinks-title">Referenced by (2):</div><ul class="backlinks-list"><li><a href="0.html">Compiler Documentation</a></li><li><a href="../THINK Ref Compiler/0.html">Compiler Documentation (THINK Ref Compiler)</a></li></ul></div></div><script>
let crossrefData = null;
const searchInput = document.getElementById('search-input');
const searchResults = document.getElementById('search-results');
let selectedIndex = -1;
let currentResults = [];
// Load crossref data on first search
async function loadCrossrefData() {
if (crossrefData !== null) return;
try {
const response = await fetch('../crossref.json');
crossrefData = await response.json();
} catch (e) {
crossrefData = [];
console.error('Failed to load crossref.json:', e);
}
}
function escapeHtml(text) {
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
function highlightMatch(text, query) {
if (!query) return escapeHtml(text);
const escaped = escapeHtml(text);
const regex = new RegExp('(' + query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + ')', 'gi');
return escaped.replace(regex, '<span class="highlight">$1</span>');
}
async function search(query) {
if (!query || query.length < 2) {
searchResults.classList.remove('visible');
currentResults = [];
return;
}
await loadCrossrefData();
const lowerQuery = query.toLowerCase();
currentResults = crossrefData.filter(item =>
item.name.toLowerCase().includes(lowerQuery)
).slice(0, 50);
currentResults.sort((a, b) => {
const aLower = a.name.toLowerCase();
const bLower = b.name.toLowerCase();
const aExact = aLower === lowerQuery;
const bExact = bLower === lowerQuery;
const aStarts = aLower.startsWith(lowerQuery);
const bStarts = bLower.startsWith(lowerQuery);
if (aExact && !bExact) return -1;
if (bExact && !aExact) return 1;
if (aStarts && !bStarts) return -1;
if (bStarts && !aStarts) return 1;
return a.name.localeCompare(b.name);
});
if (currentResults.length === 0) {
searchResults.innerHTML = '<div class="search-result"><span class="name">No results found</span></div>';
} else {
searchResults.innerHTML = currentResults.map((item, idx) => `
<div class="search-result${idx === selectedIndex ? ' selected' : ''}" data-index="${idx}">
<div class="name">${highlightMatch(item.name, query)}</div>
<div class="location">${escapeHtml(item.db)}</div>
</div>
`).join('');
}
searchResults.classList.add('visible');
selectedIndex = -1;
}
function navigateToResult(index) {
if (index >= 0 && index < currentResults.length) {
const item = currentResults[index];
window.location.href = '../' + encodeURIComponent(item.db) + '/' + item.page + '.html';
}
}
function updateSelection() {
const items = searchResults.querySelectorAll('.search-result');
items.forEach((item, idx) => {
item.classList.toggle('selected', idx === selectedIndex);
});
if (selectedIndex >= 0 && items[selectedIndex]) {
items[selectedIndex].scrollIntoView({ block: 'nearest' });
}
}
searchInput.addEventListener('input', (e) => {
search(e.target.value);
});
searchInput.addEventListener('keydown', (e) => {
if (e.key === 'ArrowDown') {
e.preventDefault();
if (selectedIndex < currentResults.length - 1) {
selectedIndex++;
updateSelection();
}
} else if (e.key === 'ArrowUp') {
e.preventDefault();
if (selectedIndex > 0) {
selectedIndex--;
updateSelection();
}
} else if (e.key === 'Enter') {
e.preventDefault();
if (selectedIndex >= 0) {
navigateToResult(selectedIndex);
} else if (currentResults.length > 0) {
navigateToResult(0);
}
} else if (e.key === 'Escape') {
searchResults.classList.remove('visible');
selectedIndex = -1;
}
});
searchResults.addEventListener('click', (e) => {
const result = e.target.closest('.search-result');
if (result && result.dataset.index !== undefined) {
navigateToResult(parseInt(result.dataset.index));
}
});
document.addEventListener('click', (e) => {
if (!e.target.closest('.search-box')) {
searchResults.classList.remove('visible');
}
});
searchInput.addEventListener('focus', () => {
if (searchInput.value.length >= 2) {
search(searchInput.value);
}
});
</script></body></html>