Cum se configurează smartphone-uri și PC-uri. Portal informativ
  • Acasă
  • Interesant
  • Puteți scrie o formulă de tabel în html. Modalități de bază de a insera formule în documente html

Puteți scrie o formulă de tabel în html. Modalități de bază de a insera formule în documente html

Vlad Merjevici

Chiar nu-mi place MathML - este greoi, incomod, redundant și nu este potrivit pentru editare manuală. Încercați să schimbați rapid un caracter într-o formulă lungă și veți urî MathML. Acesta este cazul TEX, bătrânul Knut își cunoștea afacerea și a scris sistemul pentru el însuși, mai târziu TEX a devenit standardul de facto în comunitatea științifică pentru scrierea formulelor. Dacă sunteți familiarizat cu HTML și CSS, atunci înțelegerea TEX nu va fi dificilă, este intuitivă și are o sintaxă care este oarecum similară cu aceste limbaje.

Adevărat, problema rămâne cum să afișați formula pe pagină, astfel încât să fie afișată corect în toate browserele. Cel mai într-un mod universal există încă o imagine, doar că trebuie să automatizăm și să simplificăm procesul de creare a imaginilor, pentru care sunt destinate servicii diferite, despre care se va discuta mai jos.

Editor de ecuații LaTEX

Este mai bine să vă familiarizați cu lumea formulelor cu acest serviciu, deoarece are un mic editor online prin care puteți înțelege LaTEX - aceasta este o extensie a sistemului TEX cu aceeași sintaxă. După ce formula este introdusă, rezultatul poate fi văzut făcând clic pe butonul „Reda ecuația” (Fig. 1).

Orez. 1. Vedere a editorului pe pagină

Formula este adăugată în pagina dvs. prin etichetă așa cum se arată în exemplul 1.

Formula în format TEX se inserează în adresă după semnul întrebării și se scrie un rând. Dacă doriți să măriți sau să micșorați dimensiunea imaginii, sunt folosite următoarele cuvinte cheie.

  • \ mic (dimensiune 8pt)
  • \ mic (10 pt)
  • \ normal (12 pt)
  • \ mare (14 pt)
  • \ uriaș (20pt)

Cuvântul cheie trebuie inserat înaintea formulei, așa cum se arată mai jos.

Pe pagină, o astfel de formulă mărită arată astfel (Fig. 2).

Orez. 2. Formula pe pagină

Google

Din păcate, Google a încetat să mai susțină acest serviciu, iar soarta lui ulterioară este necunoscută, dar până acum continuă să funcționeze normal și poate fi utilizat.

Principiul introducerii unei formule este același ca pentru serviciul anterior. Folosim eticheta iar ca adresă ne referim la serviciul Google și îi transmitem formula în format TEX. Adresa în sine în vedere generala este scris asa.

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

Exemplul 2 arată cum se adaugă o formulă de distribuție normală.

Pentru a redimensiona formula, putem folosi Cuvinte cheie\ minuscul, \ mare etc., adăugându-le înaintea expresiei. Google are și o altă modalitate de a controla dimensiunea imaginii, pentru aceasta trebuie să adăugați parametrul chs = la adresa acesteia<ширина>X<высота>, de exemplu chs = 200x20. Vă rugăm să rețineți că raportul de aspect al imaginii poate fi foarte distorsionat dacă alegeți un raport de aspect greșit. Singurul parametru (chs = 40) este perceput ca înălțimea imaginii, iar lățimea va fi calculată automat (exemplul 3).

Exemplul 3. Dimensiunea imaginii

O imagine a formulei cu o înălțime de 40 de pixeli este prezentată în Fig. 3.

Orez. 3. Formula cu o înălțime dată

MathJax

Dacă site-ul dvs. trebuie să afișeze multe formule diferite și simboluri matematice, atunci are sens să conectați localul biblioteca MathJax... Această bibliotecă funcționează în toate browserele, inclusiv versiunile mai vechi de IE, precum și iPhone, iPad și Android, acceptă notația MathML, TEX și AsciiMath.

