Combination of written content and mathematical equations displayed on an HTML webpage

Question

Combination of written content and mathematical equations displayed on an HTML webpage

I've been tasked with creating something similar to the following on an HTML page:

The math tag in HTML is not suitable because it struggles with handling the line break between parts "/begin()-/end()". To achieve the desired effect (successfully done in LaTeX), I have come up with the following:

$
\left\lbrace
\begin{matrix}
  $Option1$\\
  $Option2$
\end{matrix}
\right\rbrace
$

However, when implemented in HTML:

<p><span class="math inline">\(\left\lbrace
\begin{matrix}\)</span>
Option1
<span class="math inline">\(\\
\)</span>
Option2
<span class="math inline">\(\end{matrix}
\right\rbrace\)</span></p>

It does not work as intended. The /begin and /end are separated into different spans, disrupting the LaTeX internal process. I need to remove the options from math tags so I can apply custom formatting to them. Interestingly, using CSS:

.math {
}

I'm able to change the color and size, but not the font family or style.

Even utilizing the HTML table structure proves ineffective as the {} symbols do not cover the full height of the options section (which can have up to 7 elements).

At this point, I am at a loss for solutions. Can anyone suggest how I might approach this task? Ideally, I would like to avoid using SVG/PNG images to ensure compatibility across different screen sizes.

html css mathjax

Answer 1

Answer №1

In his response on this thread, Davide Cervone explains:

MathJax focuses on the macros required for mathematical expressions, not text layout elements like \begin{tabular} and \begin{center}. Therefore, these are not supported. Instead, an array environment should be used [...]

This limitation restricts the use of certain environments. The provided code example illustrates a solution:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MathJax</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
</head>

<body>
\(
  \begin{array}{ccc}
    \left\lbrace
    \begin{matrix}
      \mathrm{Option1}\\
      \mathrm{Option2}
    \end{matrix}
    \right\rbrace & %
%
    your\ content & %
%
    \begin{matrix}
      \mathrm{type1}\\
      \mathrm{type2}\\
      \mathrm{type3}
    \end{matrix}\\
  \end{array}
\)
</body>
</html>

Code Snippet:

<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

\(
  \begin{array}{ccc}
    \left\lbrace
    \begin{matrix}
      \mathrm{Option1}\\
      \mathrm{Option2}
    \end{matrix}
    \right\rbrace & %
%
    your\ content & %
%
    \begin{matrix}
      \mathrm{type1}\\
      \mathrm{type2}\\
      \mathrm{type3}
    \end{matrix}\\
  \end{array}
\)

The same post referenced above suggests utilizing HTML tables over LaTeX arrays whenever possible. The following structure demonstrates nesting two sets of <table>s, making it more complex to render braces but acceptable nonetheless. However, excessive use of <table> tags is discouraged, reserved only for presenting tabular data.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>No MathJax</title>
<style>td.braces{font-size:200%}</style>
</head>

<body>
<table>
  <tr>
    <td>
      <table>
        <tr>
          <td rowspan="2" class="braces">{</td>
          <td>Option1</td>
          <td rowspan="2" class="braces">}</td>
        </tr>
        <tr>
          <td>Option2</td>
        </tr>
      </table>
    </td>
    <td>your content</td>
    <td>
      <table>
        <tr>
          <td>type1</td>
        </tr>
        <tr>
          <td>type2</td>
        </tr>
        <tr>
          <td>type3</td>
        </tr>
      </table>
    </td>
  </tr>
</table>
</body>
</html>

Snippet:

td.braces{font-size:200%}

<table>
  <tr>
    <td>
      <table>
        <tr>
          <td rowspan="2" class="braces">{</td>
          <td>Option1</td>
          <td rowspan="2" class="braces">}</td>
        </tr>
        <tr>
          <td>Option2</td>
        </tr>
      </table>
    </td>
    <td>your content</td>
    <td>
      <table>
        <tr>
          <td>type1</td>
        </tr>
        <tr>
          <td>type2</td>
        </tr>
        <tr>
          <td>type3</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Just one line of CSS included here!

