HTML 页面上的文本和数学公式的混合

Question

我有一个任务要在 HTML 页面上写这样的东西：

数学标记（HTML）不好，因为它无法处理"/begin()-/end()" 部分之间的标记中断。所以，创建这样的东西（在 LaTeX 上工作得很好）：

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

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

不工作。 /begin 和 /end 处于不同的跨度中，它正在破坏 LaTeX 内部进程。我需要从数学标签中取出选项，因为我需要对它们应用我自己的格式。有趣的部分：如果我会使用 CSS

.math {
}

它可以改变颜色和大小，但不能改变字体家族或斜体/粗体格式。

使用 HTML 表格结构也无济于事，因为 {} 符号没有覆盖选项部分的全部高度（元素数量可能增加到 7 个）。

因此，我在这里没有可能的解决方案。有人可以分享我如何完成这项任务的想法吗？如果可能的话，我想避免使用 SVG/PNG 或任何其他图像类型来支持不同的屏幕尺寸。

Answer 1

在this answer 中，Davide Cervone 表示：

MathJax 仅实现用于数学布局的宏，而不是文本布局，因此不支持 \begin{tabular} 和 \begin{center} 之类的东西。相反，您可以使用数组环境 [...]

这就是我们不能使用所有环境的原因。以下代码应该可以工作：

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

片段：

<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}
\)

---

我在上面链接的同一篇文章还建议尽可能使用 HTML 表格，而不是 LaTeX arrays 或其他。以下嵌套了两组<table>s 的草图使渲染大括号更加复杂，但它仍然可以。无论如何都不应超过<table> 的使用，并且仅限于以表格格式显示数据。

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

片段：

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>

这里只有一行CSS！

---

最后，如果您愿意，请添加一些关于您认为应该如何实现表意文字的信息，以便我们对其进行改进！