Question 44031 in Html Question posted in
Some basic documentation can be found here.

Mathjax formular causes linebreak with other elements – Html

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>
Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    By combining Beginners suggestion and Asaduzzaman Atik, i am able to get mathjax formulas and normal textes rendered inline with other elements by setting up some css properties

    <div class="htmlChoice"  [mathjax] ="item[1][0]" style="padding-left: 30px; top: -20px; position: relative;"></div>

  2. 0

    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.

    Login or Signup to reply.
  3. 0

    The solution by Asaduzzaman Atik is correct in principle, but in this special case it is a simple misunderstanding of the latex syntax: $$ is for displayed formulae whereas $ is for inline formulae.

    Simply changing your source to $formula$ will fix the issue.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search