CSS Define an arbitrary center for alignment
I am trying to create some CSS for displaying math equations and I am stuck a bit.
Basically, I want to be able to align fractions so that the line through the middle is centered with the rest of the code. It's easy enough if the numerator and denominator are the same, just center everything, but if they are different then it messes up.
I thought the two options should be the same size using Javascript, but it seems like it's fuzzy and a bit silly if the numerator is multiple levels and the denominator is just one line.
What I have so far: (JSFiddle: https://jsfiddle.net/mqm7vr8y/ )
CSS
.math-display {
border: 1px solid #000000;
width: 300px;
font-family: latin-modern-math;
font-size: 20pt;
text-align: center;
}
.math-display span {
display: inline-block;
vertical-align:middle;
padding: 0px 2px;
}
.math-display .divide, .math-display .numerator, .math-display .denominator {
padding: 0px 5px;
}
.math-display .divide {
display: inline-block;
text-align: center;
}
.math-display .numerator {
display: inline-block;
}
.math-display .denominator {
border-top: 1px solid #000;
display: block;
}
Html
<div class="math-display" id="mathDisplay" tabindex="0">
<span class='number'>2</span>
<span class='operator'>+</span>
<span class='number'>3</span>
<span class='variable'>x</span>
<span class='divide'>
<span class='numerator'>
<span class='letter'>d</span>
<span class='divide'>
<span class='numerator'>
<span class='letter'>d</span>
<span class='letter'>u</span>
</span>
<span class='denominator'>
<span class='letter'>d</span>
<span class='letter'>v</span>
</span>
</span>
</span>
<span class='denominator'>
<span class='letter'>d</span>
<span class='letter'>v</span>
</span>
</span>
I suppose I'll probably have to handle it with Javascript, but since my knowledge of CSS is very weak, I thought that before doing this, I would ask if there was anything I missed this work.
Cheers for any help you can offer.
source to share
I couldn't think of any way to handle this in CSS for every scenario. I have a feeling that even if there is a way, it will not be graceful. The javascript approach you mapped out isn't that scary and you can remove the ridiculous space with some extra effort.
You will need to add another inner div and make its position relative. Also, make the overflow .math-dispay
hidden. Javascript will do the rest:
$('.math-display-inner').each(function() {
// fix the height of the parent before we move content around
$(this).parent().height($(this).height());
var numH = $(this).find('> .divide > .numerator').height();
var demH = $(this).find('> .divide > .denominator').height();
var diff = demH - numH;
if (demH > numH) {
diff /= 2;
$(this).find('> .divide').css('margin-top', diff + 'px');
$(this).css('top', (-diff) + 'px');
}
else {
diff -= diff/2;
$(this).find('span + .divide').css('vertical-align', diff + 'px');
}
});
jsfiddle: https://jsfiddle.net/mqm7vr8y/5/
Edit . This will really break for more complex equations: / You might have to apply the same technique recursively, perhaps by introducing wrapper classes. Not elegant, but should work ...
source to share
Instead of using a border at the top of the denominator class, you can use: in front of the pseudo-element on your denominator and set the position relative to your split class.
.divide{
position: relative;
}
.divide .denominator:before{
content:'';
display:block;
height:1px;
width:100%;
margin:auto;
background-color:black;
position: absolute;
left:0;
}
This will cause the pseudo-element to take the full width of the parent division and end up at the top of the denominator range.
source to share