html/css for brackets around mathematical matrix -- prefer lightweight

Question

I'm writing up some math in html. I want to do it in a small and lightweight fashion. This is what I have so far. It makes the matrices just fine, but is there a way I can do the brackets one typically sees around matrices?

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>

Answer 1

Demo: http://jsfiddle.net/NQ6ww/38/

Done via CSS using :before and :after pseudo elements to simulate the square brackets.

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

Answer 2

A MathJax-based solution (with 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}\]

It seems to be increasingly common to use MathJax for displaying math formulas on web pages. The example above used the LaTeX version of the approach. MathJax is based on client-side JavaScript, but this downside is probably outweighed by the benefits.

The use of \bmatrix generates a matrix with brackets. The primary notation for matrices, according to ISO 80000-2, uses parentheses; for this, use \pmatrix instead.

I have used \mathrm{i} to produce non-italicized “i” as per the standard. Many mathematicians still favor italics here, achievable by using just i instead, since LaTeX italicizes identifiers by default. Note that LaTeX automatically applies proper spacing around operators and turns the hyphen “-” to a minus sign.