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 {
}

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

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

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

Answer 1

在 this answer 中，Davide Cervone 指出：

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 [...]

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

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

我上面链接的 post 也建议尽可能多地使用 HTML 表格，而不是 LaTeX arrays 或其他。以下带有两组 <table> 嵌套的草图使得渲染大括号更加复杂，但它仍然可以。无论如何都不应超过 <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！

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

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

Mix of text and math formula on HTML page

html

css

mathjax