To enhance the ideograms implementation further, feel free to provide additional details on your vision so we can refine it!

Answer 2

In his response on this thread, Davide Cervone explains:

MathJax focuses on the macros required for mathematical expressions, not text layout elements like \begin{tabular} and \begin{center}. Therefore, these are not supported. Instead, an array environment should be used [...]

This limitation restricts the use of certain environments. The provided code example illustrates a solution:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MathJax</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
</head>

<body>
\(
  \begin{array}{ccc}
    \left\lbrace
    \begin{matrix}
      \mathrm{Option1}\\
      \mathrm{Option2}
    \end{matrix}
    \right\rbrace & %
%
    your\ content & %
%
    \begin{matrix}
      \mathrm{type1}\\
      \mathrm{type2}\\
      \mathrm{type3}
    \end{matrix}\\
  \end{array}
\)
</body>
</html>

Code Snippet:

<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

\(
  \begin{array}{ccc}
    \left\lbrace
    \begin{matrix}
      \mathrm{Option1}\\
      \mathrm{Option2}
    \end{matrix}
    \right\rbrace & %
%
    your\ content & %
%
    \begin{matrix}
      \mathrm{type1}\\
      \mathrm{type2}\\
      \mathrm{type3}
    \end{matrix}\\
  \end{array}
\)

The same post referenced above suggests utilizing HTML tables over LaTeX arrays whenever possible. The following structure demonstrates nesting two sets of <table>s, making it more complex to render braces but acceptable nonetheless. However, excessive use of <table> tags is discouraged, reserved only for presenting tabular data.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>No MathJax</title>
<style>td.braces{font-size:200%}</style>
</head>

<body>
<table>
  <tr>
    <td>
      <table>
        <tr>
          <td rowspan="2" class="braces">{</td>
          <td>Option1</td>
          <td rowspan="2" class="braces">}</td>
        </tr>
        <tr>
          <td>Option2</td>
        </tr>
      </table>
    </td>
    <td>your content</td>
    <td>
      <table>
        <tr>
          <td>type1</td>
        </tr>
        <tr>
          <td>type2</td>
        </tr>
        <tr>
          <td>type3</td>
        </tr>
      </table>
    </td>
  </tr>
</table>
</body>
</html>

Snippet:

td.braces{font-size:200%}

<table>
  <tr>
    <td>
      <table>
        <tr>
          <td rowspan="2" class="braces">{</td>
          <td>Option1</td>
          <td rowspan="2" class="braces">}</td>
        </tr>
        <tr>
          <td>Option2</td>
        </tr>
      </table>
    </td>
    <td>your content</td>
    <td>
      <table>
        <tr>
          <td>type1</td>
        </tr>
        <tr>
          <td>type2</td>
        </tr>
        <tr>
          <td>type3</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Just one line of CSS included here!

To enhance the ideograms implementation further, feel free to provide additional details on your vision so we can refine it!

Combination of written content and mathematical equations displayed on an HTML webpage

Answer №1

Similar questions

Django works perfectly on local host, but unfortunately, hosting servers are not cooperating

Peruse through the Vignettes: exclude the `source` and `R code` files in the results

Encountering difficulties retrieving information from an API using Angular

Displaying a video in fullscreen on a webpage

Setting a border on a specific column in ag-grid is a simple task that can help you customize

I recently realized that my website has a strong Björk influence when viewed in IE. Any suggestions for what I should do next

Steps for deactivating a button until the form has been submitted

Encountered an issue retrieving two rows nested within a parent row using Bootstrap 4 and VueJs

Click to alter the style of an <li> element

Is there a way to ensure the content of two divs remains aligned despite changing data within them?

Creating a form within a PHP script

Place a "sticky" button directly below a second "sticky" navigation bar

Importing FontFace elements within the _document.tsx file

Only in Firefox, there seems to be an issue with how the CSS

HTML email for resetting your password

Add a custom filter to the active route for a stylish look

My form does not receive the Bootstrap classes when using the jQuery script

Avoid changing the styling of the parent element when hovering over it

Problems with the design in the Opera browser

What is the best way to instruct npm to generate a .min.css file from scss?