text alignment with "=" sign - html

Question

I want to align the text with "=" sign, as of the picture below:
I can do it using mathjax but I want to make it using css if possible. But the way I did it is not making the equals to sign aligned one to another. I want your help.
This is what I tried,
Solution, <br>
Given, f(x) = 3x <br>
g(x) = x + 2 <br>
fog(x) = 18 <br>
To find: x = ?, <br>
Now, <br>
fog(x) = 18 <br>
or, f(x + 2) = 18 <br>
or, 3(x + 2) = 18 <br>
or, x + 2 = 6 <br>
&therefore; x = 4

Answer 1

You can use display, text-align and width in your classes:
.c-left{
text-align: right;
width: 50px;
display: inline-block;
}
.c-mid{
text-align: center;
width: 10px;
display: inline-block;
}
.c-right{
text-align: left;
width: 50px;
display: inline-block;
}
<div>
<div class="c-left">a + b</div>
<div class="c-mid">=</div>
<div class="c-right">c</div>
</div>
<div>
<div class="c-left">2a + 2b</div>
<div class="c-mid">=</div>
<div class="c-right">3c</div>
</div>
Not sure if this is what you need...

Answer 2

Your problem is arranging the text into a form that's easily style-able using CSS.
Assuming your text comes in the form of a JSON array of strings, i.e:
[
"Solution,",
"Given, f(x) = 3x",
"g(x) = x + 2",
"fog(x) = 18",
"To find: x = ?,",
"Now,",
"fog(x) = 18",
"or, f(x + 2) = 18",
"or, 3(x + 2) = 18",
"or, x + 2 = 6",
"∴ x = 4"
]
...you want a function which turns it into style-able markup.
Here's an example using vanilla Javascript and CSS grid:
[...document.querySelectorAll('math-element')].forEach(el => {
// reset, in case you run this more than once...
el.innerHTML = '';
// we need JSON.parse as dataset.text is a string
JSON.parse(el.dataset.text).forEach(text => {
const div = document.createElement('div');
// split each row by `=` sign, if it has any
text.split('=').forEach(t => {
const span = document.createElement('span');
if (text.split('=').length < 2) {
// adds `.single` to items which are single on their row
span.classList.add('single');
}
span.innerHTML = t;
el.appendChild(span);
});
// add a `<hr>` after each element
const separator = document.createElement('hr')
el.appendChild(separator);
})
})
math-element {
display: grid;
grid-template-columns: auto 1fr;
}
math-element hr {
display: none;
}
math-element span {
grid-column-start: 1;
text-align: right;
padding: 0 2px 0 1rem;
}
math-element span:not(.single) {
font-style: italic;
}
math-element span.single {
text-align: left;
padding-top: .5rem;
font-style: normal;
}
math-element span + span {
grid-column-start: 2;
text-align: left;
padding: 0 2px;
}
math-element span + span:before {
content: '=';
}
<math-element data-text='["Solution,","Given, f(x) = 3x","g(x) = x + 2","fog(x) = 18","To find: x = ?,","Now,","fog(x) = 18","or, f(x + 2) = 18","or, 3(x + 2) = 18","or, x + 2 = 6","&therefore; x = 4"]'></math-element>
You don't have to inline the value as a string, as I did, you can simply create the element(s) on the fly and run the forEach directly on the data instead.
If you find CSS grid syntax and logic confusing, you can always create a <table> with <tr> and <td>s, which will give you simpler selectors. Out of principle, I advise against it.
I used <hr>s to mark the end of each "row" (CSS grid requires all cells to be siblings). Instead, you could just nest the row contents into a single element (<div> ?) and hard-code the column widths.
Obviously, the CSS is yours to modify (i.e: remove font-style's, adjust the padding values, etc...).
A final note: if one "row" contains more than one = sign, because of this rule:
math-element span + span {
grid-column-start: 2;
}
spans 2 and 3 in a row (and subsequent, until end of row) will be displayed one below each other, each prefixed with a = sign and aligned with the rest (which is not that bad, IMHO). If you want to change this behavior, you probably want to provide a
math-element span + span + span {
grid-column-start: 3;
}
... rule, and so on. Also you'll need to change grid-template-columns to match:
math-element {
grid-template-columns: auto auto 1fr;
}
...matching the number of "columns".