Use "spacer" tiles to get correct inter-word spacing for claimed words

Use "spacer" tiles to get correct inter-word spacing for claimed words

Previously, we had the code computing an expected gap between tiles,
(and setting it as the "column-gap" CSS attribute). But this proved
fragile. In practice, it's hard to predict exactly what a browser will
do, (particular with things like sub-pixel rendering, etc.), so it's
easy for a calculation like this to be off.

And we saw that in practice. Tiles in one row would be a pixel or two
off (hrozintonally) from tiles in the next row. Being so close, but
not quite exactly the same was distracting (especially for someone who
looks closely and pays attention to details like this).

What we do instead, in this commit, is place an invisible "spacer"
tile between each word. This way, the browser is doing the exact same
computation for the "spacer" tiles and the "real" tiles, so they will
match.

That much is simple. The real trick comes when one word ends precisely
at the right edge of the view and then the "spacer" tile wraps on to
the next row. This results in the first word in that row being offset
to the right by the spacer tile, but we don't want that.

To account for this, we use a resizeObserver to notice when any
resizing happens, and in that case we walk through the tiles and
notice whenever the "offsetTop" of a spacer tile is larger than the
"offsetTop" of the previous tile. This indicates that that spacer tile
got wrapped. And in this case we style that spacer to have zero width.

Phew! That's a lot of text to explain a fair amount of code, all just
to correct a rendering error where tiles were just off by about a
single pixel.