Kako podesiti pametne telefone i računare. Informativni portal
  • Dom
  • Zanimljivo
  • Moguće je napisati formulu u html tabeli. Osnovni načini umetanja formula u html dokumente

Moguće je napisati formulu u html tabeli. Osnovni načini umetanja formula u html dokumente

Vlad Merzhevich

Zaista mi se ne sviđa MathML - glomazan je, nezgodan, suvišan i nije pogodan za ručno uređivanje. Pokušajte brzo promijeniti jedan znak u dugoj formuli i mrzet ćete MathML. To je stvar sa TEX-om, stari Knut je znao svoj posao i napisao sistem za sebe, kasnije je TEX postao de facto standard u naučnoj zajednici za pisanje formula. Ako ste upoznati sa HTML-om i CSS-om, onda je TEX lak za razumevanje, intuitivan je i ima sintaksu donekle sličnu ovim jezicima.

Istina, ostaje problem kako prikazati formulu na stranici tako da je ispravno prikazana u svim pretraživačima. po najviše univerzalni način slika i dalje ostaje, samo trebamo automatizirati i pojednostaviti proces kreiranja slika za koji su namijenjene različite usluge, o čemu će biti reči u nastavku.

LaTeX uređivač jednadžbi

Upoznavanje sa svijetom formula bolje je započeti sa ovog servisa, jer ima mali online uređivač preko kojeg možete razumjeti LaTEX - ovo je proširenje TEX sistema sa istom sintaksom. Nakon što je formula upisana, rezultat se može vidjeti klikom na dugme "Render Equation" (slika 1).

Rice. 1. Pogled urednika na stranici

Formula se dodaje na vašu stranicu preko oznake kao što je prikazano u primjeru 1.

Formula u TEX formatu se ubacuje u adresu nakon upitnika i upisuje se jedan red. Ako želite povećati ili smanjiti veličinu slike, primjenjuju se sljedeće ključne riječi.

  • \tiny (veličina 8pt)
  • \small (10pt)
  • \normalno (12pt)
  • \veliki (14pt)
  • \ogroman (20pt)

Ključna riječ mora biti umetnuta prije formule, kao što je prikazano ispod.

Na stranici ovako uvećana formula izgleda (slika 2).

Rice. 2. Formula na stranici

Google

Nažalost, Google je prestao da podržava ovu uslugu, a njena dalja sudbina je nepoznata, ali za sada nastavlja normalno da radi i može se koristiti.

Princip umetanja formule je isti kao i za prethodni servis. Koristimo oznaku a kao adresu pozivamo se na Google servis i prosljeđujemo mu formulu u TEX formatu. Sama adresa opšti pogled napisano je ovako.

https://chart.googleapis.com/chart?cht=tx&chl=formula

Primjer 2 pokazuje dodavanje formule normalne distribucije.

Za promjenu veličine formule možemo koristiti ključne riječi\tiny, \large, itd., dodavanjem ih ispred izraza. Google također ima još jedan način za kontrolu veličine slike, za ovo morate dodati parametar chs= na njenu adresu<ширина>x<высота>, na primjer chs=200x20. Imajte na umu da se proporcije slike mogu jako izobličiti ako odaberete pogrešan omjer širine i visine slike. Jedini parametar (chs=40) uzima se kao visina slike, dok će širina biti izračunata automatski (primjer 3).

Primjer 3: Veličina slike

Slika formule sa visinom od 40 piksela prikazana je na sl. 3.

Rice. 3. Formula sa datom visinom

MathJax

Ako vaša stranica treba da prikaže mnogo različitih formula i matematičkih simbola, onda ima smisla povezati lokalno MathJax biblioteka. Ova biblioteka radi u svim pretraživačima, uključujući starije verzije IE, kao i na iPhone, iPad i Android, podržava MathML, TEX i AsciiMath notaciju.

Da biste koristili MathJax, morate preuzeti biblioteku i sve datoteke potrebne za njen rad i kopirati ih na svoj server. Možete to učiniti lakše i preuzeti skriptu preko mreže, kao što je prikazano ispod.

Glavna JS datoteka zauzima oko 50 Kb, ali u tom procesu učitava različite fontove i druge skripte. Rezultat je oko nekoliko stotina kilobajta. Čini se puno, ali imajte na umu da se većina datoteka kešira pri prvom preuzimanju i sljedećem prilikom se datoteke ne učitavaju.

