Search code examples
htmlangularmathjax

Mathjax formular causes linebreak with other elements

I am a beginner in angular and need to get mathjax to work on our website, which loads predefined latex formula dynamically from the backend.

For this I am using the package mathjax-angular and managed to get the formula typesetted correctly. However the typesetting causes a linebreak for each formula, such that the formula texts and checkboxes are not inline anymore.

enter image description here

Maybe there is some setting in the imports for MathjaxModule in the app.module.ts that I am missing?

This is in the app.module.ts

MathjaxModule.forRoot({
  config: {
    loader: {
      load: ["output/svg", "[tex]/require", "[tex]/ams", 'input/tex-base', 'ui/menu']
    },
    tex2jax: {
      inlineMath: [["$$", "$$"]],
      packages: ["base", "require", "ams"],
      processEscapes: false
    },
    svg: { fontCache: "global" }
  },
  src: "https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"
}),

This is the html

<div class="item" *ngFor="let item of shuffledArray; let i =
    <label formArrayName="options" [ngClass]="{correctAnswer: (answerSubmitted && !answerCorrect && selectedMultipleChoiceAnswers[i] && item[1][2])}" [ngClass]="{incorrectAnswer: (answerSubmitted && !answerCorrect && selectedMultipleChoiceAnswers[i] && !item[1][2])}"
      style="padding-right: 10px;padding-left: 22px;text-indent: -30px;">
      <input
        type="checkbox"
        [formControlName]="i"
        [checked]="false"
        value="{{item[0]}}"
        style="margin-left: 10px;"
      />
      <span [mathjax]= "item[1][0]" class="htmlChoice" style="padding-left: 5px;"></span>
    </label>
  </div>
Solution

  • The line break issue you are experiencing is likely due to MathJax injecting a div element around each rendered formula. This is the default behavior of MathJax when it processes inline math.

    To fix this issue, you can try wrapping the MathJax directive in a span element with the display: inline-block CSS property set. This will ensure that the MathJax element remains inline with the other elements.

    Here is an example:

    <span style="display: inline-block;">
  <span [mathjax]="item[1][0]"></span>
</span>

    This should prevent MathJax from adding a line break after the formula. You may need to adjust the CSS properties to fit your specific layout needs.