5

Glyphs for Keys are not vertically aligned with text in headings - Actually they are

Compare this to keys in normal text. The keys in headings look bad. Even worse than bad k ern in g.

As Emil Jeřábek points out that is because they are aligned vertically. But they have a difference font size, which makes the keys appear out of place.

Can we get this fixed?

6
  • As far as I can see, the keys look bad because they are, in fact, vertically aligned with text (the baselines are aligned, to be precise). They need to be raised to compensate for their much smaller size. – Emil Jeřábek Jun 7 at 11:27
  • @EmilJeřábek Hmmm... to me it looks like the bottom of the descenders, not the baselines, are aligned. – nobody Jun 7 at 11:44
  • <kbd>s have a fixed font-size of 11px (defined twice in two separate style sheets, for whatever reason). Removing these rules so that the font size gets inherited from the parent heading would look like this. Notice the extra padding of the rest of the heading on top. – Sebastian Simon Jun 7 at 11:53
  • 2
    @nobody No, the baselines align, descenders do not: i.stack.imgur.com/sDqgL.png . (Is it even possible to affect the position of descenders in CSS?) Anyway, the point is that the keys need to be raised rather than aligned to look visually correct. e.g., here’s Rocket Nikita’s solution: i.stack.imgur.com/4xaFe.png ; as you can see, both the baseline and the descenders are much higher in the keys than in the surrounding text. – Emil Jeřábek Jun 7 at 12:50
  • @EmilJeřábek Ha , you're absolutely right. I was going off what it looked like at quick glance. Thanks for doing the analysis. Let me change the formulation of the post... – nobody Jun 7 at 15:30
  • 1
3

One possible fix is to wrap it into <sup><sub> </sub></sup>.

2
  • 1
    Nice. I wonder how I didn't think of that. Minor nitpick: this is a hack, not a fix. – nobody Jun 7 at 9:18
  • I know, but I like to use those to fix everything. – Rocket Nikita Jun 7 at 9:51

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .