### Communities

tag:snake search within a tag
user:xxxx search by author id
score:0.5 posts with 0.5+ score
"snake oil" exact phrase
created:<1w created < 1 week ago
post_type:xxxx type of post
Meta

# Posts with math are very, very tall in the feed

+4
−0

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.

Why does this post require moderator attention?
Why should this post be closed?

+2
−0

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...

Why does this post require moderator attention?

+1
−0

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;
max-height: 5rem;
}


## 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;
max-height: 5rem;
}


## 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;
max-height: 4rem;
}


## 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;
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.)

Why does this post require moderator attention?

+1
−0

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).

Why does this post require moderator attention?

+0
−2

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.

Why does this post require moderator attention?