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

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

這似乎是越來越普遍使用用於在網頁上顯示數學公式的。上面的例子使用了LaTeX版本的方法。 MathJax基於客戶端JavaScript，但這種缺點可能超過了好處。

使用\bmatrix生成帶括號的矩陣。根據ISO 80000-2，矩陣的主要表示法使用括號;爲此，請改爲使用\pmatrix。

我已經使用\mathrm{i}按照標準生成非斜體的「i」。許多數學家仍然贊成斜體字，只需使用i即可實現，因爲LaTeX默認標識了標識符。請注意，LaTeX會自動在操作員周圍應用適當的間距，並將連字符「 - 」變爲負號。