数学的行列の括弧のためのhtml/css - 軽量を好む

Question

私は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> 

Answer 1

デモ：http://jsfiddle.net/NQ6ww/38/

角括弧をシミュレートするために:beforeと:after擬似要素を使用してCSSを介して行います。

HTML

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

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

Answer 2

A（jsfiddle付き）MathJaxベースのソリューション：

<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}\] 

を使用することがますます一般的のようですは、Webページに数式を表示します。上記の例では、LaTeXバージョンのアプローチを使用していました。 MathJaxはクライアントサイドのJavaScriptに基づいていますが、この欠点はおそらくメリットよりも優れています。

\bmatrixを使用すると、角括弧付きの行列が生成されます。 ISO 80000-2によると、行列の主な表記はかっこを使用します。代わりに\pmatrixを使用してください。

私は\mathrm{i}を使用して、標準に従って非イタリック体の「i」を生成しました。 LaTeXはデフォルトで識別子をイタリック体にするので、代わりにiを使用することによって達成できる多くの数学者はここでもイタリック体を好む。 LaTeXはオペレータの周りに自動的に適切なスペースを適用し、ハイフン「 - 」をマイナス記号に変えます。