短網址

發表留言

源碼分享

人氣 131°c

HTML5 MathML分數的分子分母及帶分數

MathML 指「數學標記語言」是 XML 語言的一個子集，用來在 Web 網頁，甚至部分軟體或 APP 應用程式，顯示數學公式之用，這次使用 Math 標記，寫出分數公式，如分子、分母及帶分數等算式。

在 N 年前，我們一般在網站打分數會以符號表示，或使用 sup 及 sub 標籤，模仿分數。

如: ⅟ ½ ↉ ⅓ ⅔ ¼ ¾ ⅕ ⅖ ⅗ ⅘ ⅙ ⅚ ⅐ ⅛ ⅜ ⅝ ⅞ ⅑ ⅒

或 1⁄2 1⁄3 1⁄4 1⁄5 1⁄6

代碼:

<sup>1</sup>&frasl;<sub>2</sub>

用以上的方法打出分數，中間的橫線，不是直線而是斜線。

這樣我們需要借助 "Math" 打出正確的分子和分母。

MathML 元素分類：

Presentation Markup 呈現標記用於描述數學公式的視覺佈局和排版。

主要元素包括：

<mi>：表示單個字母、數位或其他孤立的數學字元作為標識碼（Identifier）。

<mn>：表示數位（Number）。

<mo>：表示運算子（Operator），如加減乘除、等於號、括弧等。

<mrow>：用來組合其他MathML元素，形成一個行（Row）。

<mfrac>：建立分數結構。

<msqrt>：建立根式（平方根）。

<msup>：建立上標（Superscript）。

<msub>：建立下標（Subscript）。

<msubsup>：同時建立上標和下標。

<munder>：建立下橫線（Underline）。

<mover>：建立上橫線（Overline）。

<munderover>：同時建立下橫線和上橫線。

<mfenced>：用括弧、方括弧等包圍數學運算式。

<mtext>：在數學公式中插入普通文字。

Content Markup

內容標記用於描述數學公式的語義和邏輯結構，便於機器處理和理解。

內容標記主要包括：

<ci>：表示數學變數或識別碼的語義內容。

<cn>：表示數字的語義內容。

<apply>：應用一個函數或運算子到一組參數。

<csymbol>：引入自定義或外部定義的數學符號。

Mixed Markup 在實際使用中，MathML文檔通常混合使用呈現標記和內容標記，以兼顧視覺呈現和語義解釋。

<mfrac> 與 <mfrac bevelled="true"> 的分別!

bevelled - 指定分數是垂直顯示還是內嵌顯示。通常值是 true 或 false。

numalign - 指定分子的對齊方式。值是左、右或中心。

denomalign - 指定分母的對齊方式。值是左、右或中心。

linethick - 指定分數條的筆畫寬度。值以 px、pt、em 等為單位進行測量。

詳解：MathML-分數

Mfrac 打出不同的分數:

備註：分數的字體大小，建議設定在: 25px ~ 30px

math {
	font-size: 30px;
	font-weight: bold;
}

01. 分數

版本一：

<math>
<mfrac>
<mn>2</mn>
<mn>3</mn>
</mfrac>
</math>

版本二：

<math>
<mfrac bevelled="true">
<mfrac>
<mn>3</mn>
<mn>6</mn>
</mfrac>
</mfrac>
</math>

02. 帶分數

版本一：

<math>
<mi>1</mi>
<mfrac>
<mn>2</mn>
<mn>3</mn>
</mfrac>
</math>

版本二：

<math>
<mfrac bevelled="true">
<mfrac>
<mi>3</mi>
</mfrac>
</mfrac>
<mfrac bevelled="true">
<mfrac>
<mn>1</mn>
<mn>5</mn>
</mfrac>
</mfrac>
</math>

03. 假分數除以分數

<math>
<mfrac bevelled="true">
<mfrac>
<mn>5</mn>
<mn>3</mn>
</mfrac>
<mrow>
<mo>÷</mo>
</mrow>
<mfrac>
<mn>1</mn>
<mn>2</mn>
</mfrac>
</mfrac>
</math>

