Hello, today we are going to learn how to write mathematical formulas in HTML, for example, to insert them on a website.
How to use letters in a calculation ?
The first and most important thing to learn when doing calculations with letters is to write them in such a way that they can be distinguished from the text. Thanks to HTML you can directly write letters as variables with the
<var> tag. We notice that the letters are slightly italicized and slightly bolded.
For exhibitors, HTML allows you to directly exhibitors an element without necessarily using a cascading style sheet. To do this, we will use the variable
To repeat the previous example :
After having seen the exponents, we will learn the roots, which are not necessarily easy to write. To achieve it, you must necessarily go through the CSS.
You can for example copy the code below :
The problem with this code is that the horizontal bar of the square root is realized with the border property. So in some cases, if the display window is too small, the formula may be distorted. This is why many sites prefer images to handle square roots.
First we will look at fractions, which can be problematic to create in HTML. There is no ready-made tag to create fractions, so we have to use CSS. The code is available below :
Vectors are particularly useful in physical sciences, you will see later that the code is not very complicated.
For this example, I took the fraction seen before and I applied arrows on the letters.
The vectors for capital letters are designated by the class:
oncapital and the vectors for small letters by the class:
To make a sum in HTML and CSS :
To make an integral in HTML and CSS :
I hope you enjoyed this tuto, feel free to suggest other tips in comments.
Top comments (3)
thanks a lot .I searched so such for a CSS based alternative of mathjax but i failed. now I started a project(open source obviously) alternative of mathjax . and its helps a lot.. why i ignore mathjax, benefits , pros and cons , limitations etc you will see on the beta release. after beta release I will contact you. but let me give you some hint ,
and after paste
over all thanks a lot 😘
Or maybe use MathML
Yes of course it is a good alternative