Learn how to write and style mathematical formulas and notations using HTML and CSS. Discover techniques for creating accessible and visually appealing math content on web pages.
Table of Contents
Mathematical formulas and notations are essential for conveying complex information clearly and precisely. Traditionally, math content has been challenging to display on web pages. However, with advancements in HTML and CSS, it's now possible to present math in a clean and readable format. This guide will explore how to write and style mathematical formulas using HTML and pure CSS. Whether you're a web developer, educator, or student, you'll find valuable insights to enhance your web content.
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our mathematical formulas and expressions.
After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
Below is a detailed explanation of the code:
HTML Structure
1. Document Type and Language
<!DOCTYPE html> <html lang="en">
<!DOCTYPE html>
declares the document type as HTML5.<html lang="en">
specifies that the language of the document is English.
2. Head Section
<head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Mathematical Formulas</title> <link rel="stylesheet" href="styles.css" /> </head>
<meta charset="UTF-8" />
sets the character encoding to UTF-8.<meta http-equiv="X-UA-Compatible" content="IE=edge" />
ensures compatibility with Internet Explorer.<meta name="viewport" content="width=device-width, initial-scale=1.0" />
sets the viewport to make the webpage responsive.<title>
Mathematical Formulas</title>
sets the title of the webpage.<link rel="stylesheet" href="styles.css" />
links an external CSS file (styles.css) for styling.
3. Body Section
<body>
- The
<body>
tag encloses the main content of the webpage.
Mathematical Formulas and Expressions
4. Quadratic Formula
<div class="math showcase"> x = <span class="frac"> <span> - b ± <span class="sqrt">b<sup>2</sup> - 4ac</span></span> <span>2a</span> </span> </div>
- This block displays the quadratic formula.
class="math showcase"
applies styles to make the formula visually appealing.class="frac"
andclass="sqrt"
style the fraction and square root portions of the formula, respectively.
5. Braces (Parentheses, Square Brackets, Curly Braces)
<div class="math showcase"> braces = <span class="surround round"><span class="frac"><span>round</span><span>is usual</span></span></span> + <span class="surround square"><span class="frac"><span>square</span><span>matrix?</span></span></span> + <span class="surround curly"><span class="frac"><span>curly</span><span>much better</span></span></span> </div>
- This block displays different types of braces.
class="surround round"
,class="surround square"
, andclass="surround curly"
style the parentheses, square brackets, and curly braces, respectively.
6. Summation Formula
<div class="math showcase"> <span class="cs"> <sup>n</sup> <span class="big">∑</span> <sub>i = 0</sub> </span> i<sup>3</sup> = <span class="surround round"><span class="frac"><span>n(n+1)</span><span>2</span></span></span> </div>
- This block displays a summation formula.
class="cs"
styles the summation symbol and its limits.class="big">∑
applies specific styling to the summation symbol.class="surround round"
styles the fraction within parentheses.
7. Vector
<div class="math showcase"> <span class="arrow">vector</span> = <span class="surround round vec"><span>1</span><span>2</span><span>-3</span></span> </div>
- This block displays a vector.
class="arrow"
andclass="surround round vec"
style the text "vector" and the vector elements, respectively.
8. Matrix
<div class="math showcase"> matrix = <span class="surround square matrix" style="--c: 3"> <span>1</span><span>2</span><span>3</span> <span>4</span><span>5</span><span>6</span> <span>7</span><span>8</span><span>9</span> </span> </div>
- This block displays a 3x3 matrix.
class="surround square matrix"
styles the matrix with square brackets.style="--c: 3"
sets a CSS variable to define the number of columns.
9. System of Equations
<div class="math showcase"> <span class="surround sys matrix" style="--c: 5"> <span>3x</span><span>+</span><span>5y</span><span>=</span><span>3</span> <span>7z</span><span>-</span><span>42x</span><span>=</span><span>6</span> <span>33y</span><span>-</span><span>z</span><span>=</span><span>9</span> </span> </div>
- This block displays a system of equations.
class="surround sys matrix"
styles the system of equations.style="--c: 5"
sets a CSS variable to define the number of columns in the matrix.
Closing Tags
</body> </html>
- These tags close the
<body>
and<html>
elements, indicating the end of the HTML document.
Step 2 (CSS Code):
Here's a detailed explanation of each part:
1. Font Import
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@200;400&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@200;400&display=swap&text=∑');
- These lines import the 'Roboto Slab' font from Google Fonts with weights 200 and 400.
- The second import specifies that the character '∑' should also be included.
2. Body Styling
body { background: #1f1d2b; color: #FFF; font-family: 'Roboto Slab', serif; }
- Sets the background color of the body to a dark shade (#1f1d2b).
- Sets the text color to white (#FFF).
- Applies the 'Roboto Slab' font to the entire body.
3. Showcase Class
.showcase { padding: 15px; text-align: center; position: relative; }
- Adds padding of 15px.
- Centers the text.
- Sets the position to relative, allowing for absolute positioning of child elements.
4. Math Fractions
.math .frac { display: inline-flex; vertical-align: middle; flex-direction: column; text-align: center; margin-top: -1px; } .math .frac > *:first-child { border-bottom: 2px solid currentColor; padding-bottom: 5px; } .math .frac > *:last-child { padding-top: 5px; } .math .frac > * { padding: 0 0.5em; }
.frac
sets up a vertical flex container for fractions.- The first child has a bottom border to represent the fraction line.
- The padding creates spacing between the fraction elements.
5. Math Square Root
.math .sqrt { border-top: 2px solid currentColor; margin-left: 10px; padding-left: 5px; position: relative; display: inline-block; } .math .sqrt::before { content: ''; position: absolute; top: -2px; left: -10px; bottom: 0px; width: 10px; background: currentColor; clip-path: polygon( 0 50%, 2px 50%, 50% calc(100% - 2px), calc(100% - 2px) 0, 100% 0, 100% 2px, calc(50% + 2px) 100%, calc(50% - 2px) 100%, 0 calc(50% + 2px) ); }
.sqrt
creates a styled square root symbol.::before
uses a clip-path to create the square root symbol before the content.
6. Surround Class
.surround { padding: 0 10px; position: relative; display: inline-block; --round: 5px; --off: 0; } .surround::before, .surround::after { content: ''; width: 5px; position: absolute; top: 0px; bottom: 0px; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; border-left: 2px solid currentColor; border-top-left-radius: var(--round); border-bottom-left-radius: var(--round); } .surround::after { right: var(--off); border-right: 2px solid currentColor; border-top-right-radius: var(--round); border-bottom-right-radius: var(--round); }
.surround
creates a bordered box around content with customizable rounded corners (--round) and offset (--off).::before
and::after
create the left and right borders with top and bottom borders.
7. Additional Surround Variants
.surround.round { --round: 10px 30px; } .surround.square { --round: 0; } .surround.curly { --round: 10px; --off: 5px; padding: 0 15px; background-image: linear-gradient(0deg, currentColor 25%, currentColor 25%), linear-gradient(0deg, currentColor 25%, currentColor 25%); background-repeat: no-repeat; background-size: 5px 2px; background-position: 0 center, 100% center; } .surround.sys { --round: 10px; --off: 5px; padding: 0 15px; background-image: linear-gradient(0deg, currentColor 25%, currentColor 25%); background-repeat: no-repeat; background-size: 5px 2px; background-position: 0 center; } .surround.sys::after { content: unset; }
.round
,.square
,.curly
, and.sys
modify the--round
and--off
properties for different border styles..curly
and.sys
add background images to create additional visual effects.
8. Combined Superscript and Subscript
.cs { position: relative; display: inline-block; } .cs > sup { position: absolute; bottom: calc(100% - 10px); left: 50%; transform: translate(-50%); width: max-content; } .cs > sub { position: absolute; top: calc(100% - 5px); left: 50%; transform: translate(-50%); width: max-content; }
.cs
allows positioning of both superscript (sup) and subscript (sub) elements.- The position properties ensure these elements are centered and placed correctly.
9. Big Class
.big { font-size: 2em; font-weight: 200; }
.big
increases the font size and sets a lighter font weight.
10. Arrow Class
.arrow { position: relative; } .arrow::before { content: ''; position: absolute; bottom: calc(100% + 5px); left: 0; right: 0; height: 2px; background: currentColor; } .arrow::after { content: ''; position: absolute; bottom: calc(100% - 1px); right: -1px; height: 5px; width: 5px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform-origin: top right; transform: rotate(45deg); }
.arrow
creates an arrow symbol using pseudo-elements for the line and arrowhead.
11. Vector Class
.surround.vec { display: inline-flex; flex-direction: column; vertical-align: middle; }
.vec
styles vectors with inline flex for vertical alignment.
12. Matrix Class
.matrix { display: inline-grid; grid-template-columns: repeat(var(--c), 1fr); grid-gap: 5px; padding: 5px 15px; vertical-align: middle; }
.matrix
uses a grid layout to display matrix elements.- The number of columns is controlled by the CSS variable
--c
.
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@200;400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@200;400&display=swap&text=∑');
body {
background: #1f1d2b;
color: #FFF;
font-family: 'Roboto Slab', serif;
}
.showcase {
padding: 15px;
text-align: center;
position: relative;
}
.math .frac {
display: inline-flex;
vertical-align: middle;
flex-direction: column;
text-align: center;
margin-top: -1px;
}
.math .frac > *:first-child {
border-bottom: 2px solid currentColor;
padding-bottom: 5px;
}
.math .frac > *:last-child {
padding-top: 5px;
}
.math .frac > * {
padding: 0 0.5em;
}
.math .sqrt {
border-top: 2px solid currentColor;
margin-left: 10px;
padding-left: 5px;
position: relative;
display: inline-block;
}
.math .sqrt::before {
content: '';
position: absolute;
top: -2px;
left: -10px;
bottom: 0px;
width: 10px;
background: currentColor;
clip-path: polygon(
0 50%,
2px 50%,
50% calc(100% - 2px),
calc(100% - 2px) 0,
100% 0,
100% 2px,
calc(50% + 2px) 100%,
calc(50% - 2px) 100%,
0 calc(50% + 2px)
);
}
.surround {
padding: 0 10px;
position: relative;
display: inline-block;
--round: 5px;
--off: 0;
}
.surround::before {
content: '';
width: 5px;
position: absolute;
top: 0px;
left: var(--off);
bottom: 0px;
border-top: 2px solid currentColor;
border-bottom: 2px solid currentColor;
border-left: 2px solid currentColor;
border-top-left-radius: var(--round);
border-bottom-left-radius: var(--round);
}
.surround::after {
content: '';
width: 5px;
position: absolute;
top: 0px;
right: var(--off);
bottom: 0px;
border-top: 2px solid currentColor;
border-bottom: 2px solid currentColor;
border-right: 2px solid currentColor;
border-top-right-radius: var(--round);
border-bottom-right-radius: var(--round);
}
.surround.round {
--round: 10px 30px;
}
.surround.square {
--round: 0;
}
.surround.curly {
--round: 10px;
--off: 5px;
padding: 0 15px;
background-image:
linear-gradient(0deg, currentColor 25%, currentColor 25%),
linear-gradient(0deg, currentColor 25%, currentColor 25%);
background-repeat: no-repeat;
background-size: 5px 2px;
background-position: 0 center, 100% center;
}
.surround.sys {
--round: 10px;
--off: 5px;
padding: 0 15px;
background-image:
linear-gradient(0deg, currentColor 25%, currentColor 25%);
background-repeat: no-repeat;
background-size: 5px 2px;
background-position: 0 center;
}
.surround.sys::after {
content: unset;
}
.cs {
position: relative;
display: inline-block;
}
.cs > sup {
position: absolute;
bottom: calc(100% - 10px);
left: 50%;
transform: translate(-50%);
width: max-content;
}
.cs > sub {
position: absolute;
top: calc(100% - 5px);
left: 50%;
transform: translate(-50%);
width: max-content;
}
.big {
font-size: 2em;
font-weight: 200;
}
.arrow {
position: relative;
}
.arrow::before {
content: '';
position: absolute;
bottom: calc(100% + 5px);
left: 0;
right: 0;
height: 2px;
background: currentColor;
}
.arrow::after {
content: '';
position: absolute;
bottom: calc(100% - 1px);
right: -1px;
height: 5px;
width: 5px;
border-top: 2px solid currentColor;
border-right: 2px solid currentColor;
transform-origin: top right;
transform: rotate(45deg);
}
.surround.vec {
display: inline-flex;
flex-direction: column;
vertical-align: middle;
}
.matrix {
display: inline-grid;
grid-template-columns: repeat(var(--c), 1fr);
grid-gap: 5px;
padding: 5px 15px;
vertical-align: middle;
}
Final Output:
Conclusion:
In conclusion, mastering the creation of mathematical formulas and notations using HTML and CSS opens up new possibilities for web developers. By leveraging these technologies effectively, developers can enhance the educational and informative value of their websites while maintaining accessibility and compatibility standards.
This structured approach provides a comprehensive guide to creating mathematical formulas and notations using HTML and CSS, catering to both beginners and experienced web developers seeking to enrich their web content with mathematical expressions.
Code by: Ivan
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