MathML là ngôn ngữ đánh dấu được sử dụng để hiển thị các ký hiệu toán học. Bạn có thể sử dụng thẻ(tags) MathML trực tiếp từ HTML 5. Nó được sử dụng để hiển thị các ký hiệu toán học phức tạp trên website của bạn, và nó thực sự rất dễ sử dụng vì nó khá giống với HTML.
MathML có hai kiểu đánh dấu: một gọi là presentation (sự trình bày) được dùng đề bố trí (for layout) và còn lại là content (nội dung) được dùng để thể hiện ý nghĩa (for meaning). Và chỉ có kiểu đánh dấu presentation được hỗ trợ hiển thị bởi trình duyệt, đây là kiểu đánh dấu duy nhất có thể được sử dụng cùng với HTML. Bạn cũng thể sử dụng JavaScript trên kiểu đánh presentation này giống như bạn làm với các thẻ HTML.
Phần trên mình dịch theo nguyên văn nên có lẽ sẽ hơi khó hiểu, về cơ bản nội dụng nó muốn nói là nó giống với HTML được chia thành hai kiểu đánh dấu mà ta thường hay gọi là Tags, còn lại thì là nội dụng văn bản hiển thị (content), như bạn biết thì khi Tags được hiển thị trên trình (khi chạy website) thì nó không thể hện Tags mà nó hiển thị cách trình bày của Tags ví như dùng Tags <b> thì nội dung (content) trong nó sẽ được in đạp, và bạn có thể dùng CSS hoặc JavaScript để tùy biến cho nó.
Hiểu về MathML.
Danh sách về các yếu tố của MathML bạn thể thể xem tại Mozilla Developer website. Ở tại cuối bài viết tôi cũng cung cấp các yếu tố MathML được sử dụng trong xuyên xuốt bài viết.
Yếu tố cao nhất trong MathML là thẻ <math>, vì vậy bạn hãy nhớ khi viết một công thức toán học bằng MathML thì phải đặt nó trong thẻ <math>.
<mi>, <mo>, <mn>, <ms> là những yếu tố cơ bản đại diện cho một định danh như phép toán (operator), số (number), và chuỗi ký tự toán học đại diện tương ứng. Nếu bạn để ý sẽ thấy các yếu tố MathML đều được đầu đầu bằng chữ "m" đầu tiên, khá thú vị nhỉ ^^!. Bây giờ ta sẽ đi qua một số ví dụ nhỏ để hiểu hơn về MathML cũng như cách sử dụng nó.
How to Display Superscript? Làm thế nào để hiển thị chỉ số trên?
Để hiển thị chỉ số trên ta sử dụng tags <msup> trong tags này ta sẽ có hai tags là <mi> dùng hiển thì số chính, và <mn> dùng để hiển thị chỉ số trên, như ví dụ bên dưới.
How to Display Subscript? Làm thế nào để hiển thị chỉ số dưới?
Để hiển thị chỉ số dưới ta sử dụng tags <msub> tương với <msup> ta cũng sẽ có hai tags là <mi> dùng hiển thì số chính, và <mn> dùng để hiển thị chỉ số dưới, như ví dụ bên dưới.
How to Display Fractions? Làm thế nào để hiển thị phân số?
Để hiển thị công thức phân số ta sử dụng thẻ tags <mfrace>, trong tags này ta sẽ có 2 yếu tố cùng sử dùng một tags là <mn> số ở trên là tử sổ, số ở dưới là mẫu số.
How to Display Integer Square Root? Làm thế nào để hiển thị căn bậc hai?
Để hiện thị căn bậc hai của một số trên website ta sử dụng tags <msqrt> như sau:
How to Display Root Integers? Làm thế nào để hiển thị căn bậc mũ?
Để hiện thị căn bật mũ ta sử dụng thẻ tags <mroot> như sau:
How to Display a Matrix? Làm thế nào để hiển thị một ma trận?
Để xây dựng một ma trận, chúng ta sẽ cần phải có một cấu trúc bảng cho dòng (rows) và cột (columns), và chúng ta sẽ sử dụng các tags <mtable>, <mtr> and <mtd>.
Chúng ta sử dụng thẻ <mo> để thêm dấu ngoặc vuông [] để bao lấy các phần tử trong matrix, và cuối cùng bao tất cả lại trong thẻ tags <mrow> như ví dụ bên dưới.
Ngoài ra chúng ta có thể sử dụng CSS để làm nổi bật X trong bảng ma trận.
How to Display Integral Equations? Làm thế nào để hiển thị các phương trình tích phân?
Dưới đây là một ví dụ về một loại hình cơ bản của phương trình tích phân.
Giống như HTML, MathML cũng có nhân vật và các thực thể, một trong số đó được sử dụng trong ví dụ để hiển thị các biểu tượng phi Hy Lạp. Dưới đây là ví dụ hiển thị phương trình tích phân ở trên:
Danh sách các ký tự thực thể toán học của MathML, bạn có thể xem chúng tại website của W3C
MathML Attributes - Thuộc tính MathML
Các thuộc tính của MathML cũng tương tự như các thuộc tính của HTML như ID, Class,... bên cạnh đó MathML cũng có các thuộc tính của riêng nó bạn có thể tham khảo tại website các nhà phát triển của Mozilla. Ngoài ra bạn có thể thể sử dụng thêm thư viện javascript MathJax để làm cho sinh động hơn, cái này mình chỉ nói thêm thôi ^^!.
Example MathML - Ví dụ về MathML
Reference List of MathML Elements - Danh các phần tử của MathML
MathML có hai kiểu đánh dấu: một gọi là presentation (sự trình bày) được dùng đề bố trí (for layout) và còn lại là content (nội dung) được dùng để thể hiện ý nghĩa (for meaning). Và chỉ có kiểu đánh dấu presentation được hỗ trợ hiển thị bởi trình duyệt, đây là kiểu đánh dấu duy nhất có thể được sử dụng cùng với HTML. Bạn cũng thể sử dụng JavaScript trên kiểu đánh presentation này giống như bạn làm với các thẻ HTML.
Phần trên mình dịch theo nguyên văn nên có lẽ sẽ hơi khó hiểu, về cơ bản nội dụng nó muốn nói là nó giống với HTML được chia thành hai kiểu đánh dấu mà ta thường hay gọi là Tags, còn lại thì là nội dụng văn bản hiển thị (content), như bạn biết thì khi Tags được hiển thị trên trình (khi chạy website) thì nó không thể hện Tags mà nó hiển thị cách trình bày của Tags ví như dùng Tags <b> thì nội dung (content) trong nó sẽ được in đạp, và bạn có thể dùng CSS hoặc JavaScript để tùy biến cho nó.
Hiểu về MathML.
Danh sách về các yếu tố của MathML bạn thể thể xem tại Mozilla Developer website. Ở tại cuối bài viết tôi cũng cung cấp các yếu tố MathML được sử dụng trong xuyên xuốt bài viết.
Yếu tố cao nhất trong MathML là thẻ <math>, vì vậy bạn hãy nhớ khi viết một công thức toán học bằng MathML thì phải đặt nó trong thẻ <math>.
<mi>, <mo>, <mn>, <ms> là những yếu tố cơ bản đại diện cho một định danh như phép toán (operator), số (number), và chuỗi ký tự toán học đại diện tương ứng. Nếu bạn để ý sẽ thấy các yếu tố MathML đều được đầu đầu bằng chữ "m" đầu tiên, khá thú vị nhỉ ^^!. Bây giờ ta sẽ đi qua một số ví dụ nhỏ để hiểu hơn về MathML cũng như cách sử dụng nó.
How to Display Superscript? Làm thế nào để hiển thị chỉ số trên?
Để hiển thị chỉ số trên ta sử dụng tags <msup> trong tags này ta sẽ có hai tags là <mi> dùng hiển thì số chính, và <mn> dùng để hiển thị chỉ số trên, như ví dụ bên dưới.
<math>
<msup>
<mi>n</mi>
<mn>7</mn>
</msup>
</math>
<msup>
<mi>n</mi>
<mn>7</mn>
</msup>
</math>
How to Display Subscript? Làm thế nào để hiển thị chỉ số dưới?
Để hiển thị chỉ số dưới ta sử dụng tags <msub> tương với <msup> ta cũng sẽ có hai tags là <mi> dùng hiển thì số chính, và <mn> dùng để hiển thị chỉ số dưới, như ví dụ bên dưới.
<math>
<msub>
<mi>n</mi>
<mn>7</mn>
</msub>
</math>
<msub>
<mi>n</mi>
<mn>7</mn>
</msub>
</math>
How to Display Fractions? Làm thế nào để hiển thị phân số?
Để hiển thị công thức phân số ta sử dụng thẻ tags <mfrace>, trong tags này ta sẽ có 2 yếu tố cùng sử dùng một tags là <mn> số ở trên là tử sổ, số ở dưới là mẫu số.
<math>
<mfrac>
<mn>7</mn>
<mn>26</mn>
</mfrac>
</math>
<mfrac>
<mn>7</mn>
<mn>26</mn>
</mfrac>
</math>
How to Display Integer Square Root? Làm thế nào để hiển thị căn bậc hai?
Để hiện thị căn bậc hai của một số trên website ta sử dụng tags <msqrt> như sau:
<math>
<msqrt>
<mn>678</mn>
</msqrt>
</math>
<msqrt>
<mn>678</mn>
</msqrt>
</math>
How to Display Root Integers? Làm thế nào để hiển thị căn bậc mũ?
Để hiện thị căn bật mũ ta sử dụng thẻ tags <mroot> như sau:
<math>
<mroot>
<mn><mo>-</mo>678</mn>
<mn>5</mn>
</mroot>
</math>
<mroot>
<mn><mo>-</mo>678</mn>
<mn>5</mn>
</mroot>
</math>
How to Display a Matrix? Làm thế nào để hiển thị một ma trận?
Chúng ta sử dụng thẻ <mo> để thêm dấu ngoặc vuông [] để bao lấy các phần tử trong matrix, và cuối cùng bao tất cả lại trong thẻ tags <mrow> như ví dụ bên dưới.
<math>
<mrow>
<mo> [ </mo>
<mtable>
<mtr>
<mtd> <mn>0</mn> </mtd>
<mtd> <mn>4</mn> </mtd>
<mtd> <mn>10</mn> </mtd>
</mtr>
<mtr>
<mtd> <mn>5</mn> </mtd>
<mtd> <mn>2</mn> </mtd>
<mtd> <mi>X</mi> </mtd>
</mtr>
<mtr>
<mtd> <mn>9</mn> </mtd>
<mtd> <mn>11</mn> </mtd>
<mtd> <mn>1</mn> </mtd>
</mtr>
</mtable>
<mo> ] </mo>
</mrow>
</math>
<mrow>
<mo> [ </mo>
<mtable>
<mtr>
<mtd> <mn>0</mn> </mtd>
<mtd> <mn>4</mn> </mtd>
<mtd> <mn>10</mn> </mtd>
</mtr>
<mtr>
<mtd> <mn>5</mn> </mtd>
<mtd> <mn>2</mn> </mtd>
<mtd> <mi>X</mi> </mtd>
</mtr>
<mtr>
<mtd> <mn>9</mn> </mtd>
<mtd> <mn>11</mn> </mtd>
<mtd> <mn>1</mn> </mtd>
</mtr>
</mtable>
<mo> ] </mo>
</mrow>
</math>
Ngoài ra chúng ta có thể sử dụng CSS để làm nổi bật X trong bảng ma trận.
mi {
color:red;
}
color:red;
}
How to Display Integral Equations? Làm thế nào để hiển thị các phương trình tích phân?
Dưới đây là một ví dụ về một loại hình cơ bản của phương trình tích phân.
Giống như HTML, MathML cũng có nhân vật và các thực thể, một trong số đó được sử dụng trong ví dụ để hiển thị các biểu tượng phi Hy Lạp. Dưới đây là ví dụ hiển thị phương trình tích phân ở trên:
<math>
<mrow>
<mrow>
<mi>f</mi>
<mo>(</mo>
<mi>x</mi>
<mo>)</mo>
</mrow>
<mo>=</mo>
<mrow>
<mmultiscripts>
<mo>∫</mo>
<mi>a</mi>
<mi>b</mi>
</mmultiscripts>
<mrow>
<mi>K</mi>
<mo>(</mo>
<mi>x</mi>
<mo>,</mo>
<mi>t</mi>
<mo>)</mo>
</mrow>
<mrow>
<mi>φ</mi>
<mo>(</mo>
<mi>t</mi>
<mo>)</mo>
</mrow>
<mi>d</mi>
<mi>t</mi>
</mrow>
</mrow>
</math>
<mrow>
<mrow>
<mi>f</mi>
<mo>(</mo>
<mi>x</mi>
<mo>)</mo>
</mrow>
<mo>=</mo>
<mrow>
<mmultiscripts>
<mo>∫</mo>
<mi>a</mi>
<mi>b</mi>
</mmultiscripts>
<mrow>
<mi>K</mi>
<mo>(</mo>
<mi>x</mi>
<mo>,</mo>
<mi>t</mi>
<mo>)</mo>
</mrow>
<mrow>
<mi>φ</mi>
<mo>(</mo>
<mi>t</mi>
<mo>)</mo>
</mrow>
<mi>d</mi>
<mi>t</mi>
</mrow>
</mrow>
</math>
Danh sách các ký tự thực thể toán học của MathML, bạn có thể xem chúng tại website của W3C
MathML Attributes - Thuộc tính MathML
Các thuộc tính của MathML cũng tương tự như các thuộc tính của HTML như ID, Class,... bên cạnh đó MathML cũng có các thuộc tính của riêng nó bạn có thể tham khảo tại website các nhà phát triển của Mozilla. Ngoài ra bạn có thể thể sử dụng thêm thư viện javascript MathJax để làm cho sinh động hơn, cái này mình chỉ nói thêm thôi ^^!.
Example MathML - Ví dụ về MathML
Reference List of MathML Elements - Danh các phần tử của MathML
| Elements | Definition |
|---|---|
<math> | Top-level MathML element |
<mi> | Displays identifiers (variables,constants,function names) |
<mn> | Displays numeric literal |
<mo> | Displays operator |
<ms> | Shows string literal |
<msup> | Attaches a superscript to a base |
<msub> | Attaches a subscript to a base |
<mfrac> | Used to display fractions |
<mroot> | Displays radicals with indices |
<msqrt> | Displays square root |
<mtable> | Displays a table or matrix |
<mtr> | Row of <mtable> |
<mtd> | Column in <mtr> |
<mrow> | Groups sub-expressions |
<mmultiscripts> | Used to add superscript, subscript, presuperscript & presubscript |
No comments:
Post a Comment