Inline math in markdown renders \hat inconsistently

[adiehl96]

Select Topic Area

Bug

Body

Browser: Mozilla Firefox 147.0.4 (aarch64)

1. This works: $`x=x`$
2. This works: $`\hat{x}=\hat{x}`$
3. This introduces linebreak: $`\hat{t}=\hat{t}`$

Here's how it renders:

1. This works: $x=x$
2. This works: $\hat{x}=\hat{x}$
3. This introduces linebreak: $\hat{t}=\hat{t}$

Screenshot (for posterity in case this issue gets fixed and the render above ^ starts looking correct):

[github-actions[bot]]

💬 Your Product Feedback Has Been Submitted 🎉

Thank you for taking the time to share your insights with us! Your feedback is invaluable as we build a better GitHub experience for all our users.

Here's what you can expect moving forward ⏩

• Your input will be carefully reviewed and cataloged by members of our product teams. 
  • Due to the high volume of submissions, we may not always be able to provide individual responses.
  • Rest assured, your feedback will help chart our course for product improvements.
• Other users may engage with your post, sharing their own perspectives or experiences. 
• GitHub staff may reach out for further clarification or insight. 
  • We may 'Answer' your discussion if there is a current solution, workaround, or roadmap/changelog post related to the feedback.

Where to look to see what's shipping 👀

• Read the Changelog for real-time updates on the latest GitHub features, enhancements, and calls for feedback.
• Explore our Product Roadmap, which details upcoming major releases and initiatives.

What you can do in the meantime 💻

• Upvote and comment on other user feedback Discussions that resonate with you.
• Add more information at any point! Useful details include: use cases, relevant labels, desired outcomes, and any accompanying screenshots.

As a member of the GitHub community, your participation is essential. While we can't promise that every suggestion will be implemented, we want to emphasize that your feedback is instrumental in guiding our decisions and priorities.

Thank you once again for your contribution to making GitHub even better! We're grateful for your ongoing support and collaboration in shaping the future of our platform. ⭐

[Viniciusulpicio]

Hi @adiehl96! This behavior often occurs because the GitHub MathJax/KaTeX renderer sometimes struggles with specific character combinations followed by an equals sign, treating the hat symbol as a potential trigger for a line break in certain container widths.

A common workaround to force inline rendering without breaks is to wrap the entire equation in a {} block or use the \text{} wrapper for the surrounding context. Try this:

$\hat{t} = \hat{t}$ (ensure there are no hidden spaces) or
${\hat{t} = \hat{t}}$

Also, check if your Firefox version has 'Allow pages to choose their own fonts' enabled, as font substitution can sometimes mess with the bounding box of math symbols.

Sorry, I don't speak English, this text has been translated.

[adiehl96]

I'm afraid this wasn't the problem:

I also checked the setting you recommended and found it to be enabled already sadly. The problem continues with a fresh firefox profile as well.

[adiehl96]

I only just now read through your answer carefully and realised that the second option seems to render correctly. Could you share the equation you wrote for the second line?

[Viniciusulpicio]

Hi @adiehl96! Sorry about that, GitHub rendered the math in my previous answer so the formatting was hidden.

The second option I mentioned was wrapping the entire equation (or just the equals sign) in curly braces. This prevents the renderer from applying a line-break penalty around the operator.

You can write it exactly like this:

$`{\hat{t}=\hat{t}}`$

or just wrapping the equals sign:

$`\hat{t}{=}\hat{t}`$

Let me know if this syntax finally does the trick for you!
(Sorry, I don't speak English, this text was translated).