04. 帶分數乘以帶分數

<math>
<mfrac bevelled="true">
<mrow>
<mi>2</mi>
</mrow>
<mfrac>
<mn>6</mn>
<mn>7</mn>
</mfrac>
<mrow>
<mo>×</mo>
</mrow>
<mrow>
<mi>3</mi>
</mrow>
<mfrac>
<mn>1</mn>
<mn>4</mn>
</mfrac>
</mfrac>
</math>

05. 帶分數減分數

<math>
<mfrac bevelled="true">
<mrow>
<mi>3</mi>
</mrow>
<mfrac>
<mn>1</mn>
<mn>4</mn>
</mfrac>
<mrow>
<mo>－</mo>
</mrow>
<mfrac>
<mn>2</mn>
<mn>6</mn>
</mfrac>
</mfrac>
</math>

06. 分數加帶分數等於整數

<math>
<mfrac bevelled="true">
<mfrac>
<mn>2</mn>
<mn>6</mn>
</mfrac>
<mrow>
<mo>+</mo>
</mrow>
<mrow>
<mi>3</mi>
</mrow>
<mfrac>
<mn>1</mn>
<mn>4</mn>
</mfrac>
<mrow>
<mo>＝</mo>
</mrow>
<mrow>
<mi>2026</mi>
</mrow>
</mfrac>
</math>

07. 不同數字組合

<math>
<mfrac bevelled="true">
<mn>1</mn>
<mn>2</mn>
</mfrac>
<mrow>
<mi>a</mi>
<mo>+</mo>
<mn>3</mn>
</mrow>
<mfrac bevelled="true">
<mn>1</mn>
<mn>2</mn>
</mfrac>
</math>

08. 分數 Table 表格

CSS:

hr {
   margin: 0;
   border: none;
   height: 2px;
   background: #000000;
}

Html:

<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td bgcolor="#E6E6F2"><table width="100%" border="0" cellspacing="1" cellpadding="1"> <!-- 1 改 0 無線條 -->
<tr align="center" bgcolor="#FFFFFF">
<td>&nbsp;</td>
<td><input type="text" name="a2" value="2" /></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td><input type="text" name="a5" value="5" /></td>
</tr>
<tr align="center" bgcolor="#FFFFFF">
<td><input type="text" name="a1" placeholder="如:1" /></td>
<td><hr /></td>
<td>
<select name="en">
<option value="＋" selected="selected">＋</option>
<option value="－">－</option>
<option value="×">×</option>
<option value="÷">÷</option>
</select>
</td>
<td><input type="text" name="a4" placeholder="e.g., 4" /></td>
<td><hr /></td>
</tr>
<tr align="center" bgcolor="#FFFFFF">
<td>&nbsp;</td>
<td><input type="text" name="a3" value="3" /></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td><input type="text" name="a6" value="6" /></td>
</tr>
<tr align="center" bgcolor="#FFFFFF">
<td colspan="5"><input type="reset" value="清除" /> &nbsp; <input type="button" name="bt" value="＝" onclick="cal" /></td>
</tr>
<tr align="center" bgcolor="#FFFFFF">
<td>&nbsp;</td>
<td></td>
<td><input type="text" maxlength="5" name="a8" value="8" readonly="readonly" /></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr align="center" bgcolor="#FFFFFF">
<td></td>
<td><input type="text" name="a7" value="7" readonly="readonly" /></td>
<td><hr /></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr align="center" bgcolor="#FFFFFF">
<td>&nbsp;</td>
<td></td>
<td><input type="text" name="a9" value="9" readonly="readonly" /></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr align="center" bgcolor="#FFFFFF">
<td colspan="5">&nbsp;</td>
</tr>
<tr bgcolor="#FFFFFF">
<td align="center">小數值:</td>
<td align="left" colspan="4"><input type="text" name="suuchi" value="0.99999" readonly="readonly" /></td>
</tr>
</table></td>
</tr>
</table>

演示：ifreesite.com/fraction.htm

代碼測試︰ ifreesite.com/runcode.htm

圖片預覧：