Po defaultu, formule se razlikuju pomoću konstrukcije $$...$$ i \[...\], a znakovi i izrazi malih slova se razlikuju pomoću \(...\) (primjer 4).

Primjer 4: Upotreba MathJaxa

MathJax

Kada je \(a \ne 0\) dobijamo dva korijena jednadžbe \(ax^2 + bx + c = 0\), što se može pronaći pomoću formule $$(x)_(1,2) = ( -b \pm \ sqrt(b^2-4ac) \preko 2a).$$

Rezultat ovaj primjer prikazano na sl. 4.

Rice. 4. Formule na stranici

Ako kliknete na formulu desni klik miša, otvoriće se meni kroz koji možete konfigurisati neke parametre i pogledati izvor u obliku TEX ili MathML (slika 5).

Rice. 5. Kontekstni meni

MathJax vam omogućava da uključite matematičke formule na web stranice koje koriste oznake LaTeX, MathML ili AsciiMath, nakon čega će formule biti obrađene javascript bibliotekom i konvertovane u HTML, SVG ili MathML za prikaz u bilo kojem modernom pretraživaču.

MathJax vam trenutno dozvoljava da koristite kao kopiju ove biblioteke na vlastiti server, i verzija biblioteke sa CDN-a cdn.mathjax.org:

TeX-AMS-MML_HTML ili MML konfiguracija je jedna od najčešćih (i stoga najvećih) konfiguracijskih datoteka. Iako ova konfiguracija možda nije efikasna, uključena je ovdje radi pogodnosti. Brzi početak koristeći MathJax.

Brza referenca

