fix: revise the heading's margins and line height

[vihuna]

• Use em, relative to heading title font units, for section headings (top and bottom, for h2-h6)
• Use <number> units to specify the line height of section headings (for h2-h6)
• Make null the top margin for paragraphs after a section heading (so the bottom margin size of the heading is always used, relative to its font size)
• Make null the bottom margin for heading hn with a next-sibling hn+1, n= 2,..6 (to avoid unpredictable margin collapses)
• Use a linear application to compute the margin size for next-sibling headings: m(s) = alpha * (s - (1 - epsilon) * h6).
• Explicitly indicate the margin-top for abstract heading, to keep the same dimensions, because it uses a custom font size.
• Add the following (auto-descriptive) variables:
  • --h2-font-size
  • --h3-font-size
  • --h4-font-size
  • --h5-font-size
  • --h6-font-size
  • --h2-line-height
  • --h3-h6-line-height
  • --h2-margin-top (em units)
  • --h3-h6-margin-top (em units)
  • --h2-margin-bottom (em units)
  • --h3-h6-margin-bottom (em units)
• Add the following variables to control next-sibling heading margins (m(s) parameters):
  • --h3-h6-sibling-alpha
  • --h3-h6-sibling-epsilon

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
latex-css	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 24, 2025 7:07pm

[vihuna]

This closes #67

I really didn't know the best way to deal with this issue (in a simple way).

A brief summary about how I see the situation:

• The margin-top for the level 6 header breaks the continuity: h2-h5 headers have top margins around 1.7em (in em units, respect the header font size, they go from 1.666 to 1.8, as I remember), for h6 is 2.5em.
• The easy way would be to set h6 margin top to 1.8rem (or something around 1.7em relative to section title font size).
• It's a good opportunity to discuss other details and some differences from LaTeX documents, with respect to the sections margins.
• In LaTeX, section margin lengths are defined in relative units (ex), with respect to the font size of the section title (specifically, they are defined with a LaTeX "glue", where I'm focusing on the fixed part).
• Indeed, the margin size for h3-h6 is constant (in ex units from section title font size) in LaTeX:
  https://github.com/latex3/latex2e/blob/develop/base/classes.dtx#L2628-L2678
• It makes here more sense to me to use em values for section titles (possibly subjective, and also <number> units for line height). And this way also, if someone wants to add some custom CSS code to modify the size of the section titles, they won't have to worry too much about the line height or the margins (or the margins for sibling headings).
• The same about bottom margins.
• A slight visual "irregularity" can be appreciated using the current values for "next-sibling" headings (see images, its something that involves line-height and the constant size of margins ¿?), we can try to improve the "smoothness" in the decreasing sequence of these heading margins.

Current sibling headings



New sibling headings

My proposal:

• Use relative to section title em font size values for top margins (like in LaTeX).
• Set null the bottom margin for section headings with a next-sibling heading (to avoid calculations with collapsing margins).
• Use relative to section title em font size values, for the bottom margin of section headings.
• Set null the top margin for paragraphs after a heading, so the bottom margin for headings is always used (before this changes, margin-top for paragraphs, 1em, always wins over margin-bottom for sections headings, 0.8rem)
• Use <number> units for line-height values in section titles.
• Try to keep similar dimensions (appearance) like the current LaTeX.css ones.
• Define "two sizes" for margin-top and line-height: one for h2 and other for h3-h6, like in LaTeX (although we are going to use nearly the same values for both of them to keep the same appearance).
• Use a linear-decreasing sequence for next-sibling headings (linear function with respect to the font size).

Formula for sibling margins rationale

We want a linear application with respect to the heading font size:

$$m(s) = \alpha s + \beta,$$

where the variable $s$ is the font size for the heading (for example, in rem units).

And if we take $\beta = -\alpha h_6$ then $m(h_6) = 0$ always ($h_6$ is a constant here, the font size of the heading h6)
If you want $m(h_6)$ so "close to to zero" as you wish, you could take

$$m(s) = \alpha s - \alpha(1-\epsilon)h_6,$$

where $\epsilon$ is a parameter "close" to cero.

Let's see also that we can use the same formula for all the headings, if we change the variable $s$ to em units. So, for any heading, let's suppose with a font size of $r$ rems, therefore $1\ em = r\ rem$, so

$$m(1\ em) = m(r\ rem) = \alpha r\ rem - \alpha(1-\epsilon)h_6\ rem = \alpha\ em - \alpha(1-\epsilon)h_6\ rem,$$

which does not depends on $r$. This is going to be the expression finally used for the margin size of sibling headings.

About the selected values:

• Top margin h2: 1.75em as a rounding value for 1.765em
• Top margins size for h3-h6: 1.7em is an average value for the current range [1.667em, 1.8em] h3 to h6 margin top.
• Next-sibling headings (this is the tricky part):
  • next-sibling h6 has at this moment some special treatment (a negative value, to amend h5 bottom margin, I suppose)
  • I don't want to take care about margin collapse calculations => null bottom margins for h_n with next-sibling h_n+1.
  • Instead of using constant em values, use a more general method to compute the margin (because the h6 singularity): a linear function with respect to the heading font size m(s) = alpha * (s - (1 - epsilon) * h6), where alpha and epsilon are two parameters (set by the author), and h6 represents the font size for h6 heading. I have chosen epsilon := 0.15. If we clear alpha for m(h3=1.4) = 0.8rem we get alpha = 1.455; and m(h4=1.2) = 0.8rem results in alpha = 2.286. So I have chosen alpha := 1.8 as an average value.
• Bottom margin size: chosen 0.6em, as an average value for the current range [0.470em, 0.8em] of h2-h6 bottom margins.
• Line Height size: around 1.3-1.6 (<number> units) it's considered a safe typographical value (I'm always supposing that the user could add some custom CSS to change the font size of the headings; at this moment, for example, the line height for h2 is ~1.18, for h3 ~1.16, a bit small size, I think).
• Top margin for abstract heading: because the heading for the abstract uses a custom font size for h2, it's necessary to specify now the margin-top to keep the same dimensions, because the change to em units; the same 3rem units has been used for the moment.

