I am facing a challenge in formatting text on the web that contains equations embedded as SVG images. To address this issue, I have replaced the SVG elements with fixed-sized div in the example provided below. The SVG element is nested within a div specifically designed to house the SVG.
The equations come with a small margin (3em in the example) on the left side. This has been achieved by adjusting the margin property of the encompassing div.
In cases where the equations are large and exceed the page width, they need to be scaled down. I handle this by setting the max-width property of the svg to 100%. However, scaling down the equation while maintaining a relatively large left margin can appear awkward. Hence, I am exploring ways to reduce the margin size when the size of the SVG exceeds the allocated 100% width.
I believe there must be a simple solution to achieve this objective, but so far my search has been unsuccessful.
In the example below, the equation labeled as #equation2 is too wide and being scaled down. How can I adjust the margin of the containing div accordingly? (I am open to reconsidering the HTML structure if required.)
html {
background-color: red;
}
body {
background-color: white;
margin: 1em;
width: 20em;
}
div.math {
margin-left: 3em;
}
div.math div {
max-width: 100%;
}
#equation1 {
height: 1em;
width: 8em;
background-color: gray;
}
#equation2 {
height: 1em;
width: 30em;
background-color: gray;
}<html><body>
<p>Lorem ipsum...</p>
<div class='math'>
<div id='equation1'></div>
</div>
<p>Lorem ipsum...</p>
<div class='math'>
<div id='equation2'></div>
</div>
<p>Lorem ipsum...</p>
</body></html>