Line break exception & Abnormal mobile screen width

[Explorer-Dong]

Context

When I rendered a series of MD articles into HTML using the mkdocs-material theme, many compatibility rendering anomalies occurred.

Bug description

I have three bugs for feedback, both of which are about mobile content overflowing the screen width.

The following figures are the rendering results of the mobile model when using the latest Chrome browser on local Windows 11 and enabling developer mode.

bug1: Super long continuous strings cannot automatically wrap.

as the details below

bug2: The inline formulas of KaTeX cannot be wrapped properly.

I raised a similar question not long ago #7941, that is, MathJax's inline formulas cannot wrap normally, and the conclusion I got was that it was an upstream problem, that is, MathJax has not yet implemented the line wrapping behavior of inline formulas in version 3.

Now KaTeX also has this problem.

bug3: Abnormal screen width when there are inline formulas in the table

When there are inline formulas in a table, no content will overflow, but the screen width will be abnormally enlarged.

Related links

• math

Reproduction

bug.zip

Steps to reproduce

1. pip install mkdocs-material
2. cd bug/
3. mkdocs serve
4. enter 127.0.0.1:8000
5. press F12
6. select any mobile model

then you will see all the three bugs in different pages

Browser

Chrome

Before submitting

• I have read and followed the bug reporting guidelines.
• I have attached links to the documentation, and possibly related issues and discussions.
• I assure that I have removed all customizations before submitting this bug report.
• I have attached a .zip file with a minimal reproduction using the built-in info plugin.

[facelessuser]

Did you consult the KaTeX community? I would assume there would be a solution there or at least information regarding it there. That would be the first place to check.

[squidfunk]

Thanks for reporting. Unfortunately, we can only give you the same answer: please take this upstream. If it' line wrapping inside of formulas, it is something that needs to be solved by the JavaScript libraries.

[Explorer-Dong]

Did you consult the KaTeX community? I would assume there would be a solution there or at least information regarding it there. That would be the first place to check.

Thank you for your response, I will consult the Katex community.

[Explorer-Dong]

Thanks for reporting. Unfortunately, we can only give you the same answer: please take this upstream. If it' line wrapping inside of formulas, it is something that needs to be solved by the JavaScript libraries.

Thank you for your answer. I am not familiar with JavaScript, so I asked many basic questions. But what about the issue of the excessively long string in bug1? That is unrelated to KaTeX.

[squidfunk]

Thanks for pointing that out. You're right that this is not related to KaTeX, sorry, that slipped my attention. However, please note that it's mandatory to open separate bug reports for issues that do not relate, so I kindly ask you to do this the next time. Also, please use the info plugin to create the minimal reproduction. It is absolutely essential to read and follow our bug reporting guidelines, so we can help you efficiently:

One bug at a time – if you encounter several unrelated bugs, please create separate issues for them. Don't report them in the same issue, as this makes attribution difficult.

The problem with excessively long strings is known, but for a long time, there was no possibility to apply breaking to strings without messing with normal word-breaks. I checked, and this seems to be resolved now with the overflow-wrap property, which we can add to md-typeset.

[squidfunk]

Fixed in 2c52fa2.

[Explorer-Dong]

This is awesome! Thank you very much.

[Explorer-Dong]

I want to make some additions.

for bug 1

Thank you very much for your timely adjustment.

for bug 2

KaTeX already supports line breaks for inline formulas in 0.10.0+ version, it's just that my grammar does not conform to the line breaking rules of KaTeX. I'm sorry for the trouble this problem has caused you.

for bug 3

After my investigation, I think it is not a problem with KaTeX, but a problem with the theme. Because I didn't use any table syntax of KaTeX, and KaTeX itself does not support table syntax.

But I found a solution that works. Just like you added new attribute to .md-typeset in 2c52fa2, by adding position: sticky; or position: relative; to .md-typeset__tablet, the converted table html will not have blank areas on the mobile terminal.

.md-typeset__table {
    /* position: sticky; */
    position: relative;
}

[squidfunk]

Thanks for investigating. Regarding 3.: As I mentioned in #7889 (comment), making tables properly scroll on narrow screens is a huge hack that we have in place since 2017. We can't just change things, as it's unexpected what will break downstream in the 60k+ projects that use Material for MkDocs. We'll take this back to the drawing board when we work on improved table support ☺️

[Explorer-Dong]

Thanks for your reply, looking forward to future versions 🥰

[squidfunk]

Released as part of 9.6.2.