Novinky v HTML5: základy specifikace MathML 3.0

14. 11. 2012
Doba čtení: 5 minut

Sdílet

Ilustrační obrázek
Autor: Depositphotos – stori
Ilustrační obrázek
Pojďme se podívat, jak vytvořit první příklady na webové stránce pomocí MathML 3.0. Ukážeme si základní tagy, kterými lze jednotlivé části matematických vzorců zapisovat a vysvětlíme si některé základní zápisy zlomků, odmocnin, horních a dolních indexů, sčítání odčítání, definici jmenného prostoru a podobně…

V minulém díle jsme si nastínili, co vlastně MathML je a k čemu ho lze využívat. Dnes se podíváme na základní sémantiku jazyka. Naučíme se se základními tagy a vyzkoušíme si zápis několika příkladů z elementární matematiky.

Nejprve si vytvoříme tzv. Document Type Definition, neboli definici typu dokumentu DTD:

<!DOCTYPE math
    PUBLIC "-//W3C//DTD MathML 3.0//EN"
           "http://www.w3.org/Math/DTD/mathml3/mathml3.dtd">

Poté co definujeme typ dokumentu, definujeme jmenný prostor. Použijeme pro to atribut xmlns, který zapíšeme do základního tagu <math>:

<math xmlns="http://www.w3.org/1998/Math/MathML">
  <mrow>...</mrow>
</math>

Jak je patrné z ukázky definice jmenného prostoru, základním prvkem MathML jazyka je párový tag <math></math>, do kterého zapisujeme veškerý matematický obsah. Dalším tagem je <mrow></mrow>, který obaluje řádek matematického obsahu. Standardně obaluje celý vzorec. Pokud zapisujeme zlomek, jmenovatel i čitatel je také samostatně obalen do tagů řádky.

Než ukážu, jak vypadá kód takového zlomku, vysvětlím zlomek. Vše, co zlomek obsahuje, obalujeme tagem <mfrac></mfrac>. Takže pokud zapisujeme zlomek, nejprve zapíšeme řádku, do ní zlomek a do zlomku první řádek (čitatel) a druhý řádek (jmenovatel), takto:

<mrow>    //řádek obalující celý náš zlomek

    <mfrac>   //tag zlomku obalující řádek s čitatelem i jmenovatelem

        <mrow>    //první řádek (čitatel)
            <mn>621</mn>    //obsah řádky (v tomto případě je v čitateli číslo 621) <mn> je tag pro zápis čísla
        </mrow>

        <mrow>    //druhá řádka (jmenovatel)
            <mn>53</mn>     //číselný obsah řádky
        </mrow>

    </mfrac>

</mrow>

<math xmlns=„http://www.w3.org/1998/Mat­h/MathML“>
<mstyle scriptminsize=„12pt“>
<mrow>
<mfrac>
<mrow>
<mn>621</mn>
</mrow>
<mrow>
<mn>53</mn>
</mrow>
</mfrac>
</mrow>
</mstyle>
</math>

V minulém díle jsem naznačil pár tagů, pro zápis čísel, identifikátorů a operátorů. Pro úplnost je zopakuji i dnes.

  • <mi></mi> – Math identifier – Tímto tagem obalujeme veškeré identifikátory (proměnné, neznámé apod…).
  • <mo></mo> – Math operator – Do tagu zapisujeme operátory jako je násobení, sčítání odčítání případně dělení, pokud ho zapisujeme lomítkem nebo dvojtečkou, pokud zapisujeme zlomkem, používáme <mfrac>.
  • <mn></mn> – Math number – Slouží k zápisu čísel v příkladu, veškeré číslice obalujeme do tohoto tagu.

Bylo by patřičné ukázat zápis i jednořádkových matematických úkonů, jako je sčítání, odčítání a podobně. Pokud chceme zapsat například sčítání dvou čísel, jednoduše otevřeme řádek. Do <mrow></mrow> zapíšeme první číslo obalené do <mn></mn>, znaménko, které obalíme do Math operator <mo></mo> a druhé číslo opět do <mn></mn>. Takto lze zapsat dělení pomocí dvojtečky nebo lomítka, násobení, kde se znaménko vynechává nebo pokud chceme zapsat hvězdičku, sčítání a odčítání. Pouze měníme znaménko.

<math xmlns=„http://www.w3.org/1998/Mat­h/MathML“>
<mstyle scriptminsize=„12pt“>
<mrow>
<mn>6378</mn>
<mo>-</mo>
<mn>128</mn>
</mrow>

<mrow>
<mn>6378</mn>
<mo>+</mo>
<mn>128</mn>
</mrow>

<mrow>
<mn>6378</mn>
<mo>/</mo>
<mn>128</mn>
</mrow>

<mrow>
<mn>6378</mn>
<mo>:</mo>
<mn>128</mn>
</mrow>

<mrow>
<mn>6378</mn>
<mo>*</mo>
<mn>128</mn>
</mrow>
</mstyle>
</math>

<mrow>
    <mn>6378</mn>   //první číslo
    <mo>-</mo> //matematické znaménko
    <mn>128</mn> //druhé číslo
</mrow>

