Přidat článek mezi oblíbenéZasílat nové komentáře e-mailem Hezké rovnice na webové stránce

Registrovaný Pavel, , Internet, 3 komentáře (6476 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]

Předmět Autor Datum
Jen matematická výtka, ta první rovnice není v pořádku, správně má být: sin^2(\alpha)+cos^2(\alpha)=…
JoDiK 15.08.2016 10:57
JoDiK
Jo, uteklo mi to, přiznávám.
Pavel 15.08.2016 11:55
Pavel
LaTeX je hodně známý a skvělý nástroj. Nevíte někdo o webové variantě? Například, abych mohl matemat… poslední
ss 17.09.2016 17:01
ss

Jen matematická výtka, ta první rovnice není v pořádku, správně má být:
sin^2(\alpha)+cos^2(\alpha)=1

LaTeX je hodně známý a skvělý nástroj. Nevíte někdo o webové variantě? Například, abych mohl matematické rovnice psát pohodlně do html.

Zpět na články Přidat komentář k článku