Pro sázení matematických textů existují nástroje jako TeX nebo kancelářské balíky obsahující editory rovnic, např. LibreOffice, MS Office, KOffice, apod. Ale co když chci dávat rovnice třeba sem - na blog? Export celého článku do PDF? Export rovnic do obrázku? To asi není nejlepší způsob. V tomto krátkém postu ukážu, jak jsem se s problémem popral.
První věc, která člověka napadne, je vygenerovat si rovnici například v editoru rovnic v některém z kancelářských balíků a vkládat do textu vygenerované obrázky.
Pokud bych měl zájem striktně o online službu, lze použít např. QuickLaTeX, kde lze do formuláře zadat LaTeXový kód (nejen rovnice) a výstupem je zformátovaný text - rovnice jsou vygenerovány opět formou obrázku. Autor služby vyvynul i plugin pro Wordpress, takže pokud se někdo nechce namáhat, tohle je jednoznačně nejjednodušší řešení. Nevýhodu vidím v tom, že musím kvůli každé rovnici posílat požadavek na server třetí strany, což se mi nelíbí.
Na stejném principu pracuje služba Google Chart Tools, díky které lze vkládat do stránky nejen rovnice, ale i různé grafy, které se generují z vložených dat. Vše se renderuje na Googlích serverech, což je nevýhoda totožná s QuickLaTeXem.
Vzhledem k tomu, že jsem chtěl rovnice generovat lokálně, zajímal jsem se, jak to řeší Wikipedia, protože ta je vzorců plná. Wiki bohužel používá CGI aplikaci, která z LaTeXového zápisu renderuje obrázek, jenž je pak vkládán do stránky. To je problém například na tomto blogu, protože sídlím na OneBit.cz, který CGI nepodporuje (nevím z jakých důvodů).
Ještě naivnější nápad je renderování přímo LaTeXem pomocí execu z PHP aplikace - to je samozřejmě totálně bez šance, protože to mi na žádném hostingu z bezpečnostních důvodů nedovolí.
Proto jsem hledal dál a zaměřil se na řešení, která k renderování používají internetový prohlížeč - tedy technologie SVG, MathML, JavaScript, CSS.
SVG je sice pro tento účel možné použít, ale určitě se na to nehodí - když už bych chtěl XML technologii, použil bych radši MathML, které je pro tento účel přímo navrženo. V současnosti je ale problém v tom, že prohlížeče tomuto formátu nativně nerozumí a potřebují plugin, který dokáže rovnice renderovat. To není příliš uživatelsky přívětivé (asi hlavně proto používá Wiki obrázky). Další věc, která se mi na tomto přístupu nelíbí je přímo "hnusný" a "obrovský" kód, viz ukázky na Wikipedii.
Poslední možnost záchrany nabízí technologie JS & CSS. Většina knihoven, které tento způsob vykreslování používají, stojí za starou belu, ale existuje jedna výjimka a pro mě osobně i "spása", protože můžu ukončit hledání 
. Zachránce se jmenuje MathJax.
MathJax
Jedná se o knihovnu, která k renderování používá pouze JavaScript a kaskádové styly (CSS), což jsou technologie, které dnes zvládá každý prohlížeč. Výsledné rovnice jsou opravdu pěkné a na rozdíl od těch obrázkových se dají i snadno kopírovat do schránky, a to dokonce v různých formátech (stačí kliknout pravým tlačítkem myši a vybrat z nabídky). Dále umí měnit velikost znaků rovnice bez zkreslení, jako je tomu u obrázků. Knihovna podporuje syntaxe MathML i TeXu.
Jak na to?
Stáhněte si archiv s knihovnou (knihovna jako taková je docela malá, ale fonty zabírají na disku asi 120MB a obsahují přes 29 tisíc PNG obrázků - dle mé úvahy se používají v jakémsi fallback módu, takže jsem smazal celý podadresář fonts/HTML-CSS/TeX/png - zatím se zdá, že to funguje bez problémů, tak uvidíme časem, jestli mi to bude někde chybět, nebo ne). Archiv rozbalte. Adresáře docs a unpacked můžete klidně smazat. Pak vytvořte nějaký soubor.html. Do head stačí vložit cestu k hlavnímu JS souboru, např.: <script type="text/javascript" src="MathJax/MathJax.js?config=default"></script>. Od verze 1.1 musí být za cestou k souboru uvedena i konfigurace - seznam konfigurací se nachází v podadresáři config. Já vybral výchozí config/default.js.
Vše je připraveno. Teď už stačí kdekoli do textu vložit rovnici. Existují dva druhy - inline a block. Kdo zná HTML tagy div a span, tak má jasno. Kdo nezná, ten pochopí z následujícího příkladu:
Vkládaný výraz \(\sqrt{3x-1}+(1+x)^2\) je zapsaný takto:\(\sqrt{3x-1}+(1+x)^2\)Kdežto blokový výraz \[\sqrt{3x-1}+(1+x)^2\] je zapsaný takto: \[\sqrt{3x-1}+(1+x)^2\]
Rozdíl je tedy v závorkách - inline \( ... \) vs. block \[ ... \]. Rozdíl ve velikosti je způsobený tím, že u blokového zápisu jsem nastavil font-size: 200%.
To je prakticky všechno, co je pro běžné používání potřeba vědět. Více informací, včetně seznamu všech podporovaných LaTeXových příkazů, se dozvíte na oficiálních stránkách projektu: http://www.mathjax.org/ nebo v podadresáři docs/html po rozbalení archivu s knihovnou.
Seznam dalších nástrojů a knihoven lze nalézt například zde: http://sixthform.info/steve/wordpress/
Líbil se Vám článek?