26

In this answer I happened to use some inline code markup inside a pseudo-footnote1 wrapped in <sup>...</sup> tags and noticed that, while the plain text inside the footnote is typeset in a smaller font as intended, the code has the same font size as in normal text.

Live example:

In normal text inline code looks OK, but in a superscript the same code looks huge.

Related: Code wrapped inside headers is too small ()


1) I do realize that this is not what those tags are really meant for, but it's (IMO) the best work-around we currently have for the lack of proper footnote markup. And in any case, regardless of what they're (mis)used for, we should be correctly scaling the font size of code inside subscripts and superscripts, just as we should be doing in any other context.

2
  • 3
    Hmm. It really doesn't look that bad to me (Safari on OS X). No worse than inline code formatting always looks... Oct 29, 2017 at 4:15
  • Doesn't look that bad to me either. (FF on OS X). It is just that the font size of the Superscript is the same as that of the code inside of the superscript, where you expect it to be smaller due to the fact that it is smaller than regular text when it is code formatted
    – Luuklag
    Oct 31, 2017 at 12:26

2 Answers 2

9

This has been fixed.

Code inside <sub> and <sup> tags are now set at 90%, which makes them ~11px in the first level and scale gracefully with each level.

Recursive code Recursive code Recursive code Recursive code Recursive code

Recursive code Recursive code Recursive code Recursive code Recursive code

0
21

The cause of the problem appears to be this rule in the SO style sheet:

.post-text code, .wmd-preview code {
    font-size: 13px;
}

Replacing it with:

.post-text code, .wmd-preview code {
    font-size: 86.67%;  /* 15px -> 13px */
}
.post-text pre code, .wmd-preview pre code {
    font-size: 100%;  /* <pre> tags already have their font size scaled down */
}

should fix this issue without affecting the font size of code markup in normal text. As a convenient side effect, this should also let us get rid of the explicit CSS rules that we currently have for inline code in headings.

You must log in to answer this question.

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