Γνωρίστε την γλώσσα MathML

Η MathML είναι μια γλώσσα σήμανσης που μπορεί να χρησιμοποιηθεί για να εμφανίσετε μαθηματικές παραστάσεις στις ιστοσελίδες σας. Είναι ιδιαίτερα χρήσιμη για όταν θελήσετε να δείξετε περισσότερα από έναν απλό συμβολισμό των Μαθηματικών στις ιστοσελίδες σας, και είναι πολύ εύκολη στη χρήση, λόγω της απλότητας και της ομοιότητας με την HTML.

Η MathML έχει δύο είδη σήμανσης, την παρουσίαση (για layout) και το περιεχόμενο (για νόημα). Δεδομένου ότι από τα προγράμματα περιήγησης υποστηρίζεται μόνο η παρουσίαση, αυτό είναι και το μόνο είδος σήμανσης που μπορεί να χρησιμοποιηθεί με την HTML. Επίσης μπορείτε να χρησιμοποιήσετε την ΜathML σε CSS και JavaScript όπως ακριβώς θα κάνατε σε HTML.

Κατανόηση ΜathML

Υπάρχει μια λίστα των εντολών της ΜathML στην ιστοσελίδα Mozilla Developer. Μία λίστα με τις εντολές θα βρείτε και στο τέλος αυτού του άρθρου.

Η βασική εντολή που με αυτό ο browser σας καταλαβαίνει ότι αρχίζει ο προγραμματισμός της ΜathML είναι η <math>. Έτσι όταν γράφετε ΜathML κώδικα στην HTML, θυμηθείτε να τον βάλετε μέσα σε <math> ετικέτες.

Οι βασικές εντολές είναι οι <mi>,<mo>,<mn>,<ms> και αντιπροσωπεύουν ένα αναγνωριστικό, χειριστή, αριθμό και ένα string αντίστοιχα. Σημειώστε ότι όλες οι εντολές ΜathML κάτω ξεκινούν με το γράμμα «m».

Ας δούμε όμως μερικά απλά παραδείγματα.

Εκθετικός Αριθμός (ή αριθμός εις τη δύναμη Ν)

Η αντίστοιχη εντολή για την εμφάνιση του εκθέτη είναι η <msup>. H <msub> είναι η αντίστοιχη για δείκτη.

<math>
    <msup>
        <mi>n</mi>
        <mn>7</mn>
    </msup>
</math>

<math>
    <mfrac>
        <mn>7</mn>
        <mn>26</mn>
    </mfrac>
</math>

Εμφάνιση ρίζας ακέραιου αριθμού

Να ένα ακόμη απλό παράδειγμα για την εμφάνιση μαθηματικών συναρτήσεων.

<math>
    <mroot>
        <mn><mo>-</mo>678</mn>
        <mn>5</mn>
    </mroot>
</math>

Για τετραγωνική ρίζα μόνο υπάρχει η έτοιμη εντολή  <mrqrt>.

Τρόπος εμφάνισης Matrix

Τώρα, ας προχωρήσουμε σε πιο σύνθετες παραστάσεις, ας εμφανίσουμε ένα πίνακα (matrix).
Για την κατασκευή ενός πίνακα, θα πρέπει να έχουμε μια δομή ενός πίνακα για γραμμές και στήλες. Για το σκοπό αυτό, χρησιμοποιούμε τις εντολές <mtable>, <mtr> και <mtd>.

Πέρα από αυτό, θα χρησιμοποιήσουμε και το tag <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>

Επίσης, δείτε ότι παίξαμε λίγο με την CSS έτσι ώστε να κάνουμε κόκκινο τοι «Χ» για να ξεχωρίζει στη μήτρα.

mi {
    color:red;
}

Πως να εμφανίσετε εξισώσεις

Νομίζουμε ότι μπορούμε να πάνε ένα βήμα παρακάτω,  σε πιο προχωρημένα παραδείγματα, οπότε ας φτιάξουμε μία περίπλοκη εξίσωση. Στο παράδειγμά μας θα φτιάξουμε ένα ολοκλήρωμα (όσοι δεν ξέρετε τι είναι ολοκλήρωμα περιμένετε μέχρι την 3η Λυκείου). Η αντίστοιχη εντολή εδώ είναι η &lt;mmultiscripts&gt;

Όπως και στην HTML, η ΜathML έχει επίσης ειδικούς χαρακτήρες και σύμβολα, ένα εκ των οποίων χρησιμοποιείται στο παράδειγμα για να δείξει το Ελληνικό σύμβολο φ. Εδώ είναι ο κώδικας για να εμφανίσετε το παραπάνω ολοκλήρωμα:

<math>
    <mrow>
        <mrow>
            <mi>f</mi>
            <mo>(</mo>
            <mi>x</mi>
            <mo>)</mo>
        </mrow>
        <mo>=</mo>
        <mrow>
            <mmultiscripts>
                <mo>&Integral;</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>&phi;</mi>
                <mo>(</mo>
                <mi>t</mi>
                <mo>)</mo>
            </mrow>
            <mi>d</mi>
            <mi>t</mi>
        </mrow>
    </mrow>
</math>

Για μια λίστα με σύμβολα και ειδικούς χαρακτήρες της ΜathML μπορείτε να βρείτε στην ιστοσελίδα του W3C.

ΜathML Χαρακτηριστικά

Εκτός από τα χαρακτηριστικά που είναι τα ίδια με της HTML (όπως id), η ΜathML έχει επίσης μια σειρά από δικά της χαρακτηριστικά. Η ιστοσελίδα Developer Mozilla έχει μια συλλογή από ΜathML χαρακτηριστικά. Για επιπλέον γνώσεις, μπορείτε να χρησιμοποιήσετε τη JavaScript βιβλιοθήκη  MathJax. Εάν χρειάζεστε περισσότερα εργαλεία, ελέγξτε και αυτόν το σύνδεσμο εδώ.

Όλα τα παραπάνω παραδείγματα μπορείτε να τα ξαναδείτε συγκεντρωμένα παρακάτω. Δοκιμάστε τους διακόπτες HTML, CSS και Result: