Novinky v HTML5: základy specifikace MathML 3.0

Martin Smola 14. 11. 2012

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>
621 53

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.

6378 - 128
6378 + 128
6378 / 128
6378 : 128
6378 * 128
<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>
12829

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>
12829 3

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>
b 2

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>
b max

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:

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

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ě
Našli jste v článku chybu?
Měšec.cz: Se stavebkem k soudu už (většinou) nemusíte

Se stavebkem k soudu už (většinou) nemusíte

120na80.cz: Jaké plavecké pomůcky vaše dítě ochrání?

Jaké plavecké pomůcky vaše dítě ochrání?

Měšec.cz: Udali ho na nelegální software a přišla Policie

Udali ho na nelegální software a přišla Policie

Lupa.cz: Seznam.cz sleduje stisky kláves, aby odhalil roboty

Seznam.cz sleduje stisky kláves, aby odhalil roboty

DigiZone.cz: DAB už i z Košic. A překvapivě!

DAB už i z Košic. A překvapivě!

DigiZone.cz: Jsou obchody připraveny na DVB-T2/HEVC?

Jsou obchody připraveny na DVB-T2/HEVC?

Měšec.cz: Kurzy platebních karet: vyplatí se platit? (TEST)

Kurzy platebních karet: vyplatí se platit? (TEST)

Vitalia.cz: Jak může být v uzenině 150 % masa?

Jak může být v uzenině 150 % masa?

DigiZone.cz: Ve Varech představeni i noví "Četníci"

Ve Varech představeni i noví "Četníci"

Vitalia.cz: Paní výčepní: Holka, co mluví chlapům do piva

Paní výčepní: Holka, co mluví chlapům do piva

120na80.cz: Tipy pro odvodnění organismu

Tipy pro odvodnění organismu

Vitalia.cz: Cvičení tabata: na hubnutí i posilování?

Cvičení tabata: na hubnutí i posilování?

DigiZone.cz: Skylink o půlnoci vypnul 12 525

Skylink o půlnoci vypnul 12 525

Měšec.cz: Do ostravské MHD bez jízdenky. Stačí vaše karta

Do ostravské MHD bez jízdenky. Stačí vaše karta

Podnikatel.cz: Profese budoucnosti? Úředník nepřežije

Profese budoucnosti? Úředník nepřežije

Vitalia.cz: Signál roztroušené sklerózy: brnění končetin

Signál roztroušené sklerózy: brnění končetin

Podnikatel.cz: Selhala pokladna k EET. Kdo zaplatí pokutu?

Selhala pokladna k EET. Kdo zaplatí pokutu?

Lupa.cz: eIDAS: Nepřehnali jsme to s výjimkami?

eIDAS: Nepřehnali jsme to s výjimkami?

Podnikatel.cz: Polská vejce na českém pultu Albertu

Polská vejce na českém pultu Albertu

DigiZone.cz: Android TV: s jakým pracuje rozlišením?

Android TV: s jakým pracuje rozlišením?