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ě

Ohodnoťte jako ve škole:

Průměrná známka 2,33

Našli jste v článku chybu?
Zasílat nově přidané názory e-mailem
Podnikatel.cz: Alza radí e-shopům, jak opustit Heureku

Alza radí e-shopům, jak opustit Heureku

120na80.cz: Tady se vaří padělané léky

Tady se vaří padělané léky

120na80.cz: Kontaktní čočky jako stvořené na dovolenou

Kontaktní čočky jako stvořené na dovolenou

Vitalia.cz: 7 nemocí očí, které musíte léčit včas

7 nemocí očí, které musíte léčit včas

Lupa.cz: Jak EET vidí ajťák aneb Drahá vražda UX

Jak EET vidí ajťák aneb Drahá vražda UX

DigiZone.cz: O2TV zve na souboj Ledecké s Myslivcovou

O2TV zve na souboj Ledecké s Myslivcovou

Vitalia.cz: 10 rad šéfkuchařů pro perfektní grilování

10 rad šéfkuchařů pro perfektní grilování

120na80.cz: Jak správně vytrhnout mléčný zub?

Jak správně vytrhnout mléčný zub?

Podnikatel.cz: Konečně vývar. Skoro jako od Steva Jobse

Konečně vývar. Skoro jako od Steva Jobse

Vitalia.cz: Tetanus v USA – i po odřeninách

Tetanus v USA – i po odřeninách

Podnikatel.cz: Různé podoby lahve Coca–Coly. Úchvatné

Různé podoby lahve Coca–Coly. Úchvatné

DigiZone.cz: Podzim přinese sport Viasat Ultra HD

Podzim přinese sport Viasat Ultra HD

DigiZone.cz: Panasonic v Praze uvedl TV pro rok 2016

Panasonic v Praze uvedl TV pro rok 2016

DigiZone.cz: Stream představil souboj žroutů

Stream představil souboj žroutů

DigiZone.cz: V RS7 ukončila vysílání Retro Music Television

V RS7 ukončila vysílání Retro Music Television

Vitalia.cz: Mražené ryby z Makra byly falšované

Mražené ryby z Makra byly falšované

DigiZone.cz: Šlágr TV dostala pokutu 100 000 Kč

Šlágr TV dostala pokutu 100 000 Kč

120na80.cz: 10 dezinfekcí: Vede „starý dobrý“ peroxid

10 dezinfekcí: Vede „starý dobrý“ peroxid

DigiZone.cz: Šlágr TV: pokuta 100 tisíc za on-line

Šlágr TV: pokuta 100 tisíc za on-line

Vitalia.cz: Falšovaný salám v Kauflandu

Falšovaný salám v Kauflandu