Pentru a utiliza MathJax, trebuie să descărcați biblioteca și toate fișierele necesare funcționării acesteia și să le copiați pe server. Puteți să o faceți mai ușor și să descărcați scriptul prin rețea, așa cum se arată mai jos.

Fișierul JS principal are aproximativ 50 KB, dar în acest proces încarcă diferite fonturi și alte scripturi. Rezultatul este de aproximativ câteva sute de kiloocteți. Pare mult, dar rețineți că majoritatea fișierelor sunt stocate în cache la prima descărcare și data viitoare fișierele nu mai sunt încărcate.

În mod implicit, formulele sunt evidențiate folosind constructele $$ ... $$ și \ [... \] și caracterele și expresiile cu minuscule prin \ (... \) (exemplul 4).

Exemplul 4. Utilizarea MathJax

MathJax

Pentru \ (a \ ne 0 \), se obțin două rădăcini ale ecuației \ (ax ^ 2 + bx + c = 0 \), pentru a găsi care folosesc formula $$ (x) _ (1,2) = ( -b \ pm \ sqrt (b ^ 2-4ac) \ peste 2a). $$

Rezultat acest exemplu prezentată în fig. 4.

Orez. 4. Formule pe pagină

Dacă dai clic pe formulă Click dreapta mouse, se va deschide un meniu prin care se pot configura niște parametri și se poate vedea sursa sub formă de TEX sau MathML (Fig. 5).

Orez. 5. Meniul contextual

MathJax vă permite să includeți formule matematice la pagini web folosind markup LaTeX, MathML sau AsciiMath, după care formulele vor fi procesate de o bibliotecă javascript și convertite în HTML, SVG sau MathML pentru a fi afișate în orice browser modern.

În prezent, MathJax vă permite să utilizați ca o copie a acestei biblioteci pe propriul serverși versiunea bibliotecii de pe CDN cdn.mathjax.org:

Configurația TeX-AMS-MML_HTMLorMML este unul dintre cele mai comune (și, prin urmare, cele mai mari) fișiere de configurare. Deși utilizarea acestei configurații este posibilă și nu eficientă, dar aici este dată pentru posibilitate pornire rapidă folosind MathJax.

Referință rapidă