Pošto mi se LaTeX markup činio sažetijim, sljedeće opisuje samo pitanja o njegovoj upotrebi pri radu sa MathJaxom:

  1. da vidite kako je bilo koja od formula napisana, kliknite desnim tasterom miša na izraz i izaberite "Prikaži matematiku kao > TeX komande" (znakovi za razdvajanje nisu prikazani);
  2. prikazati formule u posebnom bloku umotajte ga u razdjelnike $$...$$ ili \[...\] \[\sum_(i=0)^n i^2 = \frac((n^2+n)(2n+1))(6)\]
  3. prikazati formule unutar stringa zatvorite ga u \(...\) graničnike. Na primjer, \(\sum_(i=0)^n i^2 = \frac((n^2+n)(2n+1))(6)\). Imajte na umu da graničnici $...$ nisu podržani prema zadanim postavkama, jer se jednostruki znakovi dolara mogu pojaviti u tekstu i uzrokovati da se tekst pogrešno konvertuje u formulu;
  4. prikazati slova grčkog alfabeta, koristite \alpha , \beta , …, \omega: \(\alpha\) , \(\beta\) , …, \(\omega\) . Za velika slova koristite \Gamma , \Delta , …, \Omega: \(\Gamma\) , \(\Delta\) , …, \(\Omega\) ;
  5. za superscript i subscripts koristite ^ i _ . Na primjer, x_i^2: \(x_i^2\) ;
  6. grupe. Superscript, subscript i druge operacije primjenjuju se samo na sljedeću "grupu". "Grupa" je ili jedan znak ili bilo koja formula koja se nalazi u njoj proteze(...) . Ako uradite 10^10, odjednom ćete dobiti \(10^10\) . Ali 10^(10) će vam vjerovatno dati ono što ste htjeli: \(10^(10)\) . Koristite vitičaste zagrade da biste istakli formulu koja je primijenjena velikim ili malim slovima: x^5^6 će baciti grešku; (x^y)^z odgovara \((x^y)^z\) , a x^(y^z) odgovara \(x^(y^z)\) . Obratite pažnju na razliku između x^i^2 \(x_i^2\) i x_(i^2) \(x_(i^2)\) ;
  7. zagrade. Pojedinačni znakovi () stvaraju zagrade i uglaste zagrade \((2+3)\) . Koristite \( i \) za prikaz vitičastih zagrada \(\(\)\) .
    Gore opisane zagrade ne skaliraju s formulom. To jest, ako upišete (\frac(\sqrt x)(y^3)) , okrugle zagrade bit će premali: \((\frac(\sqrt x)(y^3))\) . Upotreba \left(i \right) će automatski prilagoditi veličinu zagrada veličini formule koju okružuju: \left(\frac(\sqrt x)(y^3)\right) odgovara \(\lijevo(\frac(\sqrt x)(y^3)\desno)\). \levo i \desno se primenjuju na sve sledeće tipove zagrada: (i) \(\left(x\right)\) , [ i ] \(\left\) , \( i \) \(\left\( x\ desno\)\) , | \(\left|x\right|\) , \langle i \rangle \(\lijevo\ugao x\desno\ugao\), \lceil i \rceil \(\left\lceil x\right\rceil\) , i \lfloor i \rfloor \(\lijevo\pod x\desno\rpod\).
    Postoje i nevidljive zagrade, naznačene. : \lijevo.\frac12\desno\rbrace se podudara \(\lijevo.\frac12\desno\rbrace\);
  8. sume i integrali\sum i \int ; donji indeks odgovara donjoj granici, a gornji indeks odgovara gornjoj granici. Na primjer, \sum_1^n \(\sum_1^n\) . Ne zaboravite (...) ako se ograničenja sastoje od više od jednog znaka. Na primjer, \sum_(i=0)^\infty i^2 odgovara \(\sum_(i=0)^\infty i^2\) . Slično \prod \(\prod\) , \int \(\int\) , \bigcup \(\bigcup\) , \bigcap \(\bigcap\) , \iint \(\iint\) ;
  9. razlomci. Postoje dva načina za stvaranje razlomka. \frac ab se primjenjuje na sljedeće dvije grupe i generiše sljedeće \(\frac ab\) ; za složenije brojioce i nazivnike koristite (...) : \frac(a+1)(b+1) odgovara \(\frac(a+1)(b+1)\) . Ako su brojnik i nazivnik previše složeni, možete koristiti \over , koji razdvaja grupu u kojoj se nalazi: (a+1\preko b+1) odgovara \((a+1\preko b+1)\) ;
  10. fontove
    • koristite \mathbb ili \Bbb za podebljanje na ploči: \(\mathbb(CHNQRZ)\) ;
    • koristite \mathbf za podebljano: \(\mathbf(ABCDEFGHIJKLMNOPQRSTUVWXYZ)\) \(\mathbf(abcdefghijklmnopqrstuvwxyz)\);
    • koristite \mathtt za font "pisaće mašine": \(\mathtt(ABCDEFGHIJKLMNOPQRSTUVWXYZ)\) \(\mathtt(abcdefghijklmnopqrstuvwxyz)\);
    • koristite \mathrm za "rimski" font: \(\mathrm(ABCDEFGHIJKLMNOPQRSTUVWXYZ)\) \(\mathrm(abcdefghijklmnopqrstuvwxyz)\);
    • koristite \mathsf za sans-serif font: \(\mathsf(ABCDEFGHIJKLMNOPQRSTUVWXYZ)\) \(\mathsf(abcdefghijklmnopqrstuvwxyz)\);
    • koristite \mathcal za "kaligrafsko" pisanje: \(\mathcal( ABCDEFGHIJKLMNOPQRSTUVWXYZ)\);
    • koristite \mathscr za "skriptirani" font (kao da je napisan rukom): \(\mathscr(ABCDEFGHIJKLMNOPQRSTUVWXYZ)\);
    • koristite \mathfrak za font "Fraktur" (stari njemački stil): \(\mathfrak(ABCDEFGHIJKLMNOPQRSTUVWXYZ) \mathfrak(abcdefghijklmnopqrstuvwxyz)\);
  11. korijenski znaci. Koristite \sqrt , koji se prilagođava veličini argumenta: \sqrt(x^3) \(\sqrt(x^3)\) ; \sqrt(\frac xy) \(\sqrt(\frac xy)\) . Za složeni izrazi upotreba (...)^(1/2) je poželjna;
  12. neki funkcije, kao što su "lim", "sin", "max", "ln" itd., obično koriste "rimski" (rimski) umjesto "italijanski" (kurziv). Koristite \lim , \sin itd. da dobijete nešto poput \sin x \(\sin x\) , a ne sin x \(sin x\) . Koristi indeksi da dodate dodatne oznake na \lim: \lim_(x\to 0) \[\lim_(x\to 0)\]
  13. takođe postoji veliki broj specijalnih znakova i simbola navesti ovdje od svih. Evo nekih od najčešće korištenih:
    • \lt \gt \le \ge \neq \(\lt\, \gt\, \le\, \ge\, \neq\). Možete koristiti \not da stavite kosu crtu na skoro sve: \not\lt \(\not\lt\) , ali ovo često izgleda ružno;
    • \times \div \pm \mp \(\times\, \div\, \pm\, \mp\) . \cdot odgovara tački u centru: \(x \cdot y\) ;
    • \cup \cap \setminus \subset \subsetneq \subsetneq \supset \in \notin \emptyset \varnothing \(\cup\, \cap\, \setminus\, \subset\, \subsetneq \,\subsetneq \,\supset\, \in\, \notin\, \emptyset\, \varnothing\);
    • (n+1 \odaberi 2k) ili \binom(n+1)(2k) \((n+1 \odaberi 2k)\) ;
    • \to \rightarrow \leftarrow \Rightarrow \Leftarrow \mapsto \(\to\, \desno\, \lijevo\, \desno\, \lijevo\, \mapsto\);
    • \land \lor \lnot \ zasve \postoji \top \bot \vdash \vDash \(\land\, \lor\, \lnot\, \forall\, \exists\, \top\, \bot\, \vdash\, \vDash\);
    • \star \ast \oplus \circ \bullet \(\star\, \ast\, \oplus\, \circ\, \bullet\);
    • \približno \sim \simeq \cong \equiv \prec \(\približno\, \sim \, \simeq\, \cong\, \equiv\, \prec\);
    • \infty \aleph_0 \(\infty\, \aleph_0\) \nabla \partial \(\nabla\, \partial\) \Im \Re \(\Im\, \Re\) ;
    • za poređenja po modulu koristite \pmod , npr. a\equiv b\pmod n \(a\equiv b\pmod n\) ;
    • \ldots odgovara elipsi u \(a_1, a_2, \ldots ,a_n\) ; \cdots odgovara elipsi u \(a_1+a_2+\cdots+a_n\) ;
    • neka grčka slova imaju pravopis za varijablu: \epsilon \varepsilon \(\epsilon\, \varepsilon\) , \phi \varphi \(\phi\, \varphi\) itd. "Skriptirano" (rukom pisano) l in mala slova: \ell \(\ell\) .

    Detexify vam omogućava da nacrtate lik na web stranici, a zatim navodi \(\TeX\) znakove koji izgledaju kao onaj koji ste nacrtali. Nije zagarantovano da će ovo raditi i u MathJaxu, ali ovo dobro mjesto da započnete pretragu. Da biste provjerili da li je komanda podržana, pogledajte trenutnu listu podržanih naredbi \(\LaTeX\) na MathJax.org.

  14. prostori. MathJax obično odlučuje kako koristiti razmake u formulama koristeći složen skup pravila. Štampanje dodatnih razmaka u formulama neće promijeniti broj razmaka koje MathJax dodaje formuli: a␣b i a␣␣␣␣b odgovaraju \(a b\) . Za dodavanje više razmaka koristite \, za uski razmak \(a\,b\) ili \; za široki prostor \(a\;b\) . \quad i \qquad se poklapaju velike praznine\(a\quad b\) , \(a\qquad b\) .
    Za korištenje običnog teksta koristite \text(...) : \(\(x\in s\mid x\text( je ekstra velik)\)\);
  15. akcenti i dijakritici. Koristite \hat za jedan znak \(\hat x\) , \widehat za formulu \(\widehat(xy)\) (ali ako znak učinite preširokim, izgledat će smiješno). Slično \bar \(\bar x\) i \overline \(\overline(xyz)\) , i \vec \(\vec x\) i \overrightarrow \(\overrightarrow(xy)\) i \overleftrightarrow \ ( \overleftrightarrow (xy)\) . Za bodove poput \(\frac d(dx)x\dot x = \dot x^2 + x\ddot x\), koristite \dot i \ddot ;
  16. Posebni simboli, koji se koristi za tumačenje MathJaxa može biti zaštićen, koristeći \ karakter: \$ \(\$\) , \( \(\(\) , \_ \(\_\) itd. Ako želite znak \, morate koristiti \backslash \(\ obrnuta kosa crta\) , jer \\ odgovara novom redu.

Prije HTML5, korištenje formula je bilo pravi problem. Procijenite sami: i 2005. bilo je potrebno imati pri ruci poseban pretraživač, ili podijelite tekst u odgovarajući HTML i umetnite ga iz slika ili PDF-a. Pretraga i druge operacije uređivanja i/ili izlaza na ekran/papir bio je dvosmislen zadatak, kojem su bile posvećene čitave monografije.

Već 2012. je bilo lakše. Sada možete povezati potrebne dodatke (Firemath za FireFox i Daum Equation Editor za Chrome). Ali dvosmislenost standarda (i podrške) nas je zapravo natjerala da napišemo isti članak za svaki od pretraživača (i za njihove verzije). Ili pozdravite korisnike čarobnim pozdravom "Vaš pretraživač treba da se ažurira/dodate ekstenzijom."

Neudobno? - Da! Trebalo je dosta vremena za pretragu rješenje na jednom mjestu? - Da! Tjera vas na razmišljanje o tome koja je vrsta snimanja bolja (prezentacija ili sadržaj), koji konverter koristiti (a ima ih samo desetak koji su dobro poznati)? - DA! DA! DA!

Kao rezultat toga, izdavački rad se pretvorio u razvoj dva ili tri leksikona za označavanje i proučavanje rada najmanje jednog programa transkodera.

Sada, sa pojavom HTML5, stvari su postale mnogo lakše. Ima novi kontejner .
Svaka važeća instanca MathML-a mora biti unutar ovog kontejnera.
Ne dozvoljava pričvršćivanje, ali može biti unutra proizvoljan broj ostali podređeni elementi.

Atributi oznake

Pored sljedećih atributa, oznaka prihvata sve atribute iz "> .

klasa, id, stil
Kada se koristi u kombinaciji sa stilovima.
dir
Određuje smjer formule: ltr - lijevo na desno ili rtl - desno na lijevo.
ref
Koristi se za postavljanje hiperveze na navedeni URI.
mathbackground
Boja pozadine. Možete koristiti #rgb , #rrggbb i HTML nazive boja.
boja matematike
Boja teksta. Možete koristiti #rgb , #rrggbb i HTML nazive boja.
displej
Ovaj atribut specificira izlaznu metodu. Moguće vrijednosti:

  • blok- znači da će ovaj element biti prikazan izvan trenutnog raspona teksta, kao blok koji se može postaviti bilo gdje bez promjene značenja teksta;
  • inline - znači da će ovaj element biti prikazan unutar trenutnog tekstualnog raspona i ne može se pomjeriti iz njega bez promjene vrijednosti ovog teksta.

Zadana vrijednost je inline.

način rada

Zastarjela vrijednost atributa prikaza.
Moguće vrijednosti su display (koji ima isti učinak kao display="block") i inline .
overflow
Određuje kako se izraz ponaša ako je tekst predugačak da bi se uklopio u specificirani raspon širine.
Moguće vrijednosti: prelom reda (podrazumevano), skrol, elide, skraćivanje, razmera.

Primjeri

Reprezentacija u HTML5

MathML u HTML5 a 2 + b 2 = c 2

Reprezentacija u XHTML-u

MathML u XHTML-u a 2 + b 2 = c 2
napomene: XHTML dokumenti sa MathML-om moraju se servirati kao application/xhtml+xml. To možete lako postići dodavanjem ekstenzije .xhtml vašim lokalnim datotekama. Za Apache servere, možete postaviti datoteku .htaccess za ovu ekstenziju na ispravan MIME tip. Pošto smo naš MathML sačuvali kao XML dokument, moramo biti sigurni da je XML dokument dobro oblikovan.

Podrška za pretraživač

Podrška za pretraživač

Pune verzije
Element Chrome Firefox (Gekko) Internet Explorer Opera safari
XHTML opis (tek 24.) 1.0 (1.7 i novije) 9.5 5.1
HTML5 opis (tek 24.) 4.0 (2.0) 5.1
dir 12.0 (12.0)
href WebKit greška 85733 7.0 (7.0) WebKit greška 85733
mathbackground (tek 24.) 4.0 (2.0) 5.1
boja matematike (tek 24.) 4.0 (2.0) 5.1
overflow

Mobilne verzije

Element Android Chrome za Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
XHTML opis 1.0 (1.0)
HTML5 opis 4.0 (2.0)
dir 12.0 (12.0)
href 7.0 (7.0)
mathbackground 4.0 (2.0)
boja matematike 4.0 (2.0)
overflow

Top Related Articles