From 0abc14a2272d64bd3cdbe2e890f666a95516df7a Mon Sep 17 00:00:00 2001 From: Karsten Schmidt Date: Fri, 22 Jul 2022 12:11:46 +0200 Subject: [PATCH] feat(examples): major update big-font - update font defs - add support for kern tables - simplify UI generation --- examples/big-font/package.json | 1 + examples/big-font/src/font-large.txt | 12 -- examples/big-font/src/font-small.txt | 7 - examples/big-font/src/fonts/atari.txt | 32 ++++ examples/big-font/src/fonts/newgothic.txt | 95 +++++++++++ examples/big-font/src/fonts/smallblock.txt | 25 +++ examples/big-font/src/index.ts | 176 ++++++++++++++------- yarn.lock | 1 + 8 files changed, 271 insertions(+), 78 deletions(-) delete mode 100644 examples/big-font/src/font-large.txt delete mode 100644 examples/big-font/src/font-small.txt create mode 100644 examples/big-font/src/fonts/atari.txt create mode 100644 examples/big-font/src/fonts/newgothic.txt create mode 100644 examples/big-font/src/fonts/smallblock.txt diff --git a/examples/big-font/package.json b/examples/big-font/package.json index 639ce267c8..f4142ab0d7 100644 --- a/examples/big-font/package.json +++ b/examples/big-font/package.json @@ -17,6 +17,7 @@ }, "dependencies": { "@thi.ng/hiccup-html": "workspace:^", + "@thi.ng/paths": "workspace:^", "@thi.ng/rdom": "workspace:^", "@thi.ng/rdom-components": "workspace:^", "@thi.ng/rstream": "workspace:^", diff --git a/examples/big-font/src/font-large.txt b/examples/big-font/src/font-large.txt deleted file mode 100644 index abec801a50..0000000000 --- a/examples/big-font/src/font-large.txt +++ /dev/null @@ -1,12 +0,0 @@ -| |. |, |- |! |? |/ |A |B |C |D |E |F |G |H |I |J |K |L |M |N |O |P |Q |R |S |T |U |V |W |X |Y |Z - ░░░░ ░░░░░░░░░░ ░░░░ ░░░ ░░░░░░░░░ ░░░ ░░░░░░░░░ ░░░░░░░░░░ ░░░░░░░░░░ ░░░ ░░░░ ░░░░ ░░░░░░ ░░░░░░░░░░░ ░░░░ ░░░░ ░░░░ ░░ ░░ ░░░░░░░░░ ░░░ ░░░░░░░░░ ░░░ ░░░░░░░░░ ░░░ ░░░░░░░░░░░░ ░░░░ ░░░░ ░░░░ ░░░░ ░░░░ ░░░░ ░░░░ ░░░░ ░░░░ ░░░░ ░░░░░░░░░░░ - ░░░░ ░░░░░░░░░░ ░░░░ ░░░░░░░░░ ░░░░░░░░░░░ ░░░░░░░░░ ░░░░░░░░░░░ ░░░░░░░░░░░ ░░░░░░░░░░░ ░░░░░░░░░ ░░░░ ░░░░ ░░░░ ░░░░░░░░░░ ░░░░ ░░░░ ░░░░ ░▒░░ ░░▒░ ░░░░░░░░░░░ ░░░░░░░░░ ░░░░░░░░░░░ ░░░░░░░░░ ░░░░░░░░░░░ ░░░░░░░░░ ░░░░░░░░░░░░ ░░░░ ░░░░ ░░░░ ░░░░ ░░░░ ░░░░ ░░░░ ░░░░ ░░░░ ░░░░ ░░░░░░░░░░░ - ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒▒░ ░▒▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ - ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▓▓▒ ▒▓▓▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ - ▓███████▓ ▓███ ▓██▓ ▓███ ▓█████████▓ ▓█████████▓ ▓██▓ ▓██▓ ▓██▓ ▓███████ ▓███████ ▓██▓ ▓█████████▓ ▓██▓ ▓██▓ ▓██████▒ ▓██▓ ▓███ ▓█▓ ███▓ ▓██▓ ▓██▓ ▓██▓ ▓██▓ ▓█████████▓ ▓██▓ ▓██▓ ▓████████▓ ▓██▓ ▓██▓ ▓██▓ ▓██▓ ▓██▓ ▓██▓ ▓██▓ ▓██▓ ▓█████▓ ▓████▓ ▓██▓ - ░███████░ █░██ █░██ ████ █░██████░██ █░███████▒ █░██ █░██ █░██ █░██████ █░██████ █░██ ▒▓████ █░██████░██ █░██ █░██ █░█████▓ █░██ █░██ █░██ █░██ █░██ █░██ █░██ █░███████▒ █░██ █░██ █░██████▒ █████████ █░██ █░██ █░██ █░██ █░██ █░██ ▓█▓ █░██ █░███░█ █░██ █░██ - █░░█ █░░█ █░░█ █░░█ █░░█ █░░█ █░░█ █░░█ █░░█ █░░█ █░░█ █░░█ █░░█ █░░█ █░░█ █░░█ █░░█ █░░█ █░░█ █░░█ █░░█ █░░█ █░░█ █░░█ █░░█ █░░█ █░░█ █░░█ █░░█ █░░█ █░░█ █░░█ █░░█ █░░█ █░░█ █░░█ █░░█ █░░█ █░░░░█ █░░░░█ █░░█ █░░█ █░░█ █░░█ - ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▒▓ ▓▒▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ - ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▓▓▓▓▓▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▓▓▓▓▓▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▓▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▓▓▓▓▓▓▓▒ - ░██░ ░██░ ░██░ ░██░ ░██░ ░██░ ░██░ ░████████░ ░███████░ ░████████░ ░████████░ ░██░ ░████████░ ░██░ ░██░ ░▒██▒░ ░███████░ ░██░ ░██░ ░████████░ ░██░ ░██░ ░██░ ░██░ ░███████░ ░██░ ░██████░ ░██░ ░██░ ░███████░ ░██░ ░███████░ ░███░ ░█ █░ ░██░ ░██░ ░██░ ░█████████░ - ▒▓▓▒ ▒▓▓▒ diff --git a/examples/big-font/src/font-small.txt b/examples/big-font/src/font-small.txt deleted file mode 100644 index 874173407d..0000000000 --- a/examples/big-font/src/font-small.txt +++ /dev/null @@ -1,7 +0,0 @@ -| |. |, |- |! |? |/ |A |B |C |D |E |F |G |H |I |J |K |L |M |N |O |P |Q |R |S |T |U |V |W |X |Y |Z - ██ ████ ██ ███ ████ ████ ████ ████ ████ ████ ██ ██ ██ █████ ██ ██ ██ ██ ██ ████ ███ ████ ███ ████ ████ ██████ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ █████ - ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ █████ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ - █████ ██ ██ ██ █████ ████ ██ ██ ██ ████ ████ ██ ██ █████ ██ ██ ████ ██ ██ ██ ██ ██ ██ ██ ████ ██ ██ ████ ███ ██ ██ ██ ██ ██ ██ ██ ███ ████ ██ - ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ███ █████ ██ ██ ██ ██ - ██ ██ ██ ██ ██ ██ ██ ████ ████ ████ ████ ██ ████ ██ ██ ██ ███ ██ ██ ████ ██ ██ ██ ██ ███ ██ ███ ██ ██ ████ ██ ███ █ ██ ██ ██ ██ ██ █████ - ██ ██ diff --git a/examples/big-font/src/fonts/atari.txt b/examples/big-font/src/fonts/atari.txt new file mode 100644 index 0000000000..e1e02bbc46 --- /dev/null +++ b/examples/big-font/src/fonts/atari.txt @@ -0,0 +1,32 @@ +11 +| |. |, |- |! |? |/ |A |B |C |D |E |F |G |H |I |J |K |L |M |N |O |P |Q |R |S |T |U |V |W |X |Y |Z + ░░░░ ░░░░░░░░░░ ░░░░ ░░░ ░░░░░░░░░ ░░░ ░░░░░░░░░ ░░░░░░░░░░ ░░░░░░░░░░ ░░░ ░░░░ ░░░░ ░░░░░░ ░░░░░░░░░░░ ░░░░ ░░░░ ░░░░ ░░ ░░ ░░░░░░░░░ ░░░ ░░░░░░░░░ ░░░ ░░░░░░░░░ ░░░ ░░░░░░░░░░░░ ░░░░ ░░░░ ░░░░ ░░░░ ░░░░ ░░░░ ░░░░ ░░░░ ░░░░ ░░░░ ░░░░░░░░░░░ + ░░░░ ░░░░░░░░░░ ░░░░ ░░░░░░░░░ ░░░░░░░░░░░ ░░░░░░░░░ ░░░░░░░░░░░ ░░░░░░░░░░░ ░░░░░░░░░░░ ░░░░░░░░░ ░░░░ ░░░░ ░░░░ ░░░░░░░░░░ ░░░░ ░░░░ ░░░░ ░▒░░ ░░▒░ ░░░░░░░░░░░ ░░░░░░░░░ ░░░░░░░░░░░ ░░░░░░░░░ ░░░░░░░░░░░ ░░░░░░░░░ ░░░░░░░░░░░░ ░░░░ ░░░░ ░░░░ ░░░░ ░░░░ ░░░░ ░░░░ ░░░░ ░░░░ ░░░░ ░░░░░░░░░░░ + ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒▒░ ░▒▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ ░▒▒░ + ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▓▓▒ ▒▓▓▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ + ▓███████▓ ▓███ ▓██▓ ▓███ ▓█████████▓ ▓█████████▓ ▓██▓ ▓██▓ ▓██▓ ▓███████ ▓███████ ▓██▓ ▓█████████▓ ▓██▓ ▓██▓ ▓██████▒ ▓██▓ ▓███ ▓█▓ ███▓ ▓██▓ ▓██▓ ▓██▓ ▓██▓ ▓█████████▓ ▓██▓ ▓██▓ ▓████████▓ ▓██▓ ▓██▓ ▓██▓ ▓██▓ ▓██▓ ▓██▓ ▓██▓ ▓██▓ ▓█████▓ ▓████▓ ▓██▓ + ░███████░ █░██ █░██ ████ █░██████░██ █░███████▒ █░██ █░██ █░██ █░██████ █░██████ █░██ ▒▓████ █░██████░██ █░██ █░██ █░█████▓ █░██ █░██ █░██ █░██ █░██ █░██ █░██ █░███████▒ █░██ █░██ █░██████▒ █████████ █░██ █░██ █░██ █░██ █░██ █░██ ▓█▓ █░██ █░███░█ █░██ █░██ + █░░█ █░░█ █░░█ █░░█ █░░█ █░░█ █░░█ █░░█ █░░█ █░░█ █░░█ █░░█ █░░█ █░░█ █░░█ █░░█ █░░█ █░░█ █░░█ █░░█ █░░█ █░░█ █░░█ █░░█ █░░█ █░░█ █░░█ █░░█ █░░█ █░░█ █░░█ █░░█ █░░█ █░░█ █░░█ █░░█ █░░█ █░░█ █░░░░█ █░░░░█ █░░█ █░░█ █░░█ █░░█ + ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▒▓ ▓▒▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ ▓▒▒▓ + ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▓▓▓▓▓▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▓▓▓▓▓▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▓▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▒ ▒▓▓▓▓▓▓▓▓▓▒ + ░██░ ░██░ ░██░ ░██░ ░██░ ░██░ ░██░ ░████████░ ░███████░ ░████████░ ░████████░ ░██░ ░████████░ ░██░ ░██░ ░▒██▒░ ░███████░ ░██░ ░██░ ░████████░ ░██░ ░██░ ░██░ ░██░ ░███████░ ░██░ ░██████░ ░██░ ░██░ ░███████░ ░██░ ░███████░ ░███░ ░█ █░ ░██░ ░██░ ░██░ ░█████████░ + ▒▓▓▒ ▒▓▓▒ +LT -4 +LY -4 +LV -1 +F, -6 +P, -6 +O, -1 +T, -4 +V, -2 + +F. -5 +P. -5 +T. -2 + +F/ -3 +T/ -3 +V/ -1 +// -3 + +L- -4 \ No newline at end of file diff --git a/examples/big-font/src/fonts/newgothic.txt b/examples/big-font/src/fonts/newgothic.txt new file mode 100644 index 0000000000..6b51c240cb --- /dev/null +++ b/examples/big-font/src/fonts/newgothic.txt @@ -0,0 +1,95 @@ +15 +| |. |: |- |/ |! |? |A |B |C |D |E |F |G |H |I |J |K |L |M |N |O |P |Q |R |S |T |U |V |W |X |Y |Z + ░ ░ ░░░░░░ ░ ░ ░░░░░░ ░ ░ ░ ░ + ░░ ░░ ░░░░░░░░ ░░ ░░ ░░ ░░░ ░░ ░░ ░░ ░░ + ░▒░ ░▒░ ░▒░ ░▒░ ░▒░ ░▒░ ░▒░ ░▒░ ░▒░ ░▒░ + ▒▒▒ ▒▒▒ ▒▒▒ ▒▒▒ ▒▒▒ ▒▒▒ ▒▒▒ ░ ░ ▒▒▒ ░ ▒▒▒ ▒▒▒ + ▒▒▒ ▒▒▒ ▒▒▒ ░▒▒▒▒▒░ ▒▒▒▒▒▒░ ░▒▒▒▒▒░ ░▒▒▒▒▒▒ ░▒▒▒▒▒░ ▒▒▒▒▒░ ░▒▒▒▒▒░ ▒▒▒▒▒▒▒░ ▒▒ ▒▒ ▒▒▒ ▒▒ ▒▒▒ ▒ ▒▒ ▒▒ ░▒▒▒▒▒▒░ ░▒▒▒▒▒░ ░▒▒▒▒▒░ ░▒▒▒▒▒░ ▒▒▒▒▒▒░ ░▒▒▒▒▒░ ▒▒▒▒▒░ ▒▒░ ▒▒░ ▒▒░ ▒▒░ ▒ ▒ ▒ ▒ ▒ ▒ ▒ ░▒▒▒▒▒▒░ + ▒▒▒ ▒▒▒ ▒▒▒ ▒▒▒ ▒▒▒ ▒▒ ▒▒▒ ▒▒ ▒▒ ▒▒▒ ▒▒ ▒▒▒ ▒▒ ▒▒▒ ▒▒▒ ▒▒ ▒▒▒ ▒▒▒ ▒▒▒ ▒▒▒ ▒▒▒ ▒▒▒ ▒▒▒ ▒▒▒ ▒▒▒▒▒▒▒▒▒▒▒▒ ▒▒▒ ▒▒▒ ▒▒ ▒▒▒ ▒▒ ▒▒▒ ▒▒ ▒▒▒ ▒▒ ▒▒▒ ▒▒ ▒▒▒ ▒▒▒ ▒▒▒ ▒▒▒ ▒▒▒ ▒▒▒ ▒▒ ▒▒ ▒▒ ▒▒ ▒▒ ▒▒ ▒▒ ▒▒▒ ▒▒▒ + ▒▓▒ ▒▓▒ ▒▓▒ ▒▓▒ ▒▓▒ ▒▓▒ ▒▓▒ ▒▓▒ ▒▓▒ ▒▓▒ ▒▓▒ ▒▓▒ ▒▓▒ ▒▓▒ ▒▓▒ ▒▓▒ ▒▓▒ ▒▓▒ ▒▓▒ ▒▓▒ ▓▒▒▒▒▒▓ ▒▓▒ ▒▓▒ ▒▓▒ ▒▓▒ ▒▓▒ ▒▓▒ ▒▓▒ ▒▓▒ ▒▓▒ ▒▓▒ ▒▓▒ ▒▓▒ ▒▓▒ ▒▓▒ ▒▓▒ ▒▓▒ ▒▓▒ ▒▓▒ ▒▓▒ ▒▓▒ ▒▓▒ ▒▓▒ ▒▓▒ ▒▓▒ ▒▓▒ ▒▓▒ ▒▓▒ + ▓▓▓▓▓▓ ▓▓▓ ▓▓ ▓▓ ▒▓▓▓▓▓▓▓ ▓▓▓ ▓▓▓ ▓▓▓ ▓▓▓ ▓▓▓ ▓▓▓▓▓▓▓▓▓ ▓▓▓ ▓▓▓ ▓▓▓ ▓▓▓ ▓▓▓ ▓▓▓ ▓▓▓ ▓▓▓ ▓▓ ▓▓▓ ▓▓▓ ▓▓▓ ▓▓▓ ▓▓▓ ▓▓▓ ▓▓▓ ▓▓▓ ▓▓▓ ▓▓▓ ▓▓▓ ▓▓▓ ▓▓▓ ▒▓▓▓▓▓▓▓▒ ▓▓▓ ▓▓▓ ▓▓▓ ▓▓▓ ▓▓▓ ▓▓▓ ▓▓▓ ▓▓▓ ▓▓▓▓▓ ▓▓▓ ▓▓▓ ▓▓▓ + ▓▓▓▓▓▓ ▓▓▓ ▓ ▓ ▓▓▓ ▓▓▓ ▓▓▓ ▓▓▓ ▓▓▓ ▓▓▓ ▓▓▓ ▓▓▓ ▓▓▓ ▓▓▓ ▓▓▓ ▓▓▓ ▓▓▓ ▓▓▓ ▓▓▓ ▓▓▓ ▓▓▓ ▓▓▓▓ ▓▓▓ ▓▓▓ ▓▓▓ ▓▓▓ ▓▓▓ ▓▓▓ ▓▓▓ ▓▓▓ ▓▓▓ ▓▓▓ ▓▓▓ ▓▓▓ ▓▓▓ ▓▓▓ ▓▓▓ ▓▓▓ ▓▓▓ ▓▓▓ ▓▓▓ ▓▓▓ ▓▓▓ ▓▓▓ ▓▓▓ ▓▓▓ ▓▓▓ ▓▓▓ + ▓█▓ ▓█▓ ▓█▓ ▓█▓ ▓█▓ ▓█▓ ▓█▓ ▓█▓ ▓█▓ ▓█▓ ▓█▓ ▓█▓ ▓█▓ ▓█▓ ▓█▓ ▓█▓ ▓█▓ ▓█▓ ▓█▓ ▓█▓ ▓█▓ ▓█▓ ▓█▓ ▓█▓ ▓█▓ ▓█▓ ▓█▓ ▓█▓ ▓█▓ ▓█▓ ▓█▓ ▓█▓ ▓█▓ ▓█▓ ▓█▓ ▓█▓ ▓█▓ ▓█▓ ██ ██ ▓█▓ ▓█▓ ▓█▓ ▓█▓ ▓█▓ ▓█▓ ▓█▓ ▓█▓ + ███ ███ ██ ███ ███ ██ ███ ███ ██ ██ ███ ██ ███ ███ ██ ██ ██ ███ ██ ██ ██ ███ ██ ██ ██ ██ ██ ██ ██ ██ ███ ██ ███ ██ ██ ███ ██ ███ ██ ██ ███ ███ ██ █████ ████████████ ██ ██ ███ ███ ███ ███ + ███ █ ███ ███ ▓█████▓ ▓█████▓ ▓█████▓ ▓█████▓ ▓█████▓ █ ▓██████ █ █ █ ███ █ █ █ █ █ █ █ █ ▓█████▓ ██████▓ ▓██████ █ ▓█████▓ ▓████▓ ▓█████▓ ▓█▓ ██ ██ █ █ █ ▓███████ ▓██████▓ + ▓█▓ ▓█▓ ▓█▓ ▓█▓ ▓█▓ + ▓▓▓ ▓▓ ▓▓▓ ▓▓ ▓▓ ▓▓ ▓▓▓ ▓▓ + ▓▓▓▓▓▓▓ ▓▓▓▓▓▓ ▓ ▓ ▓▓▓▓▓▓▓ +AJ -5 +BJ -5 +CJ -5 +DJ -5 +EJ -5 +FA -2 +FC -3 +FD -3 +FE -3 +FG -3 +FI -2 +FJ -7 +FM -3 +FN -2 +FO -3 +FP -3 +FQ -3 +FR -3 +FS -3 +FU -2 +FV -2 +FW -3 +FX -3 +FY -3 +FZ -2 +IJ -4 +KJ -5 +LJ -5 +MJ -5 +NJ -5 +OJ -5 +PJ -5 +RJ -5 +SJ -5 +TJ -4 +UJ -5 +VJ -5 + +A? -1 +B? -1 +C? -1 +E? -1 +G? -1 +H? -1 +I? -1 +J? -1 +K? -1 +M? -1 +N? -1 +O? -1 +P? -1 +Q? -1 +R? -2 +S? -1 +U? -1 +V? -1 +W? -1 +X? -1 +Y? -1 +Z? -1 + +.J -4 +F. -4 +R. -4 +V. -1 + +/C -1 +/D -1 +/E -1 +F/ -4 +/G -1 +/I -1 +/J -6 +/O -1 +/P -1 +/Q -1 +/S -1 +// -3 \ No newline at end of file diff --git a/examples/big-font/src/fonts/smallblock.txt b/examples/big-font/src/fonts/smallblock.txt new file mode 100644 index 0000000000..a75f298187 --- /dev/null +++ b/examples/big-font/src/fonts/smallblock.txt @@ -0,0 +1,25 @@ +6 +| |. |, |- |! |? |/ |A |B |C |D |E |F |G |H |I |J |K |L |M |N |O |P |Q |R |S |T |U |V |W |X |Y |Z + ██ ████ ██ ███ ████ ████ ████ ████ ████ ████ ██ ██ ██ █████ ██ ██ ██ ██ ██ ████ ███ ████ ███ ████ ████ ██████ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ █████ + ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ █████ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ + █████ ██ ██ ██ █████ ████ ██ ██ ██ ████ ████ ██ ██ █████ ██ ██ ████ ██ ██ ██ ██ ██ ██ ██ ████ ██ ██ ████ ███ ██ ██ ██ ██ ██ ██ ██ ███ ████ ██ + ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ███ █████ ██ ██ ██ ██ + ██ ██ ██ ██ ██ ██ ██ ████ ████ ████ ████ ██ ████ ██ ██ ██ ███ ██ ██ ████ ██ ██ ██ ██ ███ ██ ███ ██ ██ ████ ██ ███ █ ██ ██ ██ ██ ██ █████ + ██ ██ +LT -2 +LV -1 +LY -2 +L? -1 + +F, -2 +T, -2 +V, -2 + +F. -2 +T. -1 +V. -1 + +T/ -2 +F/ -2 +V/ -1 +// -3 \ No newline at end of file diff --git a/examples/big-font/src/index.ts b/examples/big-font/src/index.ts index 6b8ab92e34..90a972d948 100644 --- a/examples/big-font/src/index.ts +++ b/examples/big-font/src/index.ts @@ -1,17 +1,39 @@ -import { div, inputRange, inputText, label, pre } from "@thi.ng/hiccup-html"; -import { $compile, $input, $inputNum } from "@thi.ng/rdom"; +import type { Keys } from "@thi.ng/api"; +import { + checkbox, + div, + inputRange, + inputText, + label, + pre, +} from "@thi.ng/hiccup-html"; +import { getIn, setIn } from "@thi.ng/paths"; +import { $compile, $input, $inputCheckbox, $inputNum } from "@thi.ng/rdom"; import { staticDropdown } from "@thi.ng/rdom-components"; -import { reactive, Stream, sync } from "@thi.ng/rstream"; +import { reactive, sync } from "@thi.ng/rstream"; import { repeat } from "@thi.ng/strings"; -import { repeatedly } from "@thi.ng/transducers"; -import FONT_L from "./font-large.txt?raw"; -import FONT_S from "./font-small.txt?raw"; +import { map, repeatedly } from "@thi.ng/transducers"; +import FONT_ATARI from "./fonts/atari.txt?raw"; +import FONT_GOTHIC from "./fonts/newgothic.txt?raw"; +import FONT_SMALL from "./fonts/smallblock.txt?raw"; +/** + * Fonts used by this class are defined in plain text using this format: + * + * - Line 1: lineheight (number of lines for all chars) + * - Line 2: header with character markers + * - Lines 3-N: Character defs + * - Lines N+1...: Kerning pairs (one pair per line, e.g. `LY -4`) + * + * See example fonts in /src/fonts + */ class Font { chars: Record = {}; rows: string[]; + kerning: Record> = {}; - constructor([header, ...rows]: string[]) { + constructor([$height, header, ...rows]: string[]) { + const height = parseInt($height); // parse header line to determine characters // and their offsets & widths... let prev: string | undefined; @@ -30,7 +52,15 @@ class Font { if (prev !== undefined) { this.chars[prev][1] = header.length; } - this.rows = rows; + // process kern pairs/table + // build index of character pairs & their kern values + // e.g. { L: { Y: -2 } } for a Y following an L will be shifted left + this.rows = rows.slice(0, height); + for (let pair of rows.slice(height)) { + if (!pair.length) continue; + const [[a, b], k] = pair.split(" "); + this.kerning = setIn(this.kerning, [a, b], parseInt(k)); + } } /** @@ -43,96 +73,124 @@ class Font { */ getChar(id: string, spacing = 0) { const char = this.chars[id]; - if (char === undefined) { - return [...repeatedly(() => "", this.rows.length)]; - } - const minSpace = Math.min(0, spacing); const pad = spacing > 0 ? repeat(" ", spacing) : ""; - return this.rows.map( - (row) => row.substring(char[0], char[1] + minSpace) + pad - ); + return char !== undefined + ? this.rows.map((row) => row.substring(char[0], char[1]) + pad) + : [...repeatedly(() => pad, this.rows.length)]; + } + + kernPair(acc: string[], a: string, b: string, spacing = 0, kern = true) { + const brows = this.getChar(b, spacing); + const k = kern ? (getIn(this.kerning, [a, b]) || 0) + spacing : spacing; + const merge = (a: string, b: string) => + b.replace(/./g, (x, i) => (x != " " ? x : a[i])); + if (k < 0) { + return acc.map((row, i) => + [ + row.substring(0, row.length + k), + merge( + row.substring(row.length + k), + brows[i].substring(0, -k) + ), + brows[i].substring(-k), + ].join("") + ); + } else { + return acc.map((row, i) => row + brows[i]); + } } /** * Similar to {@link Font.getChar}, but for an arbitrarily long string - * (single line). + * (single line) and kerning (by default). * * @param txt * @param spacing + * @param kern */ - getText(txt: string, spacing = 0) { - const res = [...repeatedly(() => "", this.rows.length)]; - for (let c of txt) { - this.getChar(c, spacing).forEach((row, i) => (res[i] += row)); + getText([first, ...rest]: string, spacing = 0, kern = true) { + let res = this.getChar(first, spacing); + let prev = first; + for (let c of rest) { + res = this.kernPair(res, prev, c, spacing, kern); + prev = c; } return res; } } -type FontID = "l" | "s"; - -// instantiate fonts (see font-*.txt files) -const FONTS: Record = { - l: new Font(FONT_L.split("\n")), - s: new Font(FONT_S.split("\n")), +// instantiate fonts (see *.txt files in /src/fonts dir) +const FONTS = { + atari: new Font(FONT_ATARI.split("\n")), + newgothic: new Font(FONT_GOTHIC.split("\n")), + small: new Font(FONT_SMALL.split("\n")), }; +type FontID = Keys; + // labels for dropdown -const FONT_NAMES: Record = { - l: "large", - s: "small", -}; +const FONT_NAMES = Object.keys(FONTS); // reactive state setup const msg = reactive("hello?!").map((x) => x.toUpperCase()); -const spacing = reactive(-1); -const font = reactive("l"); +const spacing = reactive(0); +const kerning = reactive(true); +const font = reactive("atari"); +// reactive stream combinator const main = sync({ src: { msg, spacing, - // map font ID to actual font instance - font: font.map((id) => FONTS[id]), + kerning, + font, }, + // compute ASCII output + xform: map(({ msg, spacing, kerning, font }) => + FONTS[font].getText(msg, spacing, kerning).join("\n") + ), }); +// helper component to wrap form elements +const formParam = (el: [string, ...any[]]) => { + const id = el[1].id; + return div(".mb3", {}, label(".dib.w4.ttu", { for: id }, id), el); +}; + // compile UI $compile( div( {}, - div( - ".mb3", - {}, - label(".dib.w4", { for: "body" }, "TEXT"), - inputText("#body.w5", { oninput: $input(msg), value: msg }) + formParam( + inputText(".w5", { + id: "text", + autofocus: true, + oninput: $input(msg), + value: msg, + }) + ), + formParam( + staticDropdown(FONT_NAMES, font, { + attribs: { id: "font", class: "w5" }, + }) ), - div( - ".mb3", - {}, - label(".dib.w4", { for: "spacing" }, "SPACING"), - inputRange("#spacing.w4", { + formParam( + inputRange(".w4", { + id: "spacing", oninput: $inputNum(spacing), - min: -2, - max: 2, + min: 0, + max: 4, step: 1, value: spacing, }) ), - div( - ".mb3", - {}, - label(".dib.w4", { for: "font" }, "FONT"), - staticDropdown(["l", "s"], font, { - attribs: { id: "font", class: "w4" }, - label: (id) => FONT_NAMES[id], + formParam( + checkbox({ + id: "kerning", + oninput: $inputCheckbox(kerning), + checked: kerning, }) ), - pre( - {}, - main.map(({ msg, spacing, font }) => - font.getText(msg, spacing).join("\n") - ) - ) + pre({}, main) ) ).mount(document.getElementById("app")!); diff --git a/yarn.lock b/yarn.lock index 1b2705fb79..73c16d11d2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -46,6 +46,7 @@ __metadata: resolution: "@example/big-font@workspace:examples/big-font" dependencies: "@thi.ng/hiccup-html": "workspace:^" + "@thi.ng/paths": "workspace:^" "@thi.ng/rdom": "workspace:^" "@thi.ng/rdom-components": "workspace:^" "@thi.ng/rstream": "workspace:^"