Hezké rovnice na webové stránce

Pavel, 12.08.2016 16:00, Internet, 3 odpovědi (6298 zobrazení)

V krátkém článku si ukážeme, jak se dají zapsat matematické (chemické, ...) rovnice, aby se na webu zobrazily hezky a kultivovaně. Jedná se o inspiraci "jak na to", nejde o přesný návod krok za krokem.

1. Použitím HTML tagů

Toto je první a možná i jediná možnost, kterou používáte. Na základní zápis jednoduchých rovnic to stačí. Např. Pythagorova věta se dá prostředky HTML zapsat takto:
c<sup>2</sup>=a<sup>2</sup>+b<sup>2</sup>
Zapsat složitější rovnici jen prostředky HTML se ale zdá nemožné.

2.a Latex

Pro sazbu textu obsahující matematické symboly je dnes standardem LaTeX (výslovnost [latech]).

2.b Katex

Katex je implementací Latexu od Khan Academy (česky, anglicky) určený pro využití na webu. Pomocí Katexu zapisujeme rovnice syntaxí (způsobem zápisu) vycházející z Latexu.

Pár jednoduchých pravidel:
dolní index se zapíše za _
x_1
horní index se zapíše za ^
sin^2(x)
zlomek se zapíše frac{čitatel}{jmenovatel}
\frac{s}{t}
odmocnina se zapíše sqrt
\sqrt{x^2+y^2}

Speciální symboly se zapisují zpětným lomítkem a názvem symbolu (\frac, \sqrt, \pm, ...).

Pro použití Katexu potřebujeme přilinkovat do webové stránky dva soubory (CSS, JS)
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.6.0/katex.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.6.0/katex.min.js"></script>

Pro zápis rovnice do příslušného HTML elementu použijeme
katex.render("c = \\pm\\sqrt{a^2 + b^2}", element);

2.c Katex + Angular

Angular je moderní knihovna vhodná pro programování webových a mobilních aplikací. Pro elegantní použití Katexu v Angularu existuje knihovna Angular-Katex. Pro zápis rovnice pak použijeme nový HTML tag <katex></katex>

Knihovna angular-katex používá v tagu <katex></katex> jako řídící znak zpětné lomítko \

Ukázky

1. Webová stránka včetně všech potřebných souborů (knihoven), s ukázkou možností zápisu rovnic přímo od autora angular-katex knihovny je zde

2. Moje ukázka s několika rovnicemi je k vidění zde. Doporučuji nejprve vpravo nahoře klepnout na odkaz fork, dostanete tím svoje vlastní hřiště.
Vlevo v kódu (mezi <pre></pre>) je umístěno několik rovnic, které stačí zkopírovat vložit do inputu vpravo (náhled mobilního telefonu) a zobrazí se výsledek.
http://pc.poradna.net/file/view/26632-pc-poradna-net-katex-png

Odpovědět


PředmětAutorDatum
Re: Hezké rovnice na webové stránce JoDiK15.08.2016 10:57
Re: Hezké rovnice na webové stránce Pavel15.08.2016 11:55
Re: Hezké rovnice na webové stránce posledníss17.09.2016 17:01

TOPlist