Margin calculation for pixel fallback incorrect

[craigmdennis]

When using REMs – as we rightly should now – Typeplate serves a pixel fallback for margin-bottom. The issue is that the value is the same for rem and px. In order to correctly calculate the fallback should the result not be multiplied by the $font-base value? As that is essentially what the REM value is doing.

Something like the following? I'm not sure where was best to introduce the multiplication.

@function measure-margin($scale, $measure, $value) {
    @if $value == "px" {
        @return (($measure/$scale) * $font-base)#{$value};
    }

    @if $value != "px" {
        @return ($measure/$scale)#{$value};
    }
}

The only time the pixel value doesn't match the REM equivalent is when the HTML font size is adjusted in media queries. There may be a way around this by calling some kind of 'reset' mixin but that is beyond the scope of this bug.

[grayghostvisuals]

First, thanks for filing this because it brings a few things to light that can be fixed. I fiddled around with what you had and actually made adjustments based on a couple other things I came across during the investigation.

CodePen Demo: http://codepen.io/grayghostvisuals/pen/50b0ca6de97cc9b603002955ad1d91c8

• line 213-220
• line 233-250

Play around w/the values for line 96 using rem, em or px and examine the output. Let me know your thoughts.

[craigmdennis]

The REM and PX margins look solid now.

There is an issue with EMs due to them being based off the text size and so doesn't match up (as we're using the same value calculated for REMs).

E.G.

font size = margin-bottom
60px = 0.4rem (and 0.4em currently)
60px = 6.4px
60px = 0.107em

I've worked out a little conversion to EMs once we have calculated the PX value. I've yet to test it thoroughly but holds up so far. Take a look here http://cdpn.io/rDHEh

It can probably be a little DRY-er

@function measure-margin($scale, $measure, $value) {
    @if $value == "px" {
        @return (($measure/$scale) * $font-base)#{$value};
    }
    @if $value == "rem" {
        @return ($measure/$scale)#{$value};
    }
    @if $value == "em" {
        @return ((($measure/$scale) * $font-base)/$scale)#{$value};
    }
}

@mixin type-scale($scale, $base, $value, $measure:"") {
    @if $value == rem {
        font-size: $scale#{px};
        font-size: context-calc($scale, $base, $value);
    } @else if $value == em {
        font-size: context-calc($scale, $base, $value);
    } @else {
        font-size: $scale#{px};
    }
    @if $measure != "" {
        @if $value == rem {
            margin-bottom: measure-margin($scale, $measure, $value: px);
        } @else if $value == em {
            margin-bottom: measure-margin($scale, $measure, $value: em);
        }
        @if $value != em {
            margin-bottom: measure-margin($scale, $measure, $value);
        }
    }
}

I got the idea from http://pxtoem.com/