Communities

Writing
Writing
Codidact Meta
Codidact Meta
The Great Outdoors
The Great Outdoors
Photography & Video
Photography & Video
Scientific Speculation
Scientific Speculation
Cooking
Cooking
Electrical Engineering
Electrical Engineering
Judaism
Judaism
Languages & Linguistics
Languages & Linguistics
Software Development
Software Development
Mathematics
Mathematics
Christianity
Christianity
Code Golf
Code Golf
Music
Music
Physics
Physics
Linux Systems
Linux Systems
Power Users
Power Users
Tabletop RPGs
Tabletop RPGs
tag:snake search within a tag
answers:0 unanswered questions
user:xxxx search by author id
score:0.5 posts with 0.5+ score
"snake oil" exact phrase
votes:4 posts with 4+ votes
created:<1w created < 1 week ago
post_type:xxxx type of post
Search help
Notifications
Mark all as read See all your notifications »
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

tall posts in post list

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?
You might want to add some details to your flag.
Why should this post be closed?

0 comment threads

4 answers

+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?
You might want to add some details to your flag.

0 comment threads

+1
−0

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.

Current Electrical Engineering look

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

Max height 5rem and fading out the bottom 50%

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

Max height 5rem and fading out after 2.2rem

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

Max height 4rem and fading out after 2.2rem

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

Max height 4rem and fading out after 2.2rem


(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?
You might want to add some details to your flag.

0 comment threads

+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?
You might want to add some details to your flag.

1 comment thread

I don't think it's technically possible to block display math on parts of a page (but I might be wron... (2 comments)
+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?
You might want to add some details to your flag.

0 comment threads

Sign up to answer this question »