CSS Define arbitrary centre for alignment

Question

I'm trying to create some CSS to display mathematical equations, and I've hit a bit of a snag.

Basically, I want to be able to line up fractions so that the line through the middle is centred with the rest of the code. This is easy enough if the numerator and the denominator are the same, just centre align everything, but if they're different sizes it messes up.

I considered enforcing the two to be the same size through Javascript, but it seems both inelegant and a bit silly if the numerator is several levels high and the denominator is just one line.

What I've got 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'm figuring it's likely that I'll have to handle it with Javascript, but since my knowledge of CSS is pretty weak, I thought before I did that I'd ask if there's anything I've missed which would make this work.

Cheers for any help you can offer.

Answer 1

Apply a style to a divide directly after another span:

.math-display span + .divide {
    vertical-align: -22px;    
}

https://jsfiddle.net/mqm7vr8y/4/

Answer 2

I could not think of any way to handle this in CSS for every scenario. I have this feeling that even if there is a way, it will not be elegant. The javascript approach that you outlined is not that terrible, and you can remove the ridiculous space with some additional effort.

You will need to add another inner div and make its position relative. Also, make overflow of the .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 actually break down for more complex equations :/ Might have to apply the same technique recursively, probably injecting the wrapper classes. Not elegant, but should work...

Answer 3

Instead of using a border on the top of your denominator class you could use the :before pseudo-element on your denominator and set position relative on your divide 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 make the pseudo-element take the entire width of the parent divide and be at the top of the denominator span.

https://jsfiddle.net/hv53oqd2/