桌子周围的圆括号(矩阵)

Question

我有一个带有一些输入框的简单矩阵,我使用MathML创建.它在Firefox中运行良好,但不适用于Chrome.我想使用HTML(表格)和CSS重新创建相同类型的东西,以便它可以与更多浏览器一起使用.

这是指向预期效果的屏幕截图的链接,因为我无法发布图片:https://i.imgur.com/P2ICwSb.png

使用MathML片段:

input {
  width: 24px;
  background-color: transparent;
  border: 1px solid gray;
  font-family: serif;
  font-weight: bold;
  text-align: center;
  font-size: 16px;
}
input + input {
  margin-right: 2em;
}
input:first-child {
  margin-left: 1em !important;
}

<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
  <semantics>
    <mrow>
      <mo>(</mo>
      <mtable columnalign="center center center" rowspacing="1ex" displaystyle="false">
        <mtr>
          <mtd>
            <mi>
              <input type="text">
            </mi>
          </mtd>
          <mtd>
            <mi>
              <input type="text">
            </mi>
          </mtd>
          <mtd>
            <mi>
              <input type="text">
            </mi>
          </mtd>
        </mtr>
        <mtr>
          <mtd>
            <mi>
              <input type="text">
            </mi>
          </mtd>
          <mtd>
            <mi>
              <input type="text">
            </mi>
          </mtd>
          <mtd>
            <mi>
              <input type="text">
            </mi>
          </mtd>
        </mtr>
        <mtr>
          <mtd>
            <mi>
              <input type="text">
            </mi>
          </mtd>
          <mtd>
            <mi>
              <input type="text">
            </mi>
          </mtd>
          <mtd>
            <mi>
              <input type="text">
            </mi>
          </mtd>
        </mtr>
      </mtable>
      <mo>)</mo>
    </mrow>
  </semantics>
</math>

我最初的想法是使用border-radius属性并在表格上设置左右边框.下面有一个工作片段,但我不喜欢与原始MathML代码相比,括号的顶部和底部是如何形成的.当使用border-radius方法时,线条在矩阵的顶部和底部明显变细,并且似乎"淡出".

使用<table>的第一次尝试片段和border-radius:

input {
  width: 24px;
  background-color: transparent;
  border: 1px solid gray;
  font-family: serif;
  font-weight: bold;
  text-align: center;
  font-size: 16px;
}
input {
  margin-right: 1em;
}
td:first-child input {
  margin-left: 1em !important;
}
td:last-child input {
  margin-right: 1em !important;
}
table {
  border-left: 2px solid #000;
  border-right: 2px solid #000;
  border-top-left-radius: 1em;
  border-top-right-radius: 1em;
  border-bottom-left-radius: 1em;
  border-bottom-right-radius: 1em;
}

<table>
  <tbody>
    <tr>
      <td>
        <input type="text">
      </td>
      <td>
        <input type="text">
      </td>
      <td>
        <input type="text">
      </td>
    </tr>
    <tr>
      <td>
        <input type="text">
      </td>
      <td>
        <input type="text">
      </td>
      <td>
        <input type="text">
      </td>
    </tr>
    <tr>
      <td>
        <input type="text">
      </td>
      <td>
        <input type="text">
      </td>
      <td>
        <input type="text">
      </td>
    </tr>
  </tbody>
</table>

我尝试使用CSS 2D变换和实际文本来达到同样的效果,但结果并不是特别好.

使用CSS转换和<table>进行实验:

input {
  width: 24px;
  background-color: transparent;
  border: 1px solid gray;
  font-family: serif;
  font-weight: bold;
  text-align: center;
  font-size: 16px;
}
input {
  margin-right: 1em;
}
td:first-child input {
  margin-left: 1em !important;
}
td:last-child input {
  margin-right: 1em !important;
}
table {
  display: inline-block;
  vertical-align: middle;
}
span {
  font-family: 'Latin Modern Math';
  transform: scale(2, 4);
  font-size: 2em;
  display: inline-block;
  vertical-align: middle;
}

<span>(</span>
<table>
  <tbody>
    <tr>
      <td>
        <input type="text">
      </td>
      <td>
        <input type="text">
      </td>
      <td>
        <input type="text">
      </td>
    </tr>
    <tr>
      <td>
        <input type="text">
      </td>
      <td>
        <input type="text">
      </td>
      <td>
        <input type="text">
      </td>
    </tr>
    <tr>
      <td>
        <input type="text">
      </td>
      <td>
        <input type="text">
      </td>
      <td>
        <input type="text">
      </td>
    </tr>
  </tbody>
</table><span>)</span>

有什么方法可以更接近地匹配MathML代码的原始行为？我想知道基于SVG的解决方案是否会更好.

我知道MathML代码使用拉丁现代数学字体呈现括号,但我不确定如何拉伸括号以围绕表格(无论其内容如何).

Answer 1

我会制作两张括号图像（一张左一张右）并将它们的高度设置为 100%。通过这种方式，您可以避免使用真实文本（及其属性font-size）。

然后将容器设置为position: relative并将图像设置为position: absolute; left(/right): 0px; top: 0px; height:100%;。position: absolute; left:如果您写的是左括号的宽度; right:右括号的宽度，则应该适合在两者之间;。

希望有帮助:-)