WangIt!
//
// Welcome to the WangIt! Markup Language
//
// WangIt! allows people to create inline-styled HTML
// without having to learn HTML or CSS.
//
// This page contains a WangIt! processor written in Javascript
// and examples that explain the language and its intended use.
//
// To use this page, select an example or
// type into the top box for instant WangIt!
// This page is devoid of references to external resources.
// WangIt!
{defe}W WangIt!{/defe}
// Div style
{defe}ds margin:0 auto;text-align:center;{/defe}
// Markup
{defm}w font-size:96px;font-weight:bold;color:red;{/defm}
{defm}b font-weight:bold;{/defm}
{defm}s font-size:small;{/defm}
// Text
{defe}blurb The {b}{W}{/b} Markup Language{/defe}
{defe}vlurb {s}Version 1.0a{/s}{/defe}
// Whole thing
{defe}wd <div style="{ds}">{w}{W}{/w}{^}{blurb}{^}{vlurb}</div>{/defe}
{wd}
Why
WangIt! was created to fill a specific requirement:
{^}{^}
A {user} needed to periodically create snippets of inline-styled HTML,
destined for a template-built HTML document.{^}
The snippets would be a few sentences each, at most a paragraph.
{/}
The text required styling, but this was minimal:{^}
some font sizes and stylings like italic and bold, and a few links, images and entities.
{/}
It was deemed unecessary (and possibly cruel) to force the {user} to learn HTML and CSS.
{/}
It was decided then to create a mini markup language that would offer the {user}
a small set of application-specific and meaningful tags.
{/}
The {operator} would then be able to create whatever tags were needed by {user},{^}
allowing the {user} to get their work done in a simple and meaningful way.
{defe}user <em>user</em>{/defe}
{defe}operator <em>operator</em>{/defe}
{defe}/ {^}{^}{/defe}
Roles
{big}Success with {W} requires fulfilling two roles: {O} and {user}.{/big}{^^}
The {O} prepares {W} tags for the {user} and therefore must know{^}
the site or application, and of course HTML and CSS.{^^}
The {user} only needs to learn the {W} tags prepared by the {O}.{^^}
{big}{essence}This is the essence of {W}{/essence}{/big}
{^^}
{cheeses}
{cheese} Cheddar {|} {UK} {/cheese}
{cheese} Feta {|} {GR} {/cheese}
{cheese} Edam {|} {NL} {/cheese}
{cheese} Brie {|} {FR} {/cheese}
{/cheeses}
{^}{i}Oops!{/i} It seems the {O} forgot to prepare a {W} tag for {NL}.
{defe}W WangIt!{/defe}
{defe}O {i}operator{/i}{/defe}
{defe}user {i}user{/i}{/defe}
{defm}i font-style:italic;{/defm}
{defm}big font-size:larger;{/defm}
{defm}small font-size:smaller;{/defm}
{defe}ts border:1px solid black;{/defe}
{defe}td <td style="{ts}">{/defe}
{defe}cheeses <table style="border-collapse:collapse;"><caption>Cheeses</caption><thead><tr><th style="{ts}">Cheese</th><th style="{ts}">Provenance</th></tr></thead><tbody>{/defe}
{defe}/cheeses </tbody><tfoot><tr><td colspan="2" style="{ts}">{i}{small}Explore the world of cheese!{/small}{/i}</td></tr></tfoot></table>{/defe}
{defe}cheese <tr>{td}{/defe}
{defe}/cheese </td></tr>{/defe}
{defe}| </td>{td}{/defe}
{defe}UK 🇬🇧 England{/defe}
{defe}GR 🇬🇷 Greece{/defe}
{defe}FR 🇫🇷 France{/defe}
{defm}essence background:-webkit-linear-gradient(left,hsl(5,100%,50%),hsl(250,100%,50%));-webkit-background-clip:text;-webkit-text-fill-color:transparent;{/defm}
{defe}^^ {^}{^}{/defe}
Examples
{centrestage}
{labelbox}
Examples {>}
The examples on this page are meant to show the possibilites of {W} and spark some ideas.{^}
Basic {W} use would most likely involve not more than a handful of markup tags and a few entities.{^}
Some of the examples presented are perhaps going a bit too far.
{/labelbox}
{/centrestage}
{defe}W WangIt!{/defe}
{defe}labelbox <fieldset style="width:80%;margin:0 auto;border-radius:0.4em;"><legend style="font-size:larger;">{/defe}
{defe}> </legend>{/defe}
{defe}/labelbox </fieldset>{/defe}
{defe}centrestage <div style="display:grid;grid-template-columns:1fr;justify-content:center;align-items:center;height:100%;">{/defe}
{defe}/centrestage </div>{/defe}
Tags
WangIt! tags work like HTML tags,
except that WangIt! tags use curly braces {}
and HTML tags use angle brackets <>.
{^}
As with HTML, tags can be enclosing (require an end tag)
or non-enclosing ("standalone"), here called entities.
WangIt! Tags
WangIt! starts off with:
{>}
No defined markup tags {-}
Three defined entity tags {!^}, {!~} and {!_} {-}
Four functional tags {!defe}, {!defm}, {!link} and {!image} {-}
One escape {!!
{<}
The functional tags work by dividing their contents into two parts.
{;;}
Basic example:{;}
{example}
{!defe}H Hello there{!/defe}{;}
{^}{_}^^^^^^^^^^^{;}
{|}{_}|- Right part{;}
{|}{;}
{|}- Left part
{/example}
{defe}> <ul><li>{/defe}
{defe}- </li><li>{/defe}
{defe}< </li></ul>{/defe}
{defe}ps background-color:cornsilk;padding:1em;max-width:min-content;{/defe}
{defe}example <pre style="{ps}">{/defe}
{defe}/example </pre>{/defe}
{defe}6_ {_}{_}{_}{_}{_}{_}{/defe}
{defe}; {^}{/defe}
{defe}^ {6_}^{/defe}
{defe}| {6_}|{/defe}
{defe};; {;}{;}{/defe}
Entities
// Define an entity with the {defe} tag.
// Left part is entity tag name.
// Right part is replacement text.
{defe}# 1-800-555-1212{/defe}
{defe}CN Call Now{/defe}
{CN}: {#}. Operators are standing by.
That number again is {#} - {CN}!
Markup
// Define markup with the {defm} tag.
// Left part is markup tag name.
// Right part is css.
//
// Markup tags create <span>s.
{defm}big font-size:24px;{/defm}
{defm}red color:red;{/defm}
{big}Hello {red}WangIt!{/red} User{/big}
Links
// Links are created with the {link} tag.
// Left part is url.
// Right part is link text.
{link}httpz://a.site.weeb Surf the Weeb!{/link}
Links 2
// Link tags by default require the user to type a full url.
// Clever {defe}s can simplify linking and avoid potential mistakes.
{defe}site {link}httpz://a.site.weeb/ Main Site{/link}{/defe}
Visit our {site} for more information.
Links 3
// Shortcuts to places in a website.
// Use {defe}s to make a tag that looks and is used like the link tag.
{defe}gosite {link}httpz://a.site.weeb/{/defe}
{defe}/gosite {/link}{/defe}
Visit our {gosite}icheeses International Cheese{/gosite} section for more information.
Join the {gosite}cotm Cheese of the Month Club{/gosite}!
Images
// Images are created with the {image} tag.
// Left part is url.
// Right part is alt text.
{image}httpz://a.site.weeb/image.jpg An image with a broken link{/image}
WangIt! Entities
These entities are pre-defined and may be overrriden.{^}
{!^} <br>{^}
{!_} &nbsp;{^}
{!~} space{^}
Escape
WangIt! tags can be escaped by starting the tag name with an exclamation mark!{^}
The exclamation mark will be removed as a final step in processing.{^}
The exact replacement is {!! → {
{^}{^}
Using these tags:{^}{!defe}A eh{!/defe}{^}{!defm}blue color:blue;{!/defm}
{defe}A eh{/defe}{defm}blue color:blue;{/defm}
{^}{^}
A sentence with the {blue}{!A}{/blue} entity and the {!blue}{A}{!/blue} markup tags.
Nesting and Naming
// Instead of forcing users to nest tags,
// create one tag that combines styling.
// Maybe even give the tag a name
// that has more real-world value
// than a simple markup tag name.
// Instead of
{defm}medium font-size:22px;{/defm}
{defm}orange color:orange;{/defm}
// And forcing users to learn and type
{medium}{orange}Special this morning: Circular pancakes{/orange}{/medium}
<br><br>
// Try combining styles into a tag with a meaningful name
{defm}breakfast font-size:22px;color:orange;{/defm}
// Then, users can type
{breakfast}Special this morning: Bonus ½ slice of toast{/breakfast}
Lists
// Make list making simple with a few clever {defe}s.
{defe}list <ul style="list-style-type:disc"><li>{/defe}
{defe}/list </li></ul>{/defe}
{defe}| </li><li>{/defe}
// Now, users can make a bullet list
{list} A {|} List {|} In {|} WangIt! {/list}
// Make up your own syntax.
// Don't forget the closing tags!
{defe}list:Roman <ul style="list-style-type:upper-roman;"><li>{/defe}
{defe}/list:Roman </li></ul>{/defe}
{defe}Cheeses: <ul style="list-style-type:lao;"><li>{/defe}
{defe}, </li><li>{/defe}
{defe}. </li></ul>{/defe}
{list:Roman} Romans {|} go {|} to {|} house? {/list:Roman}
{Cheeses:} Cheddar {,} Feta {,} Edam {,} Brie {.}
Tables
// To fully reproduce HTML table structure would require
// duplicating HTML table tags as WangIt! tags.
// It's easier to simply use HTML tags in that case.
//
// However, a clever operator might reason that tables,
// from the point of view of the user,
// don't necessarily have to look too much like tables.
// Try for human-readable-ish or something that can be spoken out loud.
{Cheese-prices:}
Cheddar {from} {UK} {@} $2.99 {per} 300g {,}
Feta {from} {GR} {@} $2.99 {per} 300g {,}
Edam {from} {NL} {@} $2.99 {per} 300g {,}
Brie {from} {FR} {@} $2.99 {per} 300g {.}
//{defe}blurb Coming soon: Rotating cheese display.{/defe}
{defe}blurb See our new rotating cheese display!{/defe}
{defe}ts border:1px solid black;{/defe}
{defe}td <td style="{ts}">{/defe}
{defe}th <th style="{ts}">{/defe}
{defe}Cheese-prices: <table style="border-collapse:collapse;"><caption>Cheese Prices Today</caption><thead><tr>{th}Cheese</th>{th}Provenance</th>{th}Price</th>{th}Per</th></tr></thead><tbody><tr>{td}{/defe}
{defe}. </td></tr></tbody><tfoot><tr><td colspan="4" style="{ts}">{si}{blurb}{/si}</td></tr></tfoot></table>{/defe}
{defe}from </td>{td}{/defe}
{defe}@ <td style="{ts}text-align:right;">{/defe}
{defe}per {@}{/defe}
{defe}, </td></tr><tr>{td}{/defe}
{defe}UK 🇬🇧 England{/defe}
{defe}GR 🇬🇷 Greece{/defe}
{defe}NL 🇳🇱 Netherlands{/defe}
{defe}FR 🇫🇷 France{/defe}
{defm}si font-size:smaller;font-style:italic;{/defm}
// Note that all the cheese prices are the same;
// I don't need people getting all bent out of
// shape because their cheese was priced higher
// or lower than some other cheese.
Order
Input is processed in the following order:
{first}Entities{/first}
{first}{!^} <br>{/first}
{second}{!_} &nbsp;{/second}
{last}{!~} space{/last}
{second}Markup{/second}
{third}Links{/third}
{fourth}Images{/fourth}
{last}Escapes {!!{/last}
{defe}li <li>{/defe}
{defe}/li </li>{/defe}
{defe}first <ol>{li}{/defe}
{defe}/first {/li}{/defe}
{defe}second {li}{/defe}
{defe}/second {/li}{/defe}
{defe}third {li}{/defe}
{defe}/third {/li}{/defe}
{defe}fourth {li}{/defe}
{defe}/fourth {/li}{/defe}
{defe}last {li}{/defe}
{defe}/last {/li}</ol>{/defe}
WangItClean
{wc}
WangItClean is a function that can be used to "clean-up" up text,
the result of which can then be passed to WangIt!.{^}
WangItClean is completely optional.{^}
All the examples on this page are passed through WangItClean
before being passed through WangIt!.
{^}
{^}
WangItClean
{will:} Remove lines beginning with // (comments)
{then} Trim leading and trailing whitespace
{then} Collapse all runs of whitespace to single spaces {.}
For whitespace, this is much like how a browser treats HTML.{^}
Using WangItClean (or similar) allows for commenting.
{/wc}
{defe}wc <div style="max-width:30em;">{/defe}
{defe}/wc </div>{/defe}
{defe}will: will:<ol><li>{/defe}
{defe}then </li><li>{/defe}
{defe}. </li></ol>{/defe}
Code and Concept
Take a look at the code: one regexp and some string replacement - it's practically nothing!{^}
{W} can be easily written in any language that has regexps and string replacement.
{^}{^}
{W} is more of an idea{*} than a piece of code, and as mentioned often here,{^}
success comes from the cleverness and creativity of the person setting up the tags.
{^}{^}
An implementor might have ideas about improving or adding functionality to {W}.{^}
The author would be interested to hear of such things.
{^}{^}
{*}{s}The author doesn't think that any of the ideas here are new.{/s}
{defe}W WangIt!{/defe}
{defm}s font-size:small{/defm}
{defe}* *{/defe}
Future and Ideas
{grid}
{2}The author doesn't see any reasons to make WangIt! more than it is.{/2}
{Cell}WangIt! was designed for a simple, specific purpose.{/Cell}{`}
{Cell}The idea could certainly be applied to generating things other than HTML.{/Cell}{`}
{2}Nevertheless it is possible to create large documents with lots of WangIt! tags.{/2}
{4}If a <q>full</q> markup language is needed, there are plenty of good ones to choose from.{/4}
{/grid}
{g}gap:0.5em;{/g}
{c}{cb}grid-column-end:span 4;max-width:max-content;{/c}A {deff} tag (define function) might be interesting.
<pre>{deff}upcase myUpcase{/deff}</pre>
Would be used like:
<pre>... some text {upcase}word{/upcase} other text ...</pre>
The function myUpcase would be called and passed the contents of the {upcase} tag.{^}
The tag and contents would be replaced with the return value from the function.{/cell}
{3}A {defr} tag (define regexp) could arrange the replaced elements differently than do the {!link} or {!image} tags.{/3}
{`}{c}{cb}width:35em;grid-column-end:span 3;max-width:max-content;{/c}This could lead to having a way to "{def}" the language from almost zero.{^}
Tags that are currently built-in, like {!link} and {!image} wouldn't exist but have to be defined,
and markup wouldn't necessarily generate only <span>s.{/cell}
{`}
{/grid}
{defe}g <div style="margin:1em auto 0;display:grid;grid-template-columns:repeat(4, 1fr);background:repeating-radial-gradient(hsl(0,90%,90%),hsl(0,0%,100%));{/defe}
{defe}/g ">{/defe}
{defe}grid {g}{/g}{/defe}
{defe}/grid </div>{/defe}
{defe}c <div style="padding:0.25em;max-width:14em;{/defe}
{defe}/c ">{/defe}
{defe}cell {c}{/c}{/defe}
{defe}/cell </div>{/defe}
{defe}cb border:1px solid hsl(0,100%,45%);border-radius:0.5em;{/defe}
{defe}Cell {c}{cb}{/c}{/defe}
{defe}/Cell {/cell}{/defe}
{defe}` {cell}{/cell}{/defe}
{defe}1 {Cell}{/defe}
{defe}/1 {/Cell}{`}{`}{`}{/defe}
{defe}2 {`}{Cell}{/defe}
{defe}/2 {/Cell}{`}{`}{/defe}
{defe}3 {`}{`}{Cell}{/defe}
{defe}/3 {/Cell}{`}{/defe}
{defe}4 {`}{`}{`}{Cell}{/defe}
{defe}/4 {/Cell}{/defe}
Blank