Mix of text and math formula on HTML page

user_7574915 0
Viewed 251

I have a task to write something like this on HTML page:

Example text with usage of formula

Math tag (of HTML) is not good because it couldn't deal with the tag break in between parts "/begin()-/end()". So, creating something like this (working great at LaTeX):

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

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>

Is not working. /begin and /end are in different spans and it is breaking LaTeX internal process. I need to take out options from math tags, because I need to apply my own formatting to them. Funny part: If I'll use CSS

.math {
}

It could change color and size, but not font famaly or italic/bold format.

Using the HTML table structure is also not helping because {} symbols are not covering full height of options part (number of elements could rise up to 7).

As result I'm out of possible solutions here. May somebody share idea how I could cover this task? If possible I want to avoid SVG/PNG or any other image type for support of different screen sizes.

mathjax css html
1 Answers

In this answer, Davide Cervone states:

MathJax only implements the macros used for math layout, not text layout, so things like \begin{tabular} and \begin{center} are not supported. Instead, you can use an array environment [...]

This is why we can't use all the environments. The following code should work:

<!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>

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 that I linked above also advises to use HTML tables as much as possible, rather than LaTeX arrays or other. The following sketch with two sets of <table>s nested makes more complicate to render the braces but it's still ok. The use of <table> should anyway be not exceeded and limited to only present data in tabular format.

<!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>

Only one line of CSS here!

Finally, if you like, add some information about how you thought the ideograms should be implemented, so we refine it!

user_35432330
Related