From d53b2b641a4239a243b09d6a6edd6e5f128d4972 Mon Sep 17 00:00:00 2001 From: Michael Orlitzky Date: Tue, 24 Oct 2023 11:53:23 -0400 Subject: [PATCH 01/16] index.html.in: use the right font for the security code --- index.html.in | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html.in b/index.html.in index 633c0e4..9393c1d 100644 --- a/index.html.in +++ b/index.html.in @@ -71,7 +71,7 @@ url("data:font/woff2;base64,@CBPREGULAR@") format("woff2") } - #servicename, #tickettime, #ticketdate { + #servicename, #tickettime, #ticketdate, #codetext { font-family: "CharmBypass Regular"; } -- 2.44.2 From 843eb1acff1589e1a3861f3bcb0dc5b41c95dc09 Mon Sep 17 00:00:00 2001 From: Michael Orlitzky Date: Tue, 24 Oct 2023 11:56:50 -0400 Subject: [PATCH 02/16] index.html.in: fall back to sans-serif if webfonts don't work The serifs are OBVIOUSLY wrong. --- index.html.in | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.html.in b/index.html.in index 9393c1d..f073f69 100644 --- a/index.html.in +++ b/index.html.in @@ -72,7 +72,7 @@ } #servicename, #tickettime, #ticketdate, #codetext { - font-family: "CharmBypass Regular"; + font-family: "CharmBypass Regular", sans-serif; } @font-face { @@ -82,7 +82,7 @@ } #serviceletter { - font-family: "CharmBypass Bold"; + font-family: "CharmBypass Bold", sans-serif; } /************************/ -- 2.44.2 From c500122815837bc05e358611c022b7547424ef24 Mon Sep 17 00:00:00 2001 From: Michael Orlitzky Date: Tue, 24 Oct 2023 12:02:44 -0400 Subject: [PATCH 03/16] doc/TODO: new list to keep track of bugs --- doc/TODO | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 doc/TODO diff --git a/doc/TODO b/doc/TODO new file mode 100644 index 0000000..c105449 --- /dev/null +++ b/doc/TODO @@ -0,0 +1,7 @@ +1. The security code isn't centering when the page loads. If you use a + code like "WW" you can see that it's off by a little bit, but that it + corrects itself when you resize the window. + +2. There's a display glitch (in Firefox only?) as the back of the + train passes the front of the tram. The tram moves into the + foreground for a moment and that definitely should not happen. -- 2.44.2 From e64b5cf78b78e1c77fe8fb7f22bb975a62a85c1f Mon Sep 17 00:00:00 2001 From: Michael Orlitzky Date: Tue, 24 Oct 2023 22:16:33 -0400 Subject: [PATCH 04/16] index.html.in: move a comment up two lines --- index.html.in | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html.in b/index.html.in index f073f69..209ddad 100644 --- a/index.html.in +++ b/index.html.in @@ -291,9 +291,9 @@ function center_code() { + /* Center the security code inside its red box */ const ct = document.getElementById("codetext"); - /* Now center the security code inside its red box */ /* First, find the center of the red box */ const r1 = document.getElementById("codebg").getBoundingClientRect(); const c1 = r1.left + (r1.width / 2); -- 2.44.2 From daa695e8bd114cd6a323cb4ae2499d26e9abb349 Mon Sep 17 00:00:00 2001 From: Michael Orlitzky Date: Tue, 24 Oct 2023 22:20:54 -0400 Subject: [PATCH 05/16] index.html.in: fix a mis-indented javascript comment --- index.html.in | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html.in b/index.html.in index 209ddad..61578bd 100644 --- a/index.html.in +++ b/index.html.in @@ -383,7 +383,7 @@ /* Set the security code text when the page has loaded */ window.addEventListener("load", set_code); - /* Center the security code text when the page has loaded; + /* Center the security code text when the page has loaded; in particular, after we set it */ window.addEventListener("load", center_code); -- 2.44.2 From 27aa29e50a67820fa181278288001c936b27d080 Mon Sep 17 00:00:00 2001 From: Michael Orlitzky Date: Wed, 25 Oct 2023 00:42:10 -0400 Subject: [PATCH 06/16] index.html.in: use name "hdelta" consistently for delta-x --- index.html.in | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/index.html.in b/index.html.in index 61578bd..866ac10 100644 --- a/index.html.in +++ b/index.html.in @@ -246,13 +246,13 @@ const vc = document.documentElement.clientWidth / 2; /* This is how much we need to translate the SVG */ - const delta = vc - c; + const hdelta = vc - c; /* But before we can set the absolute left-coordinate of the * SVG, we need to know where it is now. Note: without the * "px" this doesn't default to pixels like CSS does. */ const svg = document.querySelector("svg"); - svg.style.left = (svg.getBoundingClientRect().left + delta) + "px"; + svg.style.left = (svg.getBoundingClientRect().left + hdelta) + "px"; } @@ -303,11 +303,11 @@ const c2 = r2.left + (r2.width / 2); /* What do we add to c2 to make it equal to c1? */ - const code_delta = c1 - c2; + const hdelta = c1 - c2; /* Since this element has an "x" attribute it's easier for * us to shift that than it is to mess with the "left" style. */ - ct.setAttribute("x", parseFloat(ct.getAttribute("x")) + code_delta); + ct.setAttribute("x", parseFloat(ct.getAttribute("x")) + hdelta); } -- 2.44.2 From f37ecaec80b6433bf6fb58c6d0294ffeddde0cec Mon Sep 17 00:00:00 2001 From: Michael Orlitzky Date: Wed, 25 Oct 2023 16:54:46 -0400 Subject: [PATCH 07/16] svgclean.xsl: new XSL stylesheet to help clean up our inkscape mess There are a few more cleanup/minimization opportunities left in our SVG, even after it has been scoured. For example, inkscape wraps all of its text in redundant elements, even when the parent has the same style as the sole . We'd like to remove those, to simplify the code and save space. XSLT can do this. This new stylesheet can do this. We add it now, in preparation for yet another SVG processing phase. --- svgclean.xsl | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) create mode 100644 svgclean.xsl diff --git a/svgclean.xsl b/svgclean.xsl new file mode 100644 index 0000000..2a1c2d2 --- /dev/null +++ b/svgclean.xsl @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + -- 2.44.2 From c0a4a0e12a20a8969b345354b3f2930818afe36e Mon Sep 17 00:00:00 2001 From: Michael Orlitzky Date: Wed, 25 Oct 2023 17:00:26 -0400 Subject: [PATCH 08/16] configure.ac: check for the "xsltproc" program We'll need this to process our new svgclean.xsl stylesheet that cleans up the tableau. --- configure.ac | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/configure.ac b/configure.ac index 4905b74..18411ea 100644 --- a/configure.ac +++ b/configure.ac @@ -23,4 +23,10 @@ AC_PATH_PROG( [AC_MSG_ERROR([scour program not found])] ) +AC_PATH_PROG( + [XSLTPROC], + [xsltproc], + [AC_MSG_ERROR([xsltproc program not found])] +) + AC_OUTPUT -- 2.44.2 From 69ce276123475fa495aba51fc202b4e41c4a82a5 Mon Sep 17 00:00:00 2001 From: Michael Orlitzky Date: Wed, 25 Oct 2023 17:02:32 -0400 Subject: [PATCH 09/16] doc/README: document the new "xsltproc" build requirement --- doc/README | 1 + 1 file changed, 1 insertion(+) diff --git a/doc/README b/doc/README index 6c66124..2dcf403 100644 --- a/doc/README +++ b/doc/README @@ -3,6 +3,7 @@ Build requirements: 1. The "base64" utility from GNU coreutils. 2. The "scour" SVG optimizer. 3. The "fontforge" program. + 4. The "xsltproc" program from libxslt. SVG Tricks: -- 2.44.2 From e8976d987f67e4c1a3b57b823e11327cb9decf23 Mon Sep 17 00:00:00 2001 From: Michael Orlitzky Date: Wed, 25 Oct 2023 17:15:49 -0400 Subject: [PATCH 10/16] configure.ac: fix all AC_PATH_PROG checks The third argument to AC_PATH_PROG is a value to set, not an action to perform, when the test fails. So all of the existing checks were wrong and failed to fail when the program is missing. I do this for a living. --- configure.ac | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/configure.ac b/configure.ac index 18411ea..8f0f596 100644 --- a/configure.ac +++ b/configure.ac @@ -5,27 +5,27 @@ AM_INIT_AUTOMAKE([-Wall foreign no-dist-gzip dist-xz tar-ustar]) AC_CONFIG_FILES([Makefile]) AC_CONFIG_SRCDIR([tableau.svg]) -AC_PATH_PROG( - [BASE64], - [base64], +AC_PATH_PROG([BASE64], [base64]) +AS_IF( + [test -z "${BASE64}"], [AC_MSG_ERROR([base64 program not found])] ) -AC_PATH_PROG( - [FONTFORGE], - [fontforge], +AC_PATH_PROG([FONTFORGE], [fontforge]) +AS_IF( + [test -z "${FONTFORGE}"], [AC_MSG_ERROR([fontforge program not found])] ) -AC_PATH_PROG( - [SCOUR], - [scour], +AC_PATH_PROG([SCOUR], [scour]) +AS_IF( + [test -z "${SCOUR}"], [AC_MSG_ERROR([scour program not found])] ) -AC_PATH_PROG( - [XSLTPROC], - [xsltproc], +AC_PATH_PROG([XSLTPROC], [xsltproc]) +AS_IF( + [test -z "${XSLTPROC}"], [AC_MSG_ERROR([xsltproc program not found])] ) -- 2.44.2 From 5b2de5a4649401bf46a23a4f2a3ed3e8d91647bd Mon Sep 17 00:00:00 2001 From: Michael Orlitzky Date: Wed, 25 Oct 2023 18:14:15 -0400 Subject: [PATCH 11/16] sfd2woff: rename to sfd2woff.ff The ".ff" extension lets FontForge guess which scripting language (the legacy one) the script uses. Without it, FontForge with python support will guess wrong and throw errors. --- sfd2woff => sfd2woff.ff | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) rename sfd2woff => sfd2woff.ff (94%) diff --git a/sfd2woff b/sfd2woff.ff similarity index 94% rename from sfd2woff rename to sfd2woff.ff index 2b2f497..a3585c6 100755 --- a/sfd2woff +++ b/sfd2woff.ff @@ -28,5 +28,5 @@ # >>> 0x4 + 0x8 + 0x8000 + 0x40000 + 0x80000 # 819212 # -Open($1) -Generate($1:r + ".woff2","",819212) +Open($1); +Generate($1:r + ".woff2","",819212); -- 2.44.2 From 3c50ed83f65b3ad82d60a35970b22cd5a032a900 Mon Sep 17 00:00:00 2001 From: Michael Orlitzky Date: Wed, 25 Oct 2023 18:15:48 -0400 Subject: [PATCH 12/16] Makefile.am: update sfd2woff -> sfd2woff.ff --- Makefile.am | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/Makefile.am b/Makefile.am index bc3c9ab..d0e3f57 100644 --- a/Makefile.am +++ b/Makefile.am @@ -33,9 +33,13 @@ tableau.min.svg: tableau.svg --error-on-flowtext \ $< > $@ +# Optimize our SVG **AGAIN**, ha ha! +tableau.min.min.svg: tableau.min.svg + @XSLTPROC@ svgclean.xsl $< > $@ + # Use FontForge to convert the sfd source files to woff2. .sfd.woff2: - @FONTFORGE@ -script sfd2woff $< + @FONTFORGE@ -script sfd2woff.ff $< # Base64-encode a woff2 (web open font format 2.0) file. We use this # to embed fonts directly into the CSS that requires them. @@ -46,10 +50,10 @@ tableau.min.svg: tableau.svg # line!) files into @PLACEHOLDERS@ within index.html.in. If you put # tildes in tableau.svg this will probably break, so please don't do # that. -index.html: index.html.in tableau.min.svg CharmBypass-Regular.base64 CharmBypass-Bold.base64 +index.html: index.html.in tableau.min.min.svg CharmBypass-Regular.base64 CharmBypass-Bold.base64 sed -e "s~@CBPREGULAR@~$$(cat CharmBypass-Regular.base64)~" \ -e "s~@CBPBOLD@~$$(cat CharmBypass-Bold.base64)~" \ - -e "s~@SVGDATA@~$$(cat tableau.min.svg)~" \ + -e "s~@SVGDATA@~$$(cat tableau.min.min.svg)~" \ $< > $@ # If you really want to, we support installing index.html @@ -61,4 +65,5 @@ dist_pkgdata_DATA = index.html CLEANFILES = $(dist_pkgdata_DATA) \ CharmBypass-Regular.base64 \ CharmBypass-Bold.base64 \ - tableau.min.svg + tableau.min.svg \ + tableau.min.min.svg -- 2.44.2 From 93cbaf75befb03c2957d19f1eb372aff43f6c646 Mon Sep 17 00:00:00 2001 From: Michael Orlitzky Date: Wed, 25 Oct 2023 18:25:04 -0400 Subject: [PATCH 13/16] Makefile.am: add another SVG pre-optimization step using svgclean.xsl --- Makefile.am | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/Makefile.am b/Makefile.am index d0e3f57..e59410e 100644 --- a/Makefile.am +++ b/Makefile.am @@ -20,9 +20,14 @@ PRECIOUS_IDS = \ ticketdate \ tickettime -# Optimize our SVG, and remove its XML prologue so that it can be -# included directly into the HTML document. -tableau.min.svg: tableau.svg +# Optimize our SVG once using XSL, to catch a few things +# that "scour" misses. +tableau.min.svg: tableau.svg svgclean.xsl + @XSLTPROC@ svgclean.xsl $< > $@ + +# Optimize our SVG again, and remove its XML prologue so that it can +# be included directly into the HTML document. +tableau.min.min.svg: tableau.min.svg @SCOUR@ --protect-ids-list=$$(echo $(PRECIOUS_IDS) | tr ' ' ',') \ --enable-id-stripping \ --enable-comment-stripping \ @@ -33,10 +38,6 @@ tableau.min.svg: tableau.svg --error-on-flowtext \ $< > $@ -# Optimize our SVG **AGAIN**, ha ha! -tableau.min.min.svg: tableau.min.svg - @XSLTPROC@ svgclean.xsl $< > $@ - # Use FontForge to convert the sfd source files to woff2. .sfd.woff2: @FONTFORGE@ -script sfd2woff.ff $< -- 2.44.2 From 7d70efc879cd53f9214c90f52182def158cb65aa Mon Sep 17 00:00:00 2001 From: Michael Orlitzky Date: Wed, 25 Oct 2023 18:25:35 -0400 Subject: [PATCH 14/16] .gitignore: ignore the new optimized output file tableau.min.min.svg --- .gitignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.gitignore b/.gitignore index 45ba62f..e863a2a 100644 --- a/.gitignore +++ b/.gitignore @@ -13,6 +13,7 @@ config.status # Generated by make tableau.min.svg +tableau.min.min.svg index.html CharmBypass-Regular.base64 CharmBypass-Bold.base64 -- 2.44.2 From 7bad87ac675730c66edee6d541a37cc22e8dde7d Mon Sep 17 00:00:00 2001 From: Michael Orlitzky Date: Wed, 25 Oct 2023 18:56:56 -0400 Subject: [PATCH 15/16] doc/TODO: eliminate "transform" attributes --- doc/TODO | 3 +++ 1 file changed, 3 insertions(+) diff --git a/doc/TODO b/doc/TODO index c105449..b6a85b1 100644 --- a/doc/TODO +++ b/doc/TODO @@ -1,3 +1,6 @@ +0. There are still some "transform" attributes being applied in the + SVG. We should un/regroup as necessary to eliminate them. + 1. The security code isn't centering when the page loads. If you use a code like "WW" you can see that it's off by a little bit, but that it corrects itself when you resize the window. -- 2.44.2 From 5eff42ab76b3223de1485b08008bb7b6efe72310 Mon Sep 17 00:00:00 2001 From: Michael Orlitzky Date: Wed, 25 Oct 2023 18:57:38 -0400 Subject: [PATCH 16/16] doc/TODO: mention that code centering is weird in multiple browsers --- doc/TODO | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/doc/TODO b/doc/TODO index b6a85b1..a172bc8 100644 --- a/doc/TODO +++ b/doc/TODO @@ -2,8 +2,9 @@ SVG. We should un/regroup as necessary to eliminate them. 1. The security code isn't centering when the page loads. If you use a - code like "WW" you can see that it's off by a little bit, but that it - corrects itself when you resize the window. + code like "WW" you can see that it's off by a little bit, but that + it corrects itself when you resize the window. This happens in + multiple browsers, which is actually reassuring I guess. 2. There's a display glitch (in Firefox only?) as the back of the train passes the front of the tram. The tram moves into the -- 2.44.2