CODEWITHSUNDEEP
reactjsmaterial-uimathjax
mymactive
mymactive

Reputation: 11

How to wrap text on MathJax using React( with material-ui and react-mathjax-node)

I have tried to word wrapping. I have written this code below.

import React from "react";
import Typography from "@material-ui/core/Typography";
import { makeStyles } from "@material-ui/core/styles";
import MathJax from "@innodoc/react-mathjax-node";

const useStyles = makeStyles((theme) => ({
  text: {
    overflowWrap: "break-word",
  },
}));

function Example() {
  const classes = useStyles();

  return(
    <Typography className={classes.text}>
      <MathJax.Provider>
        <MathJax.MathJaxNode texCode="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"/>
      </MathJax.Provider>
    </Typography>
  )
}

I have used material-ui for styling. However it does not work. I have attached screenshot how it looks in sufficiently small-width view of Google Chrome on Mac (M1).

enter image description here

How to word wrapping for MathJax in React?

Upvotes: 1

Views: 621

Answers (2)

mymactive
mymactive

Reputation: 11

Thank you for your answer!

Sadly it do not change in my case. Since a character is an element in the html sense( e.g. "aaa" is the complex of three MathJax elements) it might be not valid to "word-wrap".

( I will use paper's title only. This is almost alphabet, but is sometimes include to math-words. Thank you for your kindness!)

Upvotes: 0

Mosh Feu
Mosh Feu

Reputation: 29317

This because the root element of the formula (<mjx-math>) has the style word-wrap: nowrap which prevents the words to break.

You can override this style using whatever css technique you're using. Having said that without word-wrap: nowrap the equation might look bad so I'm not sure you should do it.

For example

const useStyles = makeStyles((theme) => ({
  text: {
    overflowWrap: "break-word",
    width: 100,
    "*": {
      whiteSpace: "normal"
    }
  }
}));

Breaks the formula.

https://codesandbox.io/s/vibrant-easley-loyfj

Upvotes: 0

Related Questions