This is the general idea, I'm open to any suggestion (including going back to the easy way method, adjust the values used, simplify the "tricky part" ...).

[vihuna]

Vercel deployment has failed!! 😱

[vincentdoerig]

Thanks for cleaning up the typography and making it very methodological. I like the usage of em and the scaling of the margin for next-sibiling headings. It looks better now, especially with long titles! Just two questions/clarifications:

• Is there a reason why you stored the margin CSS variables as <number> and then multiplied by 1em to get the value as em? Is it not better to store it as em value directly?
• How did you chose the value for alpha and epsilon. Are they set such that the end result is most similar to the current output or did you try to match LaTeX’s margins?

Apologies about the failed Vercel deployments (wouldn’t build anymore due to old Node version). I have fixed it and it shouldn’t happen anymore.

[vihuna]

Thanks for cleaning up the typography and making it very methodological

Well, the main goal of this PR (using a typo in a margin size as a pretext) was only to try to unify a bit the margin styles for LaTeX.css and LaTeX; considering also the possibility of a heading font size customization by the author. I hope it brings some improvement.

Is there a reason why you stored the margin CSS variables as and then multiplied by 1em to get the value as em? Is it not better to store it as em value directly?

Sorry, I forgot that I didn't need it anymore. I was testing other calculations, and I had problems with the units in that moment, so I thought that not using units would give me more freedom for my operations. But, I finally opted for the simplest of the methods, and there was no problem with the units from the variables used in "next-sibling" headings (I was testing a more complex formulas to calculate automatically the alpha from the h2 or h3 font size, for example; similar methods for regular headings, ... ).

I have already committed the fix; the original commit message should also be modified to reflect these changes. Also, I don't know if I have chosen the best names for the variables, feel free to modify them if you consider it appropriate.

How did you chose the value for alpha and epsilon. Are they set such that the end result is most similar to the current output or did you try to match LaTeX’s margins?

I tried to follow LaTeX.css original margin sizes.

epsilon has been taken "with the naked eye" (0.1 gave finally a too small margin for h6, 0.2 to large, compared to LaTeX.css default styles).
alpha value depends on the LaTeX.css margin-value/font-size relation that you want to mimic: h3, h4 ..., all of them with original value margin-top: 0.8rem.

Considering also that h6 = 1rem, we clear $\alpha$ in the equation $m(s)=\alpha s - \alpha(1-\epsilon)h_6$:

$$\alpha = \dfrac{m(s)}{s - (1 - \epsilon) h_6} = \dfrac{0.8}{s-0.85}$$

I thought h3 and h4 margins were the most representative for next-sibling headings, those you should pay attention to approximate the original LaTeX.css sizes.

• So for $s = 1.4$ (the font size for h3 in LaTeX.css), $\alpha = \frac{0.8}{1.4 - 0.85} \approx 1.45$,
• And for $s = 1.2$ (the font size for h4 in LaTeX.css), $\alpha = \frac{0.8}{1.2 - 0.85} \approx 2.29$,

if I haven't made any mistake. As an average value I finally chose $1.8 \in [1.45, 2.29]$.

Some final comments: for next-sibling headings, again, I wanted to try to follow the LaTeX style ("one constant size" in em units for h3-h6); the "linear equation for the margin" was my solution to achieve this (a real constant em value would make h3 margin too small or h6 too large). If using a equation for the margins is a "too baroque solution", we can use fixed em values for each next-sibling margin, following a sequence from any continuous monotone function, and you still should get a smooth sequence.

I was playing a little at the time with the function $f(x) = ax^{\frac{1}{4}}$, for $x = 1,\ 2/3,\ 1/3,\ 0$, corresponding to h3, h4, h5, h6 respectively (so values decrease very little at the beginning, starting from 1, and decrease sharply when you get close to 0). With $a=0.7$ you can add this CSS:

h2 + h3 {
  margin-top: 0.7em;
}
h3 + h4 {
  margin-top: 0.63em;
}
h4 + h5 {
  margin-top: 0.53em;
}
h5 + h6 {
  margin-top: 0;
}

But for me, the linear function method is better founded, brings a quasi-constant em margin values (at least the first part of the equation is constant) and saves lines of code.