title
A prototype
Hello demo scene
:root{ --u:32px; } body{ background:black; display:flex; justify-content:center; align-items:center; height:90vh; } span{ background-image:url(https://raw.githubusercontent.com/ianhan/BitmapFonts/main/32X32-FG.png); background-repeat: no-repeat; display:inline-block; width:var(--u); height:var(--u); color:transparent; }
const el = document.querySelectorAll("p") let fontMap = {tileW:32, tileH:32, " ":{x:0,y:0}, "a":{x:4,y:4}, "b":{x:5,y:4}, "c":{x:6,y:4}, "d":{x:7,y:4}, "e":{x:8,y:4}, "e":{x:8,y:4}, "f":{x:9,y:4}, "g":{x:10,y:4}, "h":{x:1,y:5}, "i":{x:2,y:5}, "j":{x:3,y:5}, "k":{x:4,y:5}, "l":{x:5,y:5}, "m":{x:6,y:5}, "n":{x:7,y:5}, "o":{x:8,y:5}, "p":{x:9,y:5}, "q":{x:10,y:5}, "r":{x:1,y:6}, "s":{x:2,y:6}, "t":{x:3,y:6}, "u":{x:4,y:6}, "v":{x:5,y:6}, "w":{x:6,y:6}, "x":{x:7,y:6}, "y":{x:8,y:6}, "z":{x:9,y:6}} demostyle(el) function demostyle(el){ for (var i = 0; i < el.length; i++) { let node = el[i] let a = node.innerHTML.split('') node.innerHTML = "" for (var j = 0; j < a.length; j++) { let char = a[j] let lchar = char.toLowerCase() let s = document.createElement('span') s.setAttribute('data-char', lchar) console.log(lchar) let w = fontMap.tileW let h = fontMap.tileH let x = fontMap[lchar].x - 1 let y = fontMap[lchar].y - 1 s.style.backgroundPosition = ((-x*w)+"px " + (-y*h)+"px") s.innerHTML = lchar node.appendChild(s) } } }
snap
save
new
fork
download
html
css
js
output
gallery
config
➚ link to output
➚ snap player
font size
live reload
snap mode
layout
⤷ switch
★ info and code