Deoarece marcajul LaTeX mi s-a părut mai concis, următoarele descriu numai întrebări despre utilizarea sa atunci când lucrați cu MathJax:

  1. pentru a vedea cum sunt scrise oricare dintre formule, faceți clic dreapta pe expresie și alegeți „Show Math As> TeX Commands” (nu sunt afișate caractere separatoare);
  2. a afișa formule într-un bloc separat includeți-l în delimitatori $$ ... $$ sau \ [... \]. \ [\ sum_ (i = 0) ^ n i ^ 2 = \ frac ((n ^ 2 + n) (2n + 1)) (6) \]
  3. a afișa formule în interiorul unui șirîncadrează-l în delimitatori \ (... \). De exemplu, \ (\ sum_ (i = 0) ^ n i ^ 2 = \ frac ((n ^ 2 + n) (2n + 1)) (6) \)... Rețineți că delimitatorii $ ... $ nu sunt acceptați în mod implicit, deoarece semnele unice de dolar pot apărea în text și pot cauza convertirea incorect a textului într-o formulă;
  4. a afișa litere ale alfabetului grecesc, utilizați \ alpha, \ beta, ..., \ omega: \ (\ alpha \), \ (\ beta \), ..., \ (\ omega \). Pentru majuscule folosiți \ Gamma, \ Delta, ..., \ Omega: \ (\ Gamma \), \ (\ Delta \), ..., \ (\ Omega \);
  5. pentru superscripte și subscripte utilizați ^ și _. De exemplu, x_i ^ 2: \ (x_i ^ 2 \);
  6. grup... Superindicele, indicele și alte operațiuni se aplică numai următorului „grup”. Un „grup” este fie un singur caracter, fie orice formulă inclusă în bretele(...). Dacă faci 10 ^ 10, vei obține în mod neașteptat \ (10 ​​​​^ 10 \). Dar 10 ^ (10) îți va oferi probabil ceea ce ți-ai dorit: \ (10 ​​​​^ (10) \). Folosiți acolade pentru a include o formulă care se aplică litere mari sau mici: x ^ 5 ^ 6 va genera o eroare; (x ^ y) ^ z se potrivește cu \ ((x ^ y) ^ z \) și x ^ (y ^ z) se potrivește cu \ (x ^ (y ^ z) \). Observați diferența dintre x ^ i ^ 2 \ (x_i ^ 2 \) și x_ (i ^ 2) \ (x_ (i ^ 2) \);
  7. paranteze... Caracterele simple () creează paranteze și paranteze \ ((2 + 3) \). Folosiți \ (și \) pentru a afișa acolade \ (\ (\) \).
    Parantezele descrise mai sus nu se scalează cu formula. Adică, dacă tastați (\ frac (\ sqrt x) (y ^ 3)), paranteze rotunde va fi prea mic: \ ((\ frac (\ sqrt x) (y ^ 3)) \). Folosind \ stânga (și \ dreapta) va redimensiona automat parantezele la dimensiunea formulei pe care o înconjoară: \ stânga (\ frac (\ sqrt x) (y ^ 3) \ dreapta) se potrivește \ (\ stânga (\ frac (\ sqrt x) (y ^ 3) \ dreapta) \)... \ stânga și \ dreapta se aplică tuturor următoarelor tipuri de paranteze: (și) \ (\ stânga (x \ dreapta) \), [și] \ (\ stânga \), \ (și \) \ (\ stânga \ (x \ dreapta \) \), | \ (\ stânga | x \ dreapta | \), \ langle și \ rangle \ (\ stânga \ langle x \ dreapta \ rangle \), \ lceil și \ rceil \ (\ stânga \ lceil x \ dreapta \ rceil \) și \ lfloor și \ rfloor \ (\ stânga \ lfloor x \ dreapta \ rfloor \).
    Există, de asemenea, paranteze invizibile indicate de. : \ stânga. \ frac12 \ dreapta \ rbrace se potrivește \ (\ stânga. \ frac12 \ dreapta \ rbrace \);
  8. sume și integrale\ sum și \ int; indicele este limita inferioară și indicele este limita superioară. De exemplu, \ sum_1 ^ n \ (\ sum_1 ^ n \). Nu uitați (...) dacă limitele sunt mai mult de un caracter. De exemplu, \ sum_ (i = 0) ^ \ infty i ^ 2 se potrivește cu \ (\ sum_ (i = 0) ^ \ infty i ^ 2 \). La fel \ prod \ (\ prod \), \ int \ (\ int \), \ bigcup \ (\ bigcup \), \ bigcap \ (\ bigcap \), \ iint \ (\ iint \);
  9. fractii... Există două moduri de a crea o fracție. \ frac ab se va aplica următoarelor două grupuri și va genera următorul \ (\ frac ab \); pentru numărători și numitori mai complexi, folosiți (...): \ frac (a + 1) (b + 1) potrivește \ (\ frac (a + 1) (b + 1) \). Dacă numărătorul și numitorul sunt prea complexe, puteți folosi \ over, care separă grupul în care se află: (a + 1 \ over b + 1) matchs \ ((a + 1 \ over b + 1) \);
  10. fonturi
    • utilizați \ mathbb sau \ Bbb pentru aldine: \ (\ mathbb (CHNQRZ) \);
    • utilizați \ mathbf pentru bold: \ (\ mathbf (ABCDEFGHIJKLMNOPQRSTUVWXYZ) \) \ (\ mathbf (abcdefghijklmnopqrstuvwxyz) \);
    • utilizați \ mathtt pentru fontul „mașină de scris”: \ (\ mathtt (ABCDEFGHIJKLMNOPQRSTUVWXYZ) \) \ (\ mathtt (abcdefghijklmnopqrstuvwxyz) \);
    • utilizați \ mathrm pentru fontul „roman”: \ (\ mathrm (ABCDEFGHIJKLMNOPQRSTUVWXYZ) \) \ (\ mathrm (abcdefghijklmnopqrstuvwxyz) \);
    • utilizați \ mathsf pentru font sans serif: \ (\ mathsf (ABCDEFGHIJKLMNOPQRSTUVWXYZ) \) \ (\ mathsf (abcdefghijklmnopqrstuvwxyz) \);
    • utilizați \ mathcal pentru ortografie „caligrafică”: \ (\ mathcal (ABCDEFGHIJKLMNOPQRSTUVWXYZ) \);
    • utilizați \ mathscr pentru un font „script” (ca și cum ar fi scris de mână): \ (\ mathscr (ABCDEFGHIJKLMNOPQRSTUVWXYZ) \);
    • utilizați \ mathfrak pentru fontul „Fraktur” (stil german vechi): \ (\ mathfrak (ABCDEFGHIJKLMNOPQRSTUVWXYZ) \ mathfrak (abcdefghijklmnopqrstuvwxyz) \);
  11. semne de rădăcină... Folosiți \ sqrt, care se ajustează la dimensiunea argumentului: \ sqrt (x ^ 3) \ (\ sqrt (x ^ 3) \); \ sqrt (\ frac xy) \ (\ sqrt (\ frac xy) \). Pentru expresii complexe preferabil să se folosească (...) ^ (1/2);
  12. niste funcții precum „lim”, „sin”, „max”, „ln”, etc., folosesc de obicei fontul „roman” (drept) în loc de „italian” (italic). Folosiți \ lim, \ sin etc. pentru a obține ceva de genul \ sin x \ (\ sin x \), nu sin x \ (sin x \). Utilizare indicele pentru a atașa etichete suplimentare la \ lim: \ lim_ (x \ la 0) \ [\ lim_ (x \ la 0) \]
  13. exista si el un numar mare de caractere și simboluri speciale pentru a le enumera pe toate aici. Unele dintre cele mai frecvent utilizate sunt:
    • \ lt \ gt \ le \ ge \ neq \ (\ lt \, \ gt \, \ le \, \ ge \, \ neq \)... Puteți folosi \ nu pentru a pune o bară oblică pe aproape orice: \ nu \ lt \ (\ nu \ lt \), dar deseori arată urât;
    • \ ori \ div \ pm \ mp \ (\ ori \, \ div \, \ pm \, \ mp \). \ cdot se potrivește cu punctul central: \ (x \ cdot y \);
    • \ cup \ cap \ setminus \ subset \ subseteq \ subsetneq \ supset \ în \ notin \ emptyset \ varnothing \ (\ cup \, \ cap \, \ setminus \, \ subset \, \ subseteq \, \ subsetneq \, \ supset \, \ în \, \ notin \, \ emptyset \, \ varnothing \);
    • (n + 1 \ alege 2k) sau \ binom (n + 1) (2k) \ ((n + 1 \ alege 2k) \);
    • \ to \ rightarrow \ leftarrow \ Rightarrow \ Leftarrow \ mapsto \ (\ to \, \ rightarrow \, \ leftarrow \, \ Rightarrow \, \ Leftarrow \, \ mapsto \);
    • \ land \ lor \ lnot \ forall \ există \ top \ bot \ vdash \ vDash \ (\ land \, \ lor \, \ lnot \, \ forall \, \ există \, \ top \, \ bot \, \ vdash \, \ vDash \);
    • \ star \ ast \ oplus \ circ \ bullet \ (\ star \, \ ast \, \ oplus \, \ circ \, \ bullet \);
    • \ aproximativ \ sim \ simeq \ cong \ equiv \ prec \ (\ aproximativ \, \ sim \, \ simeq \, \ cong \, \ echiv \, \ prec \);
    • \ infty \ aleph_0 \ (\ infty \, \ aleph_0 \) \ nabla \ partial \ (\ nabla \, \ partial \) \ Im \ Re \ (\ Im \, \ Re \);
    • pentru comparații modulare folosiți \ pmod, de exemplu a \ equiv b \ pmod n \ (a \ equiv b \ pmod n \);
    • \ ldots se potrivește cu punctele de suspensie în \ (a_1, a_2, \ ldots, a_n \); \ cdots se potrivește cu punctele de suspensie în \ (a_1 + a_2 + \ cdots + a_n \);
    • unele litere grecești au o ortografie pentru o variabilă: \ epsilon \ varepsilon \ (\ epsilon \, \ varepsilon \), \ phi \ varphi \ (\ phi \, \ varphi \), etc. „Script” (scris de mână) l in literă mică: \ ell \ (\ ell \).

    Detexify vă permite să desenați un caracter pe o pagină web și apoi să enumere caractere \ (\ TeX \) care seamănă cu cel desenat. Nu este garantat să funcționeze și în MathJax, dar este un loc bun pentru a începe căutarea. Pentru a verifica dacă o comandă este acceptată, consultați lista curentă de comenzi acceptate \ (\ LaTeX \) pe MathJax.org.

  14. goluri... De obicei, MathJax decide singur cum să folosească spațiile în formule folosind un set complex de reguli. Imprimarea spațiilor suplimentare în formule nu va modifica numărul de spații pe care MathJax le adaugă formulei: a␣b și a␣␣␣␣b se potrivesc cu \ (a b \). Pentru a adăuga mai multe spații, utilizați \, pentru spații înguste \ (a \, b \) sau \; pentru un spatiu larg \ (a \; b \). \ quad și \ qquad se potrivesc lacune mari\ (a \ quad b \), \ (a \ qquad b \).
    Pentru a folosi text simplu, utilizați \ text (...): \ (\ (x \ în s \ mid x \ text (este foarte mare) \) \);
  15. accente și diacritice... Folosiți \ hat pentru un singur caracter \ (\ hat x \), \ widehat pentru formula \ (\ widehat (xy) \) (dar dacă faceți caracterul prea lat, va arăta ridicol). În mod similar, \ bar \ (\ bar x \) și \ overline \ (\ overline (xyz) \) și \ vec \ (\ vec x \) și \ overrightarrow \ (\ overrightarrow (xy) \) și \ overleftrightarrow \ ( \ overleftrightarrow (xy) \). Pentru puncte ca \ (\ frac d (dx) x \ dot x = \ dot x ^ 2 + x \ ddot x \), utilizați \ dot și \ ddot;
  16. Simboluri speciale folosit pentru a interpreta MathJax poate fi ecranat folosind caracterul \: \ $ \ (\ $ \), \ (\ (\ (\), \ _ \ (\ _ \) etc. Dacă doriți caracterul \, trebuie să utilizați \ backslash \ (\ backslash) \), deoarece \\ se potrivește cu o linie nouă.

Înainte de HTML5, folosirea formulelor era o pedeapsă. Judecați singuri: în 2005 era necesar să aveți oricare browser special, sau împărțiți textul în HTML real și inserați din imagini sau PDF. Căutarea și alte operațiuni de editare și/sau afișare pe ecran/hârtie a fost o sarcină ambiguă, căreia i-au fost consacrate monografii întregi.

În 2012, era deja mai ușor. Acum puteți conecta pluginurile necesare (Firemath pentru FireFox și Daum Equation Editor pentru Chrome). Dar ambiguitatea standardelor (și a suportului) a forțat de fapt să scrie același articol pentru fiecare dintre browsere (și pentru versiunile acestora). Sau salutați utilizatorii cu un salut magic „Browserul dumneavoastră trebuie să fie actualizat/suplimentat cu o extensie”.

Incomod? - Da! A durat mult timp pentru a găsi soluție unică? - Da! Te face să te gândești ce tip de înregistrare este mai bun (prezentare sau conținut), ce convertor să folosești (și sunt doar vreo duzină și jumătate cunoscute)? - DA! DA! DA!

Drept urmare, munca de publicare s-a transformat în stăpânirea a două sau trei lexiconi de marcare și în studierea muncii a cel puțin unui program de transcoder.

Acum, odată cu apariția HTML5, lucrurile au devenit mult mai ușoare. Are un container nou .
Fiecare instanță MathML validă trebuie să fie în interiorul acestui container.
Nu permite atașamente, dar în interior pot exista număr arbitrar alti copii.

Atributele etichetei

Pe lângă următoarele atribute, eticheta acceptă orice atribute din „> .

clasă, id, stil
Când este utilizat împreună cu foile de stil.
dir
Specifică direcția formulei: ltr - de la stânga la dreapta sau rtl - de la dreapta la stânga.
ref
Folosit pentru a seta un hyperlink către URI-ul specificat.
fond de matematică
Culoare de fundal. Puteți utiliza nume de culori #rgb, #rrggbb și HTML.
culoarea matematică
Culoarea textului. Puteți utiliza nume de culori #rgb, #rrggbb și HTML.
afişa
Acest atribut definește metoda de ieșire. Valori posibile:

  • bloc- înseamnă că acest element va fi afișat în afara intervalului curent de text, ca un bloc care poate fi localizat oriunde fără a modifica sensul textului;
  • inline înseamnă că acest element va fi afișat în intervalul curent de text și nu poate fi mutat din el fără a modifica valoarea acestui text.

Valoarea implicită este inline.

Modul

Atribut de afișare depreciat.
Valorile posibile sunt afișarea (care are același efect ca afișarea = „bloc”) și inline.
revărsare
Determină modul în care se comportă expresia dacă textul este prea lung pentru a se încadra în intervalul de lățime specificat.
Valori posibile: linebreak (implicit), scroll, elide, truncate, scale.

Exemple de

Prezentare în HTML5

MathML în HTML5 A 2 + b 2 = c 2

Reprezentare XHTML

MathML în XHTML A 2 + b 2 = c 2
Note: Documentele XHTML cu MathML trebuie trimise ca cerere / xhtml + xml. Puteți realiza acest lucru cu ușurință adăugând extensia .xhtml pentru fișierele locale. Pentru serverele Apache, puteți seta fișierul .htaccess pentru această extensie la tipul MIME corect. Deoarece am salvat MathML ca document XML, trebuie să ne asigurăm că documentul XML este bine format.

Suport pentru browser

Suport pentru browser

Versiuni complete
Element Crom Firefox (Gecko) Internet Explorer Operă Safari
Descriere XHTML (doar pe 24) 1.0 (1.7 și mai sus) 9.5 5.1
Descriere HTML5 (doar pe 24) 4.0 (2.0) 5.1
dir 12.0 (12.0)
href Eroare WebKit 85733 7.0 (7.0) Eroare WebKit 85733
fond de matematică (doar pe 24) 4.0 (2.0) 5.1
culoarea matematică (doar pe 24) 4.0 (2.0) 5.1
revărsare

Versiuni mobile

Element Android Chrome pentru Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari mobil
Descriere XHTML 1.0 (1.0)
Descriere HTML5 4.0 (2.0)
dir 12.0 (12.0)
href 7.0 (7.0)
fond de matematică 4.0 (2.0)
culoarea matematică 4.0 (2.0)
revărsare

Top articole similare