在跨度维度内渲染MathJax

Question

我正在以编程方式创建 HTML 标签以使用 MathJax 显示 LaTeX 公式。看起来公式是在计算

<span>

标签的尺寸后渲染的。我想确保公式在跨度边界内呈现。请问修复是什么！？

script.js

formula = "${{{{{{x^2}^2}^2}^2}^2}^2}^2$"
question_div = document.createElement("div");
question_div.setAttribute("id", "q1");

let input = document.createElement("input");
input.name = "a1";
input.id = "a1";
input.type = "radio";
let label = document.createElement("label");
let span_label = document.createElement("span");
span_label.setAttribute("class", "my-span");

span_label.innerText = formula;

label.appendChild(input);
label.appendChild(span_label);

question_div.appendChild(label);
document.body.appendChild(question_div);

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>title</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
<script>
MathJax = {
  tex: {
    inlineMath: [['$', '$'], ['\\(', '\\)']]
  }
};
</script>
<script id="MathJax-script" async
  src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js">
</script>
    <script type="text/javascript" src="script.js"></script>
  </body>
</html>

样式.css

label {
  border: 1px solid rgb(199, 199, 199);
  margin: 5px;
  padding: 4px;
  cursor: pointer;
}

div{
  padding-top:8px;
  padding-bottom:8px;
}

.my-span{
  padding-left:8px;
}

Answer 1

带有

display: inline

的元素（如

<span>

）的高度和深度（用于边框和背景）将是元素中使用的字体的高度和深度，无论其他字体的高度和深度如何其中的元素。例如：

#span1 {
  border: 1px solid black;
}

#span2 {
  display: inline-block;
  height: 4em;
  width: 1em;
  vertical-align: -1.75em;
  background-color: red;
}

<span id="span1">This span has a tall element
<span id="span2"></span> but its height stays the same</span>

所以您在 MathJax 输出中看到的是正确的结果。

为了使其高度和深度与内容匹配，您需要使用

display: inline-block

（还有其他值也适用于此）。

#span1 {
  display: inline-block;
  border: 1px solid black;
}

#span2 {
  display: inline-block;
  height: 4em;
  width: 1em;
  vertical-align: -1.75em;
  background-color: red;
}

<span id="span1">This span has a tall element
<span id="span2"></span> and its height matches that</span>

因此，对于您的示例，将

display: inline-block

添加到标签 CSS 中，您将得到

formula = "${{{{{{x^2}^2}^2}^2}^2}^2}^2$"
question_div = document.createElement("div");
question_div.setAttribute("id", "q1");

let input = document.createElement("input");
input.name = "a1";
input.id = "a1";
input.type = "radio";
let label = document.createElement("label");
let span_label = document.createElement("span");
span_label.setAttribute("class", "my-span");

span_label.innerText = formula;

label.appendChild(input);
label.appendChild(span_label);

question_div.appendChild(label);
document.body.appendChild(question_div);

label {
  display: inline-block;
  border: 1px solid rgb(199, 199, 199);
  margin: 5px;
  padding: 4px;
  cursor: pointer;
}

div{
  padding-top:8px;
  padding-bottom:8px;
}

.my-span{
  padding-left:8px;
}

<script>
MathJax = {
  tex: {
    inlineMath: [['$', '$'], ['\\(', '\\)']]
  }
};
</script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js">
</script>

在跨度维度内渲染MathJax

问题描述投票：0回答：1

1个回答

最新问题

在跨度维度内渲染MathJax

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1