Superscript and Subscript Break Leading (Line Spacing)

Bugs
1

Issue Summary

  • Superscript and subscript characters mess up the leading[1] (line spacing) in the Source theme (and maybe others).

Steps to Reproduce

  1. Make a page or post with superscript or subscript in it via Markdown or HTML

Setup information

Ghost Version
5.122.0

How did you install Ghost?
Hosted on Magic Pages

Supersript_char_line_leading
Supersript_char_line_leading720×162 28.9 KB

Example (in HTML-based toggle boxes, but the leading distortion appears everywhere):

Many HTML forms and websites mess this up, but I thought Ghost was better than that because the editing windows show the line spacing without distortion. LaTeX, somewhat famously, gets this right.[2]

  1. By the way, I found out just a few months ago it is line leading as in pencil lead. Printers used lead. Leading was the was the stick of metal between rows of characters. I had been saying it as leading as in lead guitar or the parade marshal is leading the march. ↩︎

  2. LaTeX is pretty much the gold standard for desktop publishing in all languages and scripts except for vertical scripts. (CJK, which is horizontal LTR or vertical RTL, with characters that resist turning, are somehow fine, yet the vertical-only and LTR Mongolian script is terrible. At least modern Mongolian speakers mostly use Cyrillic for Mongolian or write in Mandarin Chinese, so they aren’t horribly inconvenienced, and almost no one is in a rush to fix this part of LaTeX.) ↩︎

2

You’ll need to set the line-height of the <sup> element to 1. That should fix it.

3

Would this be the right code injection?

<style>

    sup {
        line-height: 1;
    }

</style>

I found a Stack Overflow that suggested a line height of zero:
https://stackoverflow.com/questions/1530685/how-can-i-keep-consistent-line-height-with-superscript-elements

4

The line height of 1 worked. Thank you.

Not sure why that StackOverflow that I linked in my earlier reply said to use zero. :man_shrugging:

For anyone else who comes across this, the necessary CSS is:

<style>

    sup {
        line-height: 1;
    }

    sub {
        line-height: 1;
    }

</style>

The HTML tags would be <sup>...</sup> for superscript and <sub>...</sub> for subscript.

Thank you!

The issue on GitHub (to make this the default?) is here: