html / css用于数学矩阵周围的括号 - 更喜欢轻量级

时间:2012-07-19 12:43:25

标签: html math matrix

我正在用html写一些数学。我想以小巧轻便的方式做到这一点。这就是我到目前为止所拥有的。它使矩阵很好,但有没有办法可以做一个通常在矩阵周围看到的括号?

For example, if <b>A</b> is the matrix
<br>
<br>
<div align=center>
    <table>
        <tr>
            <td>1+3i</td>
            <td>2+i</td>
            <td>10</td>
        </tr>
        <tr>
            <td>4-3i</td>
            <td>5</td>
            <td>-2</td>
        </tr>
    </table>
</div>
<br>

2 个答案:

答案 0 :(得分:19)

演示: http://jsfiddle.net/NQ6ww/38/

使用:before:after伪元素通过CSS完成,以模拟方括号。

    .matrix {
        position: relative;
    }
    .matrix:before, .matrix:after {
        content: "";
        position: absolute;
        top: 0;
        border: 1px solid #000;
        width: 6px;
        height: 100%;
    }
    .matrix:before {
        left: -6px;
        border-right: 0;
    }
    .matrix:after {
        right: -6px;
        border-left: 0;
    }
<div align=center>
    <table class="matrix">
        <tr>
            <td>1+3i</td>
            <td>2+i</td>
            <td>10</td>
        </tr>
        <tr>
            <td>4-3i</td>
            <td>5</td>
            <td>-2</td>
        </tr>
    </table>
</div>

答案 1 :(得分:2)

基于MathJax的解决方案(带jsfiddle):

<script src=
"http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML">
</script>
\[\begin{bmatrix}
1+3\mathrm{i}  & 2+\mathrm{i} & 10\\
4-3\mathrm{i} & 5 & -2
\end{bmatrix}\]

使用MathJax在网页上显示数学公式似乎越来越普遍。上面的例子使用了该方法的LaTeX版本。 MathJax基于客户端JavaScript,但这种缺点可能超过了它的好处。

使用\bmatrix生成带括号的矩阵。根据ISO 80000-2,矩阵的主要表示法使用括号;为此,请改用\pmatrix

我已根据标准使用\mathrm{i}生成非斜体“i”。许多数学家仍然倾向于使用斜体,只需使用i即可实现,因为LaTeX默认使用标识符。请注意,LaTeX会自动在运算符周围应用适当的间距,并将连字符“ - ”变为减号。