Cropping Away Negative Impacts of Line Height

[amitu]

https://medium.com/eightshapes-llc/cropping-away-negative-impacts-of-line-height-84d744e016ce

How do we do this?

[amitu]

This is how comet (BSD) implements vertical-text-crop:

vertical-text-crop($line-height = 1.375, $font-family = 'Proxima Nova', $font-weight = 'regular', $font-style = 'normal') {
    offset-measurements = {
        'Proxima Nova regular normal': {
            top: 86,
            bottom: 74
        },
        'Proxima Nova bold normal': {
            top: 64,
            bottom: 96
        },
        'Proxima Nova regular italic': {
            top: 62,
            bottom: 98
        },
        'Droid Serif regular normal': {
            top: 66,
            bottom: 80
        },
        'Droid Serif regular italic': {
            top: 66,
            bottom: 80
        },
        'Droid Serif bold normal': {
            top: 66,
            bottom: 80
        },
        'Droid Serif bold italic': {
            top: 66,
            bottom: 80
        }
    }
    
    
    $offset-key = $font-family + ' ' + $font-weight + ' ' + $font-style;

    $offset-top = max((offset-measurements[$offset-key].top + ($line-height - 1.2) * (300 / 2)), 0) / 300;
    $offset-bottom = max((offset-measurements[$offset-key].bottom + ($line-height - 1.2) * (300 / 2)), 0) / 300;

    line-height: $line-height;

    &::before,
    &::after {
        content: '';
        display: block;
        height: 0;
        width: 0;
    }

    &::before {
        margin-bottom: -($offset-top)em;
    }

    &::after {
        margin-top: -($offset-bottom)em;
    }
}

// Legacy Line Height Mixin Deprecate in 3.0
inset-line-height-adjustment($inset-line-height = 1.4) {
    line-height: $inset-line-height;
    $offset-top = .5 * $inset-line-height + -.38;
    $offset-bottom = .5 * $inset-line-height + -.39;

    &:before,
    &:after {
        content: '';
        display: block;
        height: 0;
        width: 0;
    }
    
    &:before {
        margin-bottom: -($offset-top)em;
    }

    &:after {
        margin-top: -($offset-bottom)em;
    }
}

What is going on with this line?

$offset-top = max((offset-measurements[$offset-key].top + ($line-height - 1.2) * (300 / 2)), 0) / 300;

The offset is not a constant, and depends on line-height, wondering if this formula scales to all fonts, or only for the Proxima Nova family.