RetrotxtJS correctly displays legacy ASCII and NFO text on a modern UTF-8 HTML page.
- On UTF-8 Unicode webpages, it rerenders preformatted text encoded in legacy ISO-8859-1 latin1, CP-437 US-ASCII, or Windows-1252 that incorrectly display.
- It applies historically accurate, monospaced fonts to the text.
- Optionally wraps preformatted text that lacks line breaks.
npm install retrotxtTo use RetrotxtJS,
- Copy the
css/,font/,js/directories withindist/to the webroot of your site. - The element containing the preformatted text will require a
retrotxt-canvasid attribute. - Insert the RetrotxtJS initialization script at the end of the page.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Example</title>
</head>
<body>
<pre>
Hello
world.
</pre>
</body>
</html><pre id="retrotxt-canvas">
Hello
world.
</pre> <script defer src="/js/retrotxt-init.js"></script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Example</title>
</head>
<body>
<pre id="retrotxt-canvas">
Hello
world.
</pre>
</body>
<script defer src="/js/retrotxt-init.js"></script>
</html>RetrotxtJS uses ES6 modules, so it requires a webserver.
There is a collection of example HTML files with several preformatted texts that you can view in the browser.
npm run-script serve
# Starting up http-server, serving dist
# Available on:
# http://127.0.0.1:8087The default View text as: button used by RetrotxtJS is Unicode.
You may wish to change this on a per-page basis by assigning a class value to the retrotxt-canvas element.
<pre id="retrotxt-canvas"></pre><pre id="retrotxt-canvas" class="retrotxt-msdos"></pre><pre id="retrotxt-canvas" class="retrotxt-amiga"></pre><pre id="retrotxt-canvas" class="retrotxt-windows"></pre>RetrotxtJS expects all assets to maintain the same relative directory structure found in dist/.
However, you may place these directories (css/, font/, js/) in any subdirectory you wish. So instead of putting these in the webserver root, you could store them in the subdirectory /lib/retrotxt/ and update the script element as so:
<script defer src="/lib/retrotxt/js/retrotxt-init.js">RetrotxtJS requires a modern browser that supports ES6 modules and the Element.append() method. Before loading any heavy assets such as the fonts or primary scripts, the initialization script feature tests the browser using legacy JS. It will gracefully exit if the browser is not suitable.
RetrotxtJS uses ES6 modules that cannot be run locally in a browser due to their security requirements. Otherwise, the browser will throw CORS errors and abort the scripts.
RetrotxtJS assumes your webserver loads any CP-437 preformatted text as Windows-1252. That may not be the case on some server configurations, and RetrotxtJS will not work correctly.
Unicode (and thus UTF-8) is backwardly compatible with ASCII (Basic Latin), ISO-8859-1 (Latin-1 Supplement) but not with CP-437.
A few code points that CP-437 uses for display characters are control characters in most other situations.
0009in use by the ○ character is a\thorizontal tab control.000Ain use by the ◙ character is a\nnewline line feed.000Din use by the ♪ character is a\rnewline carriage return.
001Bis displayed as the ← character but is the escape control used by ANSI text.001Ais displayed as the → character but is sometimes an MS-DOS End-of-file marker.
RetrotxtJS uses a GNU Lesser General Public License v3.0.
This license does not cover the included fonts.
The Ultimate Oldschool PC Font Pack v2.2 uses an Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license (tldr).
Multi-Platform Fonts uses a GNU General Public License Font Exception (GPL+FE) license (tldr).
RetrotxtJS by Ben Garrett 📧.
IBM_VGA_8x16font by Viler.TopazPlus_a1200font by TrueSchool Ascii.
IBM created it for their 1981 IBM-PC to allow English-speaking developers to develop text-based programs with keyboard interfaces. Today it is still used by digital artists who create text and colored ANSI art, but otherwise, it is unsupported.
It was introduced in 1987 as an official international standard, adopted by Unix, Linux, the Commodore Amiga, and much of the world-wide-web in its early years.
Microsoft's take on ISO-8859-1, whereby they broke it by inserting several new characters with Windows 3.1 and 95 that could only be viewed on computers running Windows. Windows-1252 did become a valid HTML page encoding, but its "usage" was “problematic”.
Legacy character encodings were mostly 8-bit with a fixed set of 256 or fewer characters. A computer could only display the characters and symbols included in the chosen code page. If an author wrote on a machine set to CP-437 and wanted to show the $ dollar, € euro, and ₽ ruble symbols in the same document, they couldn't due to the lack of available glyphs.
Unicode overcomes these limitations by assigning each known glyph, symbol, or character a unique, non-conflicting numeric identifier, known as a codepoint, that is always accessible.
It is an 8-bit implementation of Unicode that is now the default encoding for most operating systems, HTML, and this document.
Alt-codes are a common method to insert extended characters and legacy control codes into a document using their hexadecimal or decimal code point.
Hold Alt and enter the decimal code point using the numeric keypad.
Shift+Ctrl+U and enter the Unicode code point.
Hold ⌥ (option key) and enter the Unicode hexadecimal code point.
