index.html

<!doctype html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<title>Symbololology</title>
<script>
/*
	Top-level object is {heading:[rows]}.
	Each row is an array, containing either 1+ strings (or null for a gap, for cross-row alignment),
	or a 2-value array containing a start and end codepoint, to compactly represent ranges.
*/
var chars = {
	"Punctuation":[
		["…","∼","¿","¡","‽","¦","⁄","‘","’","“","”","«","»","‹","›","¶","§","†","‡","·","–","—","•","◦","●","‣","🔶"],
		["·", "-", "‒", "‐", "–", "—", "―", "⸺", "⸻", "─"],
	],
	"Maths, numbers & units":[
		["≈","≠","√","∛","∜","−","÷","×","±","∓","∞","°","µ","‰","‱","′","″","‴","ℕ","ℤ","ℚ","ℝ","ℂ","𝔽"],
		["⊕","⊖","⊗","⊘","⊙","⊚","⊛","⊜","⊝","⊞","⊟","⊠","⊡","∘","∙","⋅","⋆",],
		["∅","∴","ℵ","∈","∋","∉","∌","∀","∁","∃","∄",],
		["⅛","⅙","⅕","¼","⅓","⅜","⅖","½","⅗","⅝","⅔","¾","⅘","⅚","⅞"],
		["¹","²","³","⁴","⁵","⁶","⁷","⁸","⁹","⁰",null,"⁺","⁻","⁼","⁽","⁾","ª","ⁱ","ⁿ"],
		["₁","₂","₃","₄","₅","₆","₇","₈","₉","₀","⏨","₊","₋","₌","₍","₎"],
		["➀","➁","➂","➃","➄","➅","➆","➇","➈","🄋","➉"],
		["➊","➋","➌","➍","➎","➏","➐","➑","➒","🄌","➓"],
	],
	"Box-Drawing": [
		[..."─╌┄┈│╎┆┊┌┐└┘├┤┬┴┼"],
		[..."━╍┅┉┃╏┇┋┏┓┗┛┣┫┳┻╋"],
		["═", null, null, null, "║", null, null, null, "╔", "╗", "╚", "╝", "╠", "╣", "╦", "╩", "╬"],
		[..."╴╵╶╷╸╹╺╻╼╽╾╿"],
		[..."┍┎┑┒┕┖┙┚"],
		[..."┭┮┯┰┱┲┵┶┷┸┹┺┝┞┟┠┡┢┥┦┧┨┩┪"],
		[..."┽┾┿╀╁╂╃╄╅╆╇╈╉╊"],
		[..."╒╓╕╖╘╙╛╜╞╟╡╢╤╥╧╨╪╫"],
		["╭", null, "╮", null, "╰", null, "╯", null, ..."╱╲╳"],
	],
	"Emoticons, decoration, UI & miscellaneous ":[
		["☰","✓","✔","✗","✘","⚡","❄","☀","☽","☂","★","☆","☁","⌁","⌘","♠","♣","♥","♦","☙","❧","⌦","♩","♫","🎶","⍟"],
		["❤","🧡","💛","💚","💙","💜","🖤","💖","💝","💕","💔"],
		[..."🟥🟧🟨🟩🟦🟪🟫⬛⬜"],
	],
	"Currency & commercial symbols":[
		["¤","¢","£","¥","€","© ","®","™","℮","♺"],
	],
	"Arrows & shapes":[
		["↵","←","↑","→","↓","↔","↕","↖","↗","↘","↙","⟲","⟳","↺","↻","⇄","⇅","↩","↪"],
		["▲","△","▶","▷","▼","▽","◀","◁","◯","◼","◻","◆","◇","▢","⬠","⬡"],
	],
	"Accents, ligatures & dipthongs":[
		["ä","à","á","â","ã","å","ç","ć","ĉ","è","é","ê","ë","ì","í","î","ï","ñ","ö","ò","ó","ô","õ","ś","ŝ","ü","ù","ú","û","ũ","ÿ","ø","æ","œ","ᵫ","ﬀ","ﬃ","ﬄ","ﬁ","ﬂ","ﬆ","ß"],
		["Ä","À","Á","Â","Ã","Å","Ç","Ć","Ĉ","È","É","Ê","Ë","Ì","Í","Î","Ï","Ñ","Ö","Ò","Ó","Ô","Õ","Ś","Ŝ","Ü","Ù","Ú","Û","Ũ","Ÿ","Ø","Æ","Œ"],
		],
	"Greek":[
		["α","β","γ","δ","ε","ζ","η","θ","ι","κ","λ","μ","ν","ξ","ο","π","ρ","ς","σ","τ","υ","φ","χ","ψ","ω"],
		["Α","Β","Γ","Δ","Ε","Ζ","Η","Θ","Ι","Κ","Λ","Μ","Ν","Ξ","Ο","Π","Ρ","Σ",null,"Τ","Υ","Φ","Χ","Ψ","Ω"],
	],
	"International Phonetic Alphabet":[
		[[0x250, 0x2af]]
	],
	"Fancy Alphabets":[
		[[0x24b6,0x24cf]],
		[[0x24d0,0x24e9]],
		[[0x1f150, 0x1f169]],
		[[0x1f130, 0x1f149]],
		[[0x1f170, 0x1f189]],
	],
}
</script>

