1

In this function, ms() is another function that scales the font-size according to the golden ratio (1.618) starting from a 1em value. So, for example, the font-size of level 1 (ms(1)) is 1.618em, the second level (ms(2)) is 2.6179em, and so on.

I want the following function to return a unitless line-height for a given level.

I think that the math is right, but I cannot get it to work. I have been using Sass for a couple of days, so maybe its a basic mistake having to do with units or something like that. Nevertheless, it doesn't throw any error messages.

$line-height-ratio:2;    
@function vr($level) {
        $level-font-size: ms($level);
        $line-height-multiple: 1;
        @while ($line-height-multiple * $line-height-ratio * ms(1)) < $level-font-size {
                $line-height-multiple: $line-height-multiple + 1;
            }

        @return ($line-height-multiple * ms(1) * $line-height-ratio)/$level-font-size;
    }

So, rather than explaining the math, I would like to know if there are any mistakes with the function or how to debug it.

I'm using Sass 3.4.13.

UPDATE - Math explained

This site explains vertical rhythm and this site, modular scale. This is how the function should be applied:

h1 {
font-size: ms(4); //returns font-size scaled to a factor 4 times
line-height: vr(4); // returns the line height to contain that font size and that also is a multiple of ms(1). 
} 

h2 {
font-size: ms(3);
line-height: vr(3); 
}

In the case of my functions, modular scale is achieved with the ms() function. Given a certain level, it returns the font-size for that level. Our scale factor is set by default to 1.618 (the golden ratio) by ms(), so, if our base font size is 1em or 16 pixels, ms(1) should return 1.618em, then ms(2) 1.618^2, then ms(3) 1.618^3, etc.

In the case of the vertical rhythm function, vr(), it should return a line height that is a multiple of ms(1). The factor for the vertical rhythm is not exponential as in the case of the modular scale, it does not grow by multiplying it by a constant factor, it grows at a constant ratio.

(How do we calculate the line height?: if ms(1) is 1.618em and we want that the relation between font size and line height to be of 1:2, then the line height should be 1.618 * 2.)

Now, back to the vertical rhythm. The defined line height should grow in multiples of itself, i.e, (1.618 * 2) * 2, then (1.618 * 2) * 3, then (1.618 * 2) * 4. What determines the growth of the line height is not the level, but the font size of that level. So, if we want to style a header with 1.618^3 font size, we will have to increase the line height because (1.618 * 2) is smaller than 1.618^3. So, we increase the line height (1.618 * 2), by multiplying it by 2. That explains this: 

$line-height-multiple * $line-height-ratio * ms(1)
2 * (1.618 * 2)

That is why, for the first two levels, $line-height-multiple should be 1, since the line-height is still bigger than the font-size, but when the font size is bigger, then we should add 1 to $line-height-multiple until the line height is able to fit the font size:

        @while ($line-height-multiple * $line-height-ratio * ms(1)) < $level-font-size {
                $line-height-multiple: $line-height-multiple + 1;
            }

Now we have the problem of finding the unitless line height for the font-size of the level we are applying it. $line-height-multiple * $line-height-ratio * ms(1) represents the line height relative to the font of ms(1). Since the line height is computed in relation to the current font size, not of ms(1), we should divide it by the level font size.

UPDATE 2 - Working example

Here is a working example: http://codepen.io/anon/pen/NqxLwq. Everything is working fine (almost). My previous problem was that I defined the function after using it.

Now, the pixels get rounded so one line height is calculated to be 51.7769584655762px and rounded to 52px, and the other, 51.7770957946777px, rounded to 51px (??).

Federico
  • 3,650
  • 4
  • 32
  • 45
  • Mind explaining the math you're trying to achieve? For one, your while loop will never even run since the loop would equates to `3.236em < 2.6179` on the first run. – allejo May 11 '15 at 03:10
  • For the first few levels it should not run. Only when the font size increases (the result of ms()), the line height should increase as well to accommodate for it. I will try to explain it better in my question, but really my main problem is that I cannot debug it. The output only shows `line-height: vr(2);` when I run sass. – Federico May 11 '15 at 07:26
  • @allejo There it is. I hope it is more understandable now. – Federico May 11 '15 at 14:35
  • @allejo forget it, the problem was that I invoked the function before it was defined :P. – Federico May 11 '15 at 14:38
  • So duplicate of http://stackoverflow.com/questions/27588136/using-a-function-in-sass-is-returning-the-string-containing-the-name-of-the-func then? – cimmanon May 11 '15 at 14:40
  • @cimmanon not quite, now that I can run it, it doesn't return what it should. – Federico May 11 '15 at 14:41
  • Well, I see a lot of formulas here and a lot of input values, but I never see any of the output values you expect. Also, the site you link to that explains vertical rhythm is just a javascript toy that is broken in my browser. – cimmanon May 11 '15 at 14:44
  • @cimmanon what about now? – Federico May 11 '15 at 15:15
  • So the problem is not with Sass at all? The values generated are the values you expect? http://stackoverflow.com/questions/12423716/what-is-the-current-state-of-sub-pixel-accuracy-in-the-major-browsers and http://stackoverflow.com/questions/4308989/are-the-decimal-places-in-a-css-width-respected – cimmanon May 11 '15 at 16:01

0 Answers0