How to keep MathJaX formula from sticking out of the screen of smartphones without using plugins【LaTeX】【WordPress】

2020年4月29日WordPress

Hello, this is Conomet.

You may be troubled by the fact that the mathematical formula written in MathJaX is sticking out of a small screen like a smartphone.
Some people may say, “It’s too much trouble, so I solved it with plugins.

This time, I’ll show you how to make the formula written in MathJaX not protrude horizontally on your smartphone without using plugins (so you can scroll horizontally).
This method works for more than just WordPress.

See the following article on how to introduce MathJaX in WordPress without using plugins.

Specific steps

Since “without plugins" is the most important point, it is assumed that you have installed MathJaX as described in the previous article.
Some plug-ins seem to have a side-scrolling function beforehand, but since I’m concerned about whether or not the behavior of the website will be heavy, I’ll do this without using plugins.

Check if MathJaX is working

First, let’s make sure that MathJaX is functioning properly.
If it doesn’t seem to work, then it’s a problem before it doesn’t stick out on your smartphone.

Add the following code to CSS

After making sure that MathJaX is working, let’s add the following code to the CSS

span.MJXc-display{
	overflow-x: auto;
	overflow-y: hidden;
}

This will cause the MathJaX formula to scroll sideways if the place where it appears to be is longer on the side.

As a supplement, here’s a brief explanation
“overflow-x: auto" means “scroll horizontally if the content doesn’t fit horizontally".
“overflow-y: hidden" means “vertical scrollbars are hidden".
It has the above implications. (These meanings are not strictly correct, but there’s nothing wrong with this kind of recognition.)

Let’s check

Let’s check it out after adding it to the CSS.
If you can scroll sideways without protruding, you’re done!

If you’re curious about an example of how it looks in practice, check out some of the articles here.
(It will be a related site I run called “Conomet’s Econometrics“)

It was surprisingly easy, wasn’t it!

It’s good to solve it quickly with a plugin, but I don’t think there’s anything better than being able to solve it without plugins, both in terms of site speed and security.

If you want to keep the MathJaX formula from sticking out to the side, give it a try!