<header>
	<h1>Symbololology</h1>
	<p id=last-char></p>
</header>
<article>
	<div id=chars></div>
	<hr id="end">
	<p><small>Overall site design blatantly stolen from <a href="http://notonyourkeyboard.com/">NotOnYourKeyboard</a>. Code completely rewritten fresh. Want a different set of characters for your own use? <a href="https://github.com/tabatkins/symbols/">Fork this on GitHub</a> and edit away!</small>
</article>

<style>
html {
	background-color:#fefefe;
	color:#5c5c5c;
	font-family: sans-serif;
	height: 100%;
}
body {
	margin: 0;
	padding: 0;
}
header {
	background-color:#4a4a4a;
	background-image: linear-gradient(to bottom, #C20047 0%, #C2001D 100%);
	background-clip: padding-box;
	background-origin: padding-box;
	padding:0 3em;
	border-bottom: 4px solid rgba(0,0,0,.3);
	display: flex;
	position: sticky;
	top: 0px;
	z-index: 20;
}
header h1 {
	color:#f1f1f1;
	font-weight:normal;
	text-shadow: 0px 0px 3px rgba(241, 241, 241, 1);
	font-size:2em;
	margin: .5em 0;
	flex: none;
}
#last-char {
	margin: 0 0 0 auto;
	color: #f1f1f1;
	font-size: 2em;
	align-self: center;
	max-height: 2em;
}
#last-char > a {
	color: #f1f1f1;
}
article {
	padding: 0 3em;
}
h2 {
	font-size: 1.2em;
	font-weight:normal;
}
.char-row {
	display: flex;
	flex-flow: row wrap;
	margin: 0;
}
.char, .spacer {
	flex: none;
	vertical-align:middle;
	margin:5px;
	box-sizing: border-box;
	width:40px;
	height:40px;
	outline:none;
	display:block;
}
.char {
	font-family: arial unicode, consolas, sans-serif;
	font-size:1.6em;
	box-shadow:4px 4px rgba(0,0,0,0.5);
	border: none;
	text-align:center;
	background-color:#ededed;
	position:relative;
	z-index:1;
	cursor:pointer;
	transition-property: background-color, z-index, transform;
	transition-duration: .3s;
	color:#43425E;
	text-shadow: 0px 0px 3px rgba(204, 204, 204, 1);
}
.char:focus {
	transform-origin: center;
	transform: scale(2);
	z-index:10;
	background-color: #C2F5A4;
}
#end {
	border: none;
}
#end::before {
	content: "❧";
	display: block;
	text-align:center;
	width:100%;
	font-size:4em;
	color:#C7C7C7
}
</style>

