Inleiding tot MathML - De markup-taal voor wiskunde

MathML is een opmaaktaal die kan worden gebruikt om wiskundige notaties weer te geven . U kunt MathML-tags rechtstreeks vanuit HTML5 gebruiken. Het is handig als u meer dan eenvoudige notaties van wiskunde in uw webpagina's wilt laten zien en het is vrij eenvoudig te gebruiken vanwege de eenvoud en gelijkenis met HTML .

MathML heeft twee soorten markeringen; presentatie (voor layout) en inhoud (voor betekenis). Omdat alleen de presentatie-opmaak door browsers wordt ondersteund, is dat het enige opmaaktype dat met HTML kan worden gebruikt. Je kunt er ook CSS en JavaScript op gebruiken, net als HTML.

Laten we eens naar MathML kijken.

MathML begrijpen

Er is een lijst met aanwezige MathML-elementen op de Mozilla-website voor ontwikkelaars. Ik heb ook de elementen vermeld die in de voorbeelden aan het einde van dit bericht worden gebruikt voor een snelle referentie.

Het element op het hoogste niveau in MathML is de $element,\; wanneer\; je\; MathML-code\; in\; de\; HTML\; schrijft,\; vergeet\; deze\; dan\; niet\; in\; de\; HTML-code\; te\; plaatsen$ -tags.$$

, , , zijn de basiselementen die respectievelijk een identifier, operator, nummer en string vertegenwoordigen. Merk op dat alle onderstaande MathML-elementen beginnen met de letter 'm'.

Hier zijn enkele eenvoudige voorbeelden.

Superscript en subscript weergeven

De element is voor het weergeven van superscript. Er is een voor subscripts.

$n^7$

Hoe Fracties Weer te geven

$\frac{7}{26}$

Hoe root gehele getallen weergeven

Hier is nog een eenvoudig voorbeeld voor het weergeven van root-getallen.

$\sqrt[5]{\mathrm{<mo>\; -\; </mo>\; 678}}$

Voor alleen vierkantswortel, dat is het .

Laten we nu verder gaan met meer complexe notaties, de matrix.

Hoe een matrix weer te geven

Om een ​​matrix te construeren, moeten we een tabelstructuur hebben voor rijen en kolommen. Hiervoor gebruiken we , en .

Afgezien daarvan gebruiken we de tags om de operatoren [ en ] rond de matrix toe te voegen en ze uiteindelijk allemaal in de matrix te plaatsen element, een element dat uitdrukkingen groepeert.

Dit is het eindresultaat:

$\left[\begin{array}{ccc}0& 4& 10\\ 5& 2& X\\ 9& 11& 1\end{array}\right]$

Laten we ook een beetje CSS toevoegen om ervoor te zorgen dat die 'X' opvalt in de matrix.

 mi {kleur: rood; } 

Hoe integrale vergelijkingen te tonen

Hieronder staat een voorbeeld van een basistype integrale vergelijking. De wordt gebruikt om de limieten voor de integraal toe te voegen.

Net als HTML heeft MathML ook tekens en entiteiten, waarvan er één in het voorbeeld wordt gebruikt om het Griekse phi-symbool te tonen. U kunt als volgt de bovenstaande integrale vergelijking weergeven:

$f\left(X\right)=\&Integraal;_{\mathrm{een}}^{b}K(X,t)\phi \left(t\right)dt$

Klik hier voor een lijst met MathML-karakterentiteiten om ze te vinden op de W3C-website.

MathML-kenmerken

Naast attributen die hetzelfde zijn als die van HTML (zoals id ), heeft MathML ook een reeks eigen attributen. De Mozilla-website voor ontwikkelaars heeft een verzameling MathML-kenmerken voor uw referentie. Voor fallbacks kunt u de JavaScript-bibliotheek MathJax gebruiken. Als je meer tools nodig hebt, kijk dan hier.

Ik neem afscheid van deze codepen met alle bovenstaande voorbeelden, voor uw eenvoudige referentie.

Referentielijst van MathML-elementen

Elements	Definitie
$$	Element op het hoogste niveau MathML
	Geeft ID's (variabelen, constanten, functienamen) weer
	Geeft numeriek letterlijke weer
	Geeft de operator weer
	Toont letterlijke tekenreeks
	Voegt een superscript toe aan een basis
	Voegt een subscript toe aan een basis
	Gebruikt om breuken weer te geven
	Geeft radicalen weer met indexen
	Geeft vierkantswortel weer
	Geeft een tabel of matrix weer
	Rij van
	Kolom in
	Groepen sub-uitdrukkingen
	Gebruikt om superscript, subscript, presuperscript en presubscript toe te voegen

Maak volledig geanimeerde widgets met Shift.css

Webanimatie biedt een manier om de aandacht van mensen te trekken en ze verder naar een website te trekken. Er zijn veel tools beschikbaar om gratis animaties te maken, maar Shift.css is een van de nieuwste in het stel.Het is een gratis open source framework gemaakt voor het maken van dynamische animaties in elke container

(Technische en ontwerptips)

Maak een CSS-Only Image Reveal-effect met transparante randen

Een CSS-only image reveal-effect kan op verschillende manieren worden opgelost. Het is eigenlijk vrij eenvoudig om een ​​ontwerp te coderen waarin het beeld opvalt (wordt overstroomd door) zijn vaste achtergrond - je plaatst gewoon een afbeelding op een kleiner element met een stevige achtergrond.U k

(Technische en ontwerptips)