How to prevent footnotes from changing line heights?

[glow12121]

Hi,

I feel that footnotes (endnotes, really) in my pages are changing the distance between lines of text, making them slightly bigger. How could I stop this?

[GiovanniSalmeri]

Try adding these lines to your CSS:

sup {
    font-size: 75%;
    vertical-align: text-top;
}

Obviously you can tweak font-size according to your likes.

[annaesvensson]

Tip: Add an example Markdown page, a screenshot and further information to your question.

[glow12121]

Thank you for the answers.

I must have done something wrong previous time, or the page did not refresh properly. Anyway, this time line heights look completely fine.

Before:

After:

I have a nerdish question left. In my text, I also have several denominations of cubic meters. I made examples in the dummy text above. How do I make footnote superscript and cubic meters superscript same in size? (Any why doesn't <sup> affect cubic meters?)

[glow12121]

P. S. The starting part of my CSS, before "Content" section. Yes, several values were modified by me.

/* Berlin extension, https://github.com/datenstrom/yellow-extensions/tree/master/source/berlin */

html, body, div, form, pre, span, tr, th, td, img {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
}
body {
    background-color: white;
    color: black;
    font-family: sans-serif;
    font-size: 1.1em;
    font-weight: 300;
    line-height: 1.5;
    text-decoration-skip-ink: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 600;
    line-height: 1.1;
    font-family: ;
}
h1 {
    font-size: 300%;
}
h2 {
    font-size: 250%;
}
h3 {
    font-size: 150%;
}
h4 {
    font-size: 120%;
}
hr {
    height: 1px;
    margin-top: 2.5em;
    margin-bottom: 2.5em;
    background: darkgray;
    border: 0;
}
strong {
    font-weight: bold;
}
code {
    font-size: ;
}
a {
    color: royalblue;
    text-decoration: underline;
}
a:hover {
    color: crimson;
    text-decoration: underline;
    transition: color 0.3s;
}

mark {
    background-color:khaki;
    padding: 0;
}

big {
    font-size: 120%;
}

sup {
    font-size: 75%;
    vertical-align: text-top;
}

video {
    max-width: 100%;
    min-width: 25%;
    height: auto;
    padding: 2em 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

[GiovanniSalmeri]

I have a nerdish question left. In my text, I also have several denominations of cubic meters. I made examples in the dummy text above. How do I make footnote superscript and cubic meters superscript same in size? (Any why doesn't ^{affect cubic meters?)}

From what I see in your screeshot, I suspect that the symbol of "cubic meter" is written with the Unicode character of "3 superscript", like this: m³. Obviously it can be written also like this: m<sup>3</sup> and the result is m³ (also here the difference is apparent). If you use the Unicode character, dimension and position of 3 have been decided by who designed the font. If you use the <sup> tag, you can tweak the style sheet to suit your taste. In general, I do not think that in good traditional typography the two types of superscript are composed the same way: their difference is a subtle but clear distinction between different meanings. But obviously the choice is yours! 😊

[glow12121]

My bad, here's the dummy text itself:

Thing. Grass light, morning fly. You'll multiply, all behold. Wherein signs fowl over 57.34 m³. Divided man deep multiply upon fish signs had that two great divided great a won't there together dominion dry abundantly great. Creeping behold two upon meat darkness grass[^1] likeness years tree third firmament rule moving, void deep Be make above good land us second given Given seasons very lesser created appear tree his 75.7 m³. Divide itself were meat make very dry tree green greater image subdue were can't whose together him day divided first second form their you'll open behold sixth were upon great moved meat green place[^2].

Okay, I got it. So if I want to make them look the same, I need to replace the Unicode character with a <sup>-bracketed character.