Posts with math are very, very tall in the feed
With the recent post previews, posts with previewed math end up becoming ridiculously tall
Screenshot
This obviously both looks ugly and means that fewer posts can fit on the page at once. There are two main ways that I think this could be resolved: forcing inline math display in previews or fixing the height and just cutting off the overflow. The latter being more consistent since it would be fixed height, though it might cut equations in half.
4 answers
You are accessing this answer with a direct link, so it's being shown above all other answers regardless of its score. You can return to the normal view.
I think that forcing inline display of a given MathJax segment in some contexts but not others is not a great solution because there are a few things which get treated differently in the two contexts, to the extent that I change some markup if I decide to change a block to an inline block.
However, one thing which I noticed in your screenshot is that the first title used block display (and needed a content correction), and someone else noticed the block display too because I found an edit pending approval.
I think it would be reasonable to force inline display on MathJax in titles in all contexts (including the question page).
1 comment thread
Oh my.
The new preview shows the first N characters of a post (default N=200). But a MathJax character can consume rather a lot of space.
I'm going to disable the previews on this community for now. Please decide as a community whether you want them, and if so we'll figure out a value that works. Normally I'd wait to talk with mods, or for a Meta discussion to resolve, but wow is that big...
0 comment threads
Fading out the content
This only addresses MathJax in the content preview, not MathJax in titles.
If it is decided to go with a fixed maximum height for a question preview, here's a possible solution for the problem mentioned, that equations could be cut in half:
Have a region at the bottom of the fixed height that fades out the content. This makes it clear that the truncation of the question wording is deliberate. This would also avoid the other problem with fixed maximum height of a preview, that a line in a paragraph could be cut in half.
A quick demo
As Mathematics currently has the preview disabled, I've tested this with the previews on the Electrical Engineering question page. The following images use some MathJax previews from further down the front page, but they aren't quite as tall as the examples here on Mathematics. Hopefully this gives the general idea though.
Below I've shown a few possible changes to the CSS, each followed by the rendered result. Each result is exactly 762 pixels tall, so you can easily see how much extra fits into the same height with the different approaches.
The current EE Codidact previews, for comparison
This shows how Electrical Engineering Codidact currently looks, with no CSS changes.
With a max height and fading out the bottom 50%
Any preview taller than the height restriction is truncated, but the bottom half fades out gradually so there are no formulae or sentences sharply cut in half.
CSS
.post-list--content {
font-size: 14px;
mask-image: linear-gradient(black 50%, transparent);
max-height: 5rem;
}
Rendered result
Fading from a specified height rather than a percentage
This looks similar for the tall previews, but avoids having any fading on previews that already fit on 2 lines of text and don't need height restriction.
CSS
.post-list--content {
font-size: 14px;
mask-image: linear-gradient(black 2.2rem, transparent);
max-height: 5rem;
}
Rendered result
Fading from a specified height with a lower max height
Similar to the previous example, but allows fitting more previews on screen at the expense of further restricting the height of each one.
CSS
.post-list--content {
font-size: 14px;
mask-image: linear-gradient(black 2.2rem, transparent);
max-height: 4rem;
}
Rendered result
Fading from a specified height with the lowest max height
This is probably too much height restriction - included for comparison.
CSS
.post-list--content {
font-size: 14px;
mask-image: linear-gradient(black 2.2rem, transparent);
max-height: 3rem;
}
Rendered result
(Note that the font-size: 14px; is the existing CSS for this class - the mask-image and max-height are the suggested new properties. I appreciate that it's not a great idea to mix px and rem - this was just a quick demo to gather opinions.)
0 comment threads
Apart from my other answer about titles, which is posted separately so that people can vote on it separately, I don't see a problem which needs fixing.
0 comment threads
0 comment threads