WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] line-height: 3.692307692; ??? [twentytwelve] (23 posts)

  1. specialmachine
    Member
    Posted 1 year ago #

    I understand the basic concept of how the line-heights are normally assigned. But the explanation in the notes section of style.css does not really do a great job of explaining why this is necessary...

    line-height: 3.692307692;

    This is, of course, from

    article.sticky .featured-post {
    border-top: 4px double #ededed;
    border-bottom: 4px double #ededed;
    color: #757575;
    font-size: 13px;
    font-size: 0.928571429rem;
    line-height: 3.692307692;
    margin-bottom: 24px;
    margin-bottom: 1.714285714rem;
    text-align: center;
    }

    and...

    .main-navigation li a {
    border-bottom: 0;
    color: #6a6a6a;
    line-height: 3.692307692;
    text-transform: uppercase;
    white-space: nowrap;
    }

    ---

    I am assuming that this has something to do with preserving the vertical rhythm. That's all fine, but how does one arrive at this number? I understand there is this 12px variable having to do with the font size, and the number 24, which is the base value for $line-height... But what I don't understand his how the formula works here. I've tried it a couple of ways and I can get back to the number, but it still doesn't make sense totally. If someone could just show me how it's done, I would really, really appreciate it. I've search Google and it's not turning up anything except one other frustrated seeker of answers from Twitter.

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    In which theme is this? It looks like it's added by JavaScript.

  3. Andrew
    Forum Moderator
    Posted 1 year ago #

    notes section of style.css does not really do a great job of explaining why this is necessary...

    General CSS queries can be asked in general CSS forums such as;
    http://csscreator.com/forum
    http://www.cssforum.com.pk/
    http://css-tricks.com/forums/
    http://www.welovecss.com/
    http://www.codingforums.com/

  4. specialmachine
    Member
    Posted 1 year ago #

    This is straight out of twentytwelve.

  5. specialmachine
    Member
    Posted 1 year ago #

    Why are you marking this resolved? Not cool.

  6. Andrew
    Forum Moderator
    Posted 1 year ago #

    Why are you marking this resolved? Not cool

    I think that's a bug in the forums http://wordpress.org/support/topic/can-i-test-out-a-forum-bug?replies=1

  7. specialmachine
    Member
    Posted 1 year ago #

    Right. Okay. Sorry.

    Anyway, this is a stock twentytwelve question, and it's something that's meant, I guess, to be a good thing. So as it's new, it would be great if someone could explain it, and perhaps include it in the notes section of styles.css so it's understood. I realize all the clues are probably there, but I'm just not getting it, so would appreciate some help from anyone that's clued up.

  8. Andrew
    Forum Moderator
    Posted 1 year ago #

    Specialmachine, try this article for an explanation of the line height and search for the text excerpt, "For instance, almost right off the bat in style.css we see:".

  9. esmi
    Forum Moderator
    Posted 1 year ago #

    Straight from the Twenty Twelve theme:

    /* =Notes
    --------------------------------------------------------------
    This stylesheet uses rem values with a pixel fallback. The rem
    values (and line heights) are calculated using two variables:

    $rembase: 14;
    $line-height: 24;

    ---------- Examples

    * Use a pixel value with a rem fallback for font-size, padding, margins, etc.
    padding: 5px 0;
    padding: 0.357142857rem 0; (5 / $rembase)

    * Set a font-size and then set a line-height based on the font-size
    font-size: 16px
    font-size: 1.142857143rem; (16 / $rembase)
    line-height: 1.5; ($line-height / 16)

    ---------- Vertical spacing

    Vertical spacing between most elements should use 24px or 48px
    to maintain vertical rhythm:

    .my-new-div {
    margin: 24px 0;
    margin: 1.714285714rem 0; ( 24 / $rembase )
    }

    ---------- Further reading

    http://snook.ca/archives/html_and_css/font-size-with-rem
    http://blog.typekit.com/2011/11/09/type-study-sizing-the-legible-letter/

  10. specialmachine
    Member
    Posted 1 year ago #

    Yeah, you're not really answering the question. I know how the line-height thing works. I'm asking how did they arrive at this number when in the example they use the font size, which is in this case would be 12px to arrive at the line-height.

    line-height: 2; ($line-height / 12)

    That is, if i wanted to assign a line height of 12px!! But why are they assigning this seemingly crazy figure of 3.692307692? I just want to know what the formula was to arrive at this number. You can keep posting links, but if you don't know, just don't answer.

  11. specialmachine
    Member
    Posted 1 year ago #

    12 x 3.692307692 = 44.307692304

    That's not even a round number. So what's the point? It's not 48px (or 24px top and bottom).

  12. Andrew
    Forum Moderator
    Posted 1 year ago #

    If you use 12px font, your line height would be 2 because
    you divide $line-height (24) by the font size value.

    24 / 12 = 2
  13. specialmachine
    Member
    Posted 1 year ago #

    I just wrote that. That's the only clear thing here, but I am not trying to assign a line-height of 2. I am asking why the default line-height for the elements I posted above are as they are. And how, using this formula, one achieves that number and why?

  14. specialmachine
    Member
    Posted 1 year ago #

    When you do the math, as I've done there for you to see, it would be as if, in px, the author wanted to assign 44.307692304px as the line height. That doesn't make sense to me.

  15. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    assuming the font-size is 13px at that point, then the number would result in precisely 13 x 3.692307692 = 48 [px] line height;

    the theme's author could have chosen any other way of expressing the line height - http://www.w3schools.com/cssref/pr_dim_line-height.asp

    however, those numbers with a precision of 9 decimals are simply a tribute to 'hail o digital calculator';

    assuming
    a monitor pixel density of about 100 ppi (pixels per inch)
    and
    a 'rem' base of 14px;

    then a letter with the size of
    1rem is about 3.5mm high (on the screen);

    0.001rem is about 3.5micrometer (less than the tenth of the diamater of a human hair);

    0.000001rem is in the range of nano meters;

    0.000000001rem is in the range of pico meters - less the a tenth of the size of a single helium atom.

    whoever has written those numbers into style.css of Twenty Twelve, certainly loved precison ...

    any css size with a precision of more than two decimal figures is just not realistic.

  16. specialmachine
    Member
    Posted 1 year ago #

    Thank you, sir!!!

  17. specialmachine
    Member
    Posted 1 year ago #

    So the font size should really be 13px and not 12px? Because it's 12px if you look at hte computed styles. Could that be a mistake, or does the rem base of 14px throw things into a bit of a wobble? I have no idea if the rem base figures in here somewhere with regard to this number. Because 12 x 3.692307692 = 44.307692304 [px].

    Sorry. :)

  18. borzoid
    Member
    Posted 1 year ago #

    Thank you for all these posts - I have been trying to read up on the rem usage but I too am baffled by the depth of precision in these figures.

    I also had the question - why $rembase: 14; ?

    Would it not be much easier to calculate rem sizes throughout the theme with a base of 10? Am I missing something here? Was the number 14 chosen for a specific reason?

  19. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    I also had the question - why $rembase: 14; ?

    because in the /* =Basic structure section, the theme Twenty Twelve uses this style:

    body {
    	font-size: 14px;
    	font-size: 1rem;
    ...
  20. borzoid
    Member
    Posted 1 year ago #

    ahh - ok, Since those lines start at line 484 of the stylesheet it was sort of a Which came first, the chicken or the egg? feeling.

    in extending this further, in the reset near the top of the stylesheet the "html" font-size is set to 100% and then on line 481 html font-size is 87.5%

    is this related too or does it affect (or is affected by) the rembase calculated font sizes?

    Once I am comfortable in how they work together I can maybe move over to a rembase of 10 so that I can work with the theme easily (sans calculator).

  21. specialmachine
    Member
    Posted 1 year ago #

    Well, the default font size is 16px, as I understand it. So 87.5% of 16 is 14. I don't know if there's some smarty pants reason for choosing 14. Why not 10, as has been mentioned? Then it would be 10/16 = 62.5%

    ??

  22. borzoid
    Member
    Posted 1 year ago #

    Thank you all for the input. It's starting to fall into place for me.

  23. brian.seymour
    Member
    Posted 1 year ago #

    I don't fully understand typography's vertical-rhythm, but here are my thoughts.
    Rem units ("root em" applied to the html element) are used instead of em units, to avoid tracking an elements hierarchical context as how a user will "nest" elements in a CMS cannot be predicted.

    The pixel units are provided for a fallback for older browser that do not support rem units . The pixel units are written first in the CSS "cascade" so newer browsers that support rem overwrite the pixel units.

    The baseline rem units is normally equivalent to about 16px for what I have read. So I was at first puzzled why the theme was using 14px ($rembase). It appears that html element is then styled with 87.5% , instead of 100% (the ration of 14 to 16). I think this is done to make maintenance of vertical rhythm easier by applying the theme's suggested top and bottom margins of 24px or 48px (vs 27.428571429px and 54.857142857px).

    The precision several decimal places out may be due to CSS preprocessing using something like LESS, SASS or Stylus. Browsers are capable of reading this precision. Best practices I have read suggest not rounding these values.

Topic Closed

This topic has been closed to new replies.

About this Topic