lower case letters not all visible

[adam-jones-net]

Lower case letters that fall below the others such as g or j appear slightly cropped and out of position.

[conartist6]

I'm looking into this. It's a kind of nasty bug as I see it now. For one thing you can use any font with the display. Also the fix should only apply to mixed case boards. And there's a technical issue with getting it the way I really want it.

The hack fix is easy enough though: pad the top and bottom of the segments until the display is tall enough to display the whole letter. Try fiddling with this CSS:

#my-board .splitflap .top li {
    padding: 0.8em 0 0 0;
}

#my-board .splitflap .bottom li {
    padding: 0 0 0.8em 0;
}

But in the above the top segments don't need to be any taller, so the best fix would involve moving the split between the top and bottom down a bit on a normal character.

Unfortunately, I'm not immediately sure of how to do this. For every displayed glyph, there are actually two characters in the HTML, the top and the bottom. CSS doesn't really include a built-in way to display just the bottom of a character, and the hack I've used to do it involves setting line-height 0 to get only the bottom half of the bottom character. line-height doesn't take negative values though so I'm not able to trim any more off the top of the bottom character with my current method. : (

I also don't want to resort to having the top letters obscure the bottom by way of z-index, because that would make the area between flaps white instead of transparent, ruining the board's ability to sit on non-solid-color backgrounds.

I'll keep tinkering with the styles to see if I can find another trick, but the only other thing I can think of is editing an actual font to push its characters up from the baseline and then including it with @font-face.

[conartist6]

I tempted to just make a utility that takes in a font, strips out glyphs that won't be needed, and recenters characters to ensure they'll display cleanly on the board.