<script>
function find(sel) { return document.querySelector(sel); }
function findAll(sel) { return [...document.querySelectorAll(sel)]; }
function isString(obj) { return (typeof obj == "string") || (obj instanceof String); }
function iter(obj) {
	if(!obj) return [];
	var it = obj[Symbol.iterator];
	if(it) return it;
	return Object.entries(obj);
}
Object.prototype.map = function(cb) {
	var i = 0;
	var ret = [];
	for(var el of iter(this)) {
		ret.push(cb(el, i, this));
	}
	return ret;
}
function mk(tagname, attrs, ...children) {
	const el = document.createElement(tagname);
	for(const [k,v] of iter(attrs)) {
		if(k[0] == "_") {
			// property, not attribute
			el[k.slice(1)] = v;
		} else {
			el.setAttribute(k, v);
		}
	}
	append(el, children);
	return el;
}
function append(el, ...children) {
	const appendChild = (container, child) => {
		if(container instanceof Node) container.appendChild(child);
		else container.push(child);
	}
	for(const child of children) {
		if(child instanceof Node) {
			appendChild(el, child);
		} else if(Array.isArray(child)) {
			append(el, ...child);
		} else {
			appendChild(el, new Text(child));
		}
	}
	return el;
}

document.addEventListener("DOMContentLoaded", function() {
	buildUI(chars);
	document.body.addEventListener("focusin", selectChar);
	displayHash();
});
window.addEventListener("hashchange", displayHash);

function blurChar() {
	findAll(":focus").map(x=>x.blur());
}
function focusChar(char) {
	findAll(`input[value="${char}"`).map(x=>x.focus());
}

function displayHash() {
	var cp = parseInt(window.location.hash.slice(1), 16);
	if(cp) {
		blurChar();
		const char = String.fromCodePoint(cp);
		logChar(char);
		focusChar(char);
	}
}

function selectChar(e) {
	var el = e.target ? e.target : e;
	var clickedChar = null;
	if (el.tagName == "INPUT") {
		clickedChar = el.value;
		el.focus();
		if (navigator.clipboard) {
			navigator.clipboard.writeText(clickedChar);
		} else {
			console.warn('Cannot copy to clipboard');
		}
		logChar(clickedChar);
	}
}

function buildUI(chars) {
	const charsContainer = find("#chars");
	charsContainer.innerHTML = "";
	append(charsContainer,
		...chars.map(([title, rows])=>
			mk("section", {"class":"char-section"},
				mk("h2", {_innerHTML: title}),
				...rows.map(makeCharRow)
			)
		)
	)
}

function makeCharRow(row) {
	return mk("p", {"class":"char-row"}, ...row.map(createLi));
}

function createLi(c) {
	if(Array.isArray(c) && c.length == 2) {
		return [...range(...c)].map(x=>String.fromCodePoint(x)).map(createLi);
	} else if(c) {
		return mk("input", {
			"class":"char",
			readonly:"",
			value:c,
			size:1,
			title: "U+" + c.codePointAt(0).toString(16).padStart(4, "0"),
		});
	} else {
		return mk("span", {"class":"spacer"});
	}
}

function* range(start, stop) {
	if(start < stop) {
		for(var i = start; i <= stop; i++) {
			yield i;
		}
	} else {
		for(var i = start; i >= stop; i--) {
			yield i;
		}
	}
}

{
	let lastLoggedChar = null;
	function logChar(c) {
		if(lastLoggedChar == c) return;
		lastLoggedChar = c;
		var cp = c.codePointAt(0).toString(16).padStart(4, "0").toUpperCase();
		var url = `http://www.fileformat.info/info/unicode/char/${cp}/`;
		console.log(`${c} = U+${cp} ${url}`);
		find("#last-char").innerHTML = `${c} = <a href="${url}index.htm">U+${cp}</a>`;
		window.location.hash = cp;
	}
}
</script>