ceargaest

[tʃæɑ̯rˠɣæːst]

linguist & software engineer in Lenapehoking; jewish ancom trans woman.

since twitter's burning gonna try bringing my posts about language stuff and losing my shit over star wars and such here - hi!


username etymology
bosworthtoller.com/5952

lunasorcery
@lunasorcery

Here's a little Inside Baseball on @nes-pictionary for y'all.

The hints use letter-spacing to add a visual gap between the dashes (okay yes technically they're underscores, I'm calling them dashes here, shush). The hint numbers are added using the <ruby> element.

Here's how that looks under the hood:

<ruby style="ruby-position:under;">
  <span style="letter-spacing:0.2em;">_____</span><rt>5</rt>
</ruby>

I've hidden some of the CSS properties like font-size from the code, so I can highlight the important bits. Did you know, Safari doesn't support ruby-position:under and needs you to use -webkit-ruby-position:after instead?

Anyway, here's how that gets rendered:

_____5

The <span> is highlighted in red and the <rt> is highlighted in blue.


You'll notice the 5 is awkwardly offset from the dashes. That's because the dashes aren't actually centered within the <ruby> element. The letter-spacing property adds a little extra space after each character, but there isn't a matching leading space at the start, so it's imbalanced within the container. We can fix this by adding some padding-left to the dashes to balance it out.

<ruby style="ruby-position:under;">
  <span style="letter-spacing:0.2em;padding-left:0.2em;">_____</span><rt>5</rt>
</ruby>

_____5

There we go, ain't that a beauty? This is how @nes-pictionary's hints are rendered!


Oh, but then today I had some bright idea to refactor the bot a little, and in the process I made a very subtle change to the template. Can you spot it?

<ruby style="ruby-position:under;">
  <span style="letter-spacing:0.2em;padding-left:0.2em;">_____</span>
  <rt>5</rt>
</ruby>

That's right, I fell victim to one of the classic blunders — assuming that putting an HTML element on its own line wouldn't break things. Ah, hubris. Putting the <rt> on a separate line from the <span> is apparently enough to introduce some whitespace that breaks the centering again in firefox at least (apparently it still renders fine in webkit-based browsers which is uh, most of them).

_____ 5

I hate computers.


You must log in to comment.

in reply to @lunasorcery's post: