Hezké rovnice na webové stránce

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.