The old screenshot was generated by Select All and Copy As HTML in
Ubuntu's Terminal app (using a keyboard shortcut that had to be set up
first), and post-processed using code included in screenshot.svg, which
I'm now deleting.
The new screenshot is generated using Textual's built-in SVG export.
It displays nicer, with less artifacts (seams between cells).
It doesn't need such silly explanation of the nature of the screenshot,
and was also sizing to the width of the text, so I removed the wrapper
table which was imitating (standing in for) figure/figcaption elements.
The new screenshot also includes a window border, macOS-styled, which is
a little weird since it's a remake of MS Paint (Windows software)
developed entirely on Ubuntu (Linux distro).
This took a lot of trial and error to get this working.
- First I had to figure out how to copy the terminal output as HTML.
I had to configure keybindings for Select All and Copy As HTML in
the Ubuntu terminal.
- GitHub doesn't support line-height in markdown, so I came up with
using an SVG with <foreignObject> to contain the screenshot HTML.
- GitHub doesn't support inline SVG, so I had to use <img>, that's fine.
An external file is cleaner anyways.
- I spent a long time trying to fix the seams between rows of text.
`line-height: <font-size>` is not `line-height: 1`!
I think I tried `line-height: 1` first, but it wasn't working for some
reason so I tried a bajillion things, having mentally discounted it,
before circling back to it and trying it again and it actually worked.
- I spent a long time futzing about with SVG viewports and units.
- The text was staggered due to some of the Unicode characters, so I
developed a script to fix that up. I managed to achieve a nice
development cycle for this, but only near the end of developing it.
Most of the time while working on it I was copying and pasting
the updated code into the console after hitting up up enter to
re-run grapheme-splitter's JS.
The next commit will apply this script.
- All in all, getting this screenshot working took basically all day!
Compare that to my first day of progress on this project, having
never used the Textual framework before, and also having not used
Python for a while. In summary, coding is a land of contrasts.
- VS Code's markdown rendering isn't working with the ch/lh units.
