Pure CSS simulation of text-mode web browsers
npm install tty.cssPure CSS simulation of text-mode web browsers
Inspired by BOOTSTRA.386,tty.css is a pure CSS stylesheet that provides a visual aspect similar to
text-mode web browsers like Lynx or Links2, similar to what other projects like
98.css does with old desktop UIs.
http://www.kompx.com/en/text-based-web-browsers-for-linux.htm
- Text-like styled components
- Enforce usage of monospaced fonts (system UI monospaced font if available as
ui-monospace
and GNU Unifont if externally
provided)
- Usage of !important to force limitations of monospaced grid layout of TTYs
- Light and dark color schemes (default dark if there's no system preference)
- Markdown-inspired representation of compatible elements (can be used as pure
CSS html-to-markdown converter)
- Row-by-row scrolling
``html`
media="tty or (grid)"
rel="stylesheet"
type="text/css"
/>
If you want to apply it unconditionally, for example to use it as a base
stylesheet or to force a webpage to render as a terminal, just remove the media query. You can use the GNU Unifont by
adding the next line:
`html`
rel="stylesheet"
type="text/css"
/>
For row-by-row scrolling, it was possible to be done in pure CSS by using
scroll-snap-points-y,
but it was later removed from the CSS specification in benefict of element-based
snapping. Due to this, I've added a simple Javascript file that somewhat
replicates that functionality. You can use it by adding:
`html`
Alternatively, you can use a scroll-snap-points-y polyfill to have a morescroll-snap-points-y
"pure CSS-like" experience like old
scrollsnap-polyfill, or since
this will never goes into the standard, provide a ponyfill focused only on the here. Pull-requests are welcome.
- Pixel-perfect adjustment to 8x16 grid (bold, borders...)
- Replace bold by bright colors
- Replace graphical elements (images, videos and SVG) with low-res versions
- Multiple modes for graphical elements (only text, half-blocks, sixels, full
resolution)
- Color modes (monochrome, 16 colors, 256 colors, 24 bits)
I'm a hands-on learner when I find an interesting project to tink around, so I
decided to re-purposse it as a way to learn CSS myself.
GitHub Pages sites are powered by Jekyll, where themes
files are stacked. It was as simple as
placing an empty stylesheet file at assets/css/style.scss`
importing the one of the project.