Dále se posuneme k zápisu odmocnin, které používají tagy <msqrt> nebo <mroot>. Pokud chceme zapisovat odmocninu druhou, použijeme <msqrt></msqrt>.

<mrow>
    <msqrt>   //druhá odmocnina
        <mrow>    //řádek
         <mn>12829</mn>     //číselný obsah odmocniny
        </mrow>
    </msqrt>
</mrow>

<math xmlns=„http://www.w3.org/1998/Mat­h/MathML“>
<mstyle scriptminsize=„12pt“>
<mrow>
<msqrt>
<mrow>
<mn>12829</mn>
</mrow>
</msqrt>
</mrow>
</mstyle>
</math>

Pokud zapisujeme jinou než druhou odmocninu, musíme použít tag <mroot></mroot>. Do tohoto tagu pak použijeme dvě řádky. První obsahuje číslo pod odmocninou a druhá, o jakou odmocninu se jedná.

<mrow>
    <mroot>   //druhá odmocnina
        <mrow>    //řádek s číslem pod odmocninou
         <mn>12829</mn>     //číselný obsah odmocniny
        </mrow>
          <mrow>  //řádek s odmocninou
         <mn>3</mn>     // třetí odmocnina
        </mrow>
    </mroot>
</mrow>

<math xmlns=„http://www.w3.org/1998/Mat­h/MathML“>
<mstyle scriptminsize=„12pt“>
<mrow>
<mroot>
<mrow>
<mn>12829</mn>
</mrow>
<mrow>
<mn>3</mn>
</mrow>
</mroot>
</mrow>
</mstyle>
</math>

V tuto chvíli umíme již sčítat, odečítat, násobit a dělit, případně používat zlomky a odmocniny. Ještě bychom se mohli v tomto dílu seznámit s indexy. Horní index bývá v matematice většinou používán jako zápis exponentu. Dolní k označení nebo rozlišení jednotlivých proměnných. Pokud chceme tedy zapisovat horní index, použijeme tag <msup></msup> sup – jako latinské super/supra (nad). <msup> a <msub> funguje trochu jinak než html tagy <sup>, <sub>. U html obalujeme do tagů pouze samotné indexy, naopak v MathML obalujeme do tagů jak indexovaný základ, tak i samotný index. Zde je malá ukázka:

<mrow>
    <msup>    //otevřeme tag horního indexu
      <mi> b </mi> //zapíšeme to co bude označeno horním indexem
        <mn> 2 </mn> //jako druhý tag teprve zapíšeme samotný index
    </msup>
</mrow>

<math xmlns=„http://www.w3.org/1998/Mat­h/MathML“>
<mstyle scriptminsize=„12pt“>
<mrow>
<msup>
<mi>b</mi>
<mn>2</mn>
</msup>
</mrow>
</mstyle>
</math>

Dolní index funguje naprosto stejně jako horní, pouze použijeme tagy <msub></msub>:

<mrow>
    <msub>    //otevřeme tag horního indexu
      <mi> b </mi> //zapíšeme to, co bude označeno horním indexem
        <mn> max </mn> //jako druhý tag teprve zapíšeme samotný index
    </msub>
</mrow>

<math xmlns=„http://www.w3.org/1998/Mat­h/MathML“>
<mstyle scriptminsize=„12pt“>
<mrow>
<msub>
<mi>b</mi>
<mn>max</mn>
</msub>
</mrow>
</mstyle>
</math>

Na závěr se podíváme ještě na zápis horního i dolního indexu jedním zápisem, slouží k tomu tag <msubsup></msubsup>. Jako u předešlých indexů, zapíšeme nejprve indexovaný základ a poté, jak už napovídá název, nejprve dolní index a až následně horní index. Takto:

Školení Kubernetes

<mrow>
    <msubsup>
        <mo> &#x222B; </mo> //znak integrálu
        <mn> 0 </mn> //dolní index
        <mn> 1 </mn> //horní index
        </msubsup>
</mrow>

<math xmlns=„http://www.w3.org/1998/Mat­h/MathML“>
<mstyle scriptminsize=„16pt“>
<mrow>
<msubsup>
<mo> ∫</mo>
<mn> 0 </mn>
<mn> 1 </mn>
</msubsup>
</mrow>
</mstyle>
</math>

Zde bych chtěl vyložit nejpodstatnější tagy jazyka MathML tak, aby následující tabulka sloužila jako shrnutí vysvětlených pojmů:

<math></math> Základní tag, obalující MathML
<mi></mi> Matematický identifikátor
<mo></mo> Matematický operátor
<mrow></mrow> Řádek

<mn></mn>

Číslo
<mfrac></mfrac> Zlomek
<msqrt></msqrt> Druhá odmocnina
<mroot></mroot> N-tá odmocnina
<msub></msub> Dolní index – subscript
<msup></msup> Exponent (horní index) – superscript
<msubsup></msubsup> Zápis dolního i horního indexu současně

Autor článku

Martin Smola je studentem ČVUT, věnuje se programování, web-designu, grafice a psaní článků. Pracuje na vlastním projektu 4dgraph.com, který umožňuje sdílet fotky, grafiku a textury.



Nejnovější články