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

What steps should I take to repair my jQuery button slider?

Using both text and image sprites in a horizontal menu list on a UL element

The ball refuses to fall into the designated boxes

The issue with res.sendFile is that it is failing to display

Albania's Interactive Mapping Tool

Make sure your website design is responsive by setting the body to the device's

"Customize Your CSS Dropdown Menu with Dynamic Background Color for div Elements

What would be more efficient for designing a webpage - static HTML or static DOM Javascript?

Seamless Shift: Effortless Transition

Establishing the Backbone router configuration

The download attribute in HTML5 seems to be malfunctioning when encountering a 301 Moved Permanently

Personalize the tooltip feature in highchart

Picking out specific SharePoint components using jQuery

The div is incorrect and causing the label and input to move in the wrong direction

The Bootstrap Navbar is causing the navigation bar to span across two lines

Is there a way to customize the color of a MUI styled component?

Updates to the Tailwind file are not appearing on the page after reopening the file

Having difficulty specifying numerical entries only

Tips for accessing a URL with a specific value in the HTML file

Loop through multiple levels of elements using jQuery