Welcome to Codidact Meta!
Codidact Meta is the meta-discussion site for the Codidact community network and the Codidact software. Whether you have bug reports or feature requests, support questions or rule discussions that touch the whole network – this is the site for you.
Main and subheadings are almost the same size, but not in the edit preview
When editing a post, headings with a single hash # show as significantly bigger than headings with a double hash ##. However, after saving, these two headings are much closer in size (to the point that my initial draft of this post mistakenly claimed that they are the same size).
For example:
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
renders as:
Heading 1
Heading 2
Heading 3
Heading 4
Notice that Heading 1 and Heading 2 are quite similar in size here while you are reading this, but if you edit this post and look at the preview while editing, Heading 1 will be significantly bigger.
What should the correct behaviour be?
Personally I prefer the sizes that show in the preview while editing. I can easily tell the difference between Heading 1 and Heading 2 even if they are not adjacent in the post. I find the sizes in the saved post to be difficult to distinguish even when adjacent (especially in real cases that, unlike this example, don't both start with the same word).
Whatever the decision, what I see as important is that the preview should have the same behaviour as the rendered question, to avoid frustration for the question author, or being overlooked leading to a question that does not look as expected when written.
If you reduce the font size of h2 to 23px, it looks like this: Heading with font size of heading 2 reduced to 23px …
1y ago
I think the problem is in the relative sizes. Here's what I see -- and the first two looked the same to me too until I …
1y ago
[status-norepro] If you use your browser's Inspect Element feature, you should be able to find the computed font size …
1y ago
3 answers
I think the problem is in the relative sizes. Here's what I see -- and the first two looked the same to me too until I took a really close look:
The first one is large, the second one is slightly smaller, barely, and then there's a huge size difference between the second and third. The fourth is then visibly smaller than the third. I think if we dropped the size of the second one a bit, we could produce a smoother "gradient".
In contrast to what shows on this page, here's how the editor renders it:
That's much better -- 2 is clearly smaller than 1. It doesn't look completely smooth to my eye, but the four sizes are clearly different -- good enough.
0 comment threads
[status-norepro]
If you use your browser's Inspect Element feature, you should be able to find the computed font sizes on each. On all browsers on my end I see h1 as 27.2px and h2 as 25px. Admittedly that's not much difference!
1 comment thread