Menu
I have configured extra processing for MathJax with this code below
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: { inlineMath: [["$","$"],["\\(","\\)"]] },
"HTML-CSS": {
linebreaks: { width: "container" }
}
});
</script>
As I assumed it has to work with word wrap containers that I have in my HTML code.
I have this CSS that set with word-wrap
.col {
background: #f0f0f0;
width: 230px;
padding: 10px;
font-size: 1.5em;
word-wrap: break-word;
}
this is my body:
<body>
<div class = 'col'>
$$
Pr [( G \bigcup B \bigcup S)^e ] = 1 - Pr ( G \bigcup B \bigcup S)
= 1 - [Pr(G)+Pr(B)Pr(S)-Pr(G \bigcap B) - Pr(G \bigcap S) - Pr(B \bigcap S)]
Pr [( G \bigcup B \bigcup S)^e ] = 1 - Pr ( G \bigcup B \bigcup S)
= 1 - [Pr(G)+Pr(B)Pr(S)-Pr(G \bigcap B) - Pr(G \bigcap S) - Pr(B \bigcap S)]
= 1 - (0.28 + 0.29 + 0.19 - 0.14 - 0.10 -0.12 + 0.08) = 1 - 0.48 = 0.52
$$
</div>
</body>
but word wrap does not work in my case.
I've attached screenshot how it looks in Safri on iPad
the words must wrap to the second line but they don't ad you can see.
213
EDIT If you're on iOS6, then you might run into this MathJax bug.
MathJax uses its own line-breaking algorithm (implementing the MathML specs). Setting word-wrap: break-word; will not change its behavior.
Unless there's some information missing, you code works as expected for me, i.e., MathJax does its linebreaking.
Here's a complete example.
<!doctype HTML>
<head>
<title>Break!</title>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: { inlineMath: [["$","$"],["\\(","\\)"]] },
"HTML-CSS": {
linebreaks: { automatic: true, width: "container" }
}
});
</script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
<style>
.col {
background: #f0f0f0;
width: 230px;
padding: 10px;
font-size: 1.5em;
word-wrap: break-word;
}
</style>
</head>
<body>
<div class = 'col'>
$$
Pr [( G \bigcup B \bigcup S)^e ] = 1 - Pr ( G \bigcup B \bigcup S)
= 1 - [Pr(G)+Pr(B)Pr(S)-Pr(G \bigcap B) - Pr(G \bigcap S) - Pr(B \bigcap S)]
Pr [( G \bigcup B \bigcup S)^e ] = 1 - Pr ( G \bigcup B \bigcup S)
= 1 - [Pr(G)+Pr(B)Pr(S)-Pr(G \bigcap B) - Pr(G \bigcap S) - Pr(B \bigcap S)]
= 1 - (0.28 + 0.29 + 0.19 - 0.14 - 0.10 -0.12 + 0.08) = 1 - 0.48 = 0.52
$$
</div>
</body>
I also faced similar kind of issue, but I could not solve using that word wrap.
The issue is caused by the MathJax's default classes and hence we need to override them so that it works according to the width of the parent:
.mjx-chtml {
font-size: ${IS_MOBILE ? '100%' : '120%'} !important;
}
.mjx-table {
white-space: pre-line !important;
}
.mjx-table .mjx-char {
white-space: ${IS_MOBILE ? 'pre-line' : 'inherit'} !important;
}
.mjx-full-width {
width: 0em !important;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
