4.5 KiB
4.5 KiB
CaTML (Cat Altered Text Markup Language) 🐾
Standard HTML is for humans. CaTML is for fine felines.
CaTML is a lightweight, zero-dependency HTML compiler and runtime written in JavaScript that translates feline markup tags and attributes directly into standard semantic HTML.
Repository: https://git.p20.dev/christian/CaTML.git
🚀 Quick Start
1. In HTML with <script type="text/catml">
Simply load catml.js and write your CaTML code directly:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Cat Page</title>
<script src="catml.js"></script>
</head>
<body>
<script type="text/catml">
<box breed="container">
<meow1>🐾 Welcome to My Website</meow1>
<purr>This page is written in pure <claw>CaTML</claw>!</purr>
<bap on-bap="alert('PURRR!')">Bap Me</bap>
</box>
</script>
</body>
</html>
2. Standalone Page (<catworld>)
You can even write the entire document root in CaTML:
<catworld>
<whiskers>
<collar>Kitty Portal</collar>
<script src="catml.js"></script>
</whiskers>
<fur>
<box>
<meow1>Welcome!</meow1>
<purr>The world is feline now.</purr>
</box>
</fur>
</catworld>
3. JavaScript API
// Compile to HTML string
const html = CatML.compile('<box><purr>Meow!</purr></box>');
console.log(html); // <div><p>Meow!</p></div>
// Render directly into a DOM element
CatML.render('<box><purr>Meow!</purr></box>', document.getElementById('app'));
📖 Feline Dictionary
Core Tags
| CaTML Tag | HTML Tag | Feline Concept / Description |
|---|---|---|
<catworld> / <catml> |
<html> |
The whole cat universe |
<whiskers> |
<head> |
Metadata & sensory inputs |
<collar> |
<title> |
Identification |
<fur> |
<body> |
The visible body |
<box> / <cardboard> |
<div> |
If it fits, I sits (container) |
<feather> / <mouse> |
<span> |
Small things to chase |
<meow1> ... <meow6> |
<h1> ... <h6> |
Headings (from roar to tiny squeak) |
<purr> |
<p> |
Steady purring paragraph |
<scratch> |
<a> |
Hyperlink (scratch and jump) |
<stare> |
<img> |
Image (what the cat stares at) |
<bap> / <paw> |
<button> |
Action button (bap items off tables) |
<sniff> |
<input> |
Input field |
<yowl> |
<textarea> |
Multi-line text field |
<bowl> |
<ul> |
Food bowl / list |
<numbered-bowl> |
<ol> |
Ordered list |
<treat> |
<li> |
Single treat / list item |
<claw> |
<strong> / <b> |
Sharp emphasis |
<hiss> |
<em> / <i> |
Italic hissed tone |
<catnip> |
<script> |
JavaScript (gives zoomies!) |
<groom> |
<style> |
CSS styling |
<litterbox> |
<footer> |
Bottom footer |
<nap> |
<hr> |
Rest / horizontal rule |
<door> |
<form> |
Form container |
<curtain> |
<header> |
Page header |
<shelf> |
<nav> |
Navigation bar |
<hammock> |
<main> |
Main content |
<perch> |
<section> |
Section |
Attributes
| CaTML Attribute | HTML Attribute | Description |
|---|---|---|
catch="..." |
href="..." |
Destination URL to chase |
prey="..." |
src="..." |
Source image URL |
scent="..." |
alt="..." |
Alt text / scent profile |
tag="..." |
id="..." |
ID attribute |
breed="..." |
class="..." |
CSS class attribute |
fluff="..." |
style="..." |
Inline CSS styles |
on-bap="..." |
onclick="..." |
Click event listener |
on-sniff="..." |
oninput="..." |
Input event listener |
on-change="..." |
onchange="..." |
Change event listener |
on-stalk="..." |
onmouseover="..." |
Mouseover event listener |
on-pounce="..." |
onmousedown="..." |
Mousedown event listener |
treat-type="..." |
type="..." |
Input type (text, number, etc.) |
kibble="..." |
value="..." |
Input value |
curiosity="..." |
placeholder="..." |
Placeholder text |
collar-name="..." |
name="..." |
Name attribute |
🎮 Interactive Playground
Open index.html in any browser to experience the CaTML Playground:
- Real-time syntax compiler
- Split view: Live preview & compiled raw HTML
- Pre-built templates:
- Welcome to CaTML
- Interactive Bap Counter
- Kitten Adoption Form
- Sir Pounce-a-Lot Portfolio
- Built-in interactive feline vocabulary modal
🧪 Testing
Run the automated test suite with Node.js:
node test/test.js
📄 License
MIT. Built with 🐾 purrs and catnip.