-2

I'm currently working on custom mixins to work with in SASS.

What I'm trying to achieve is working out the pixel height from a font-size and the line height. For example, I know 16px font size with a line height of 1 comes out at 22px high. The font family is Open Sans.

I've tried working out formulas to see how this comes about, but I'm struggling.

Is there a simple way to work out the literal pixel height from these two inputs?

EDIT

Yeah I was completely and utterly wrong. ~ I've changed the details.

Image added to show height shown.

Showing font height as 22

input {
  font-size: 16px;
  line-height: 1;
  font-family: "Open Sans",sans-serif;
      -webkit-appearance: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: 1px solid #7B7B7B;
    border-radius: 2px;
    width: 100%;
    background: #fff;
    font-family: "Open Sans",sans-serif;
    font-weight: 300;
    padding: 8px;
    margin: 0 0 12px;
    cursor: pointer;
    text-transform: none;
    font-size: 16px;
    font-size: 1em;
  }

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700,900">


<input type="search" class="search_field" placeholder="Search..." id="search" name="s" title="Search for:" aria-required="true" aria-invalid="false" required="">

First time putting a chunk of code into this, so hopefully this is correct.

Michał Perłakowski
  • 88,409
  • 26
  • 156
  • 177
Sjrsmile
  • 253
  • 1
  • 5
  • 20
  • The link showing my question as a duplicate does not answer my question, I've edited the question to hopefully be more clear. With the font family changed and the font size at 16px and the line height at 1, the output height is 22px. – Sjrsmile Jan 18 '16 at 16:52
  • Please post a code snippet that can reproduce your issue. – Michał Perłakowski Jan 18 '16 at 16:53
  • @Sjrsmile see the comments in my answer. And don't attach screenshots, give us a working example. However, your screenshot is cutted for more INRI!!!! – Marcos Pérez Gude Jan 18 '16 at 16:56
  • Thanks for baring with me, first time I've posted with the code snippet, that's showing the 22px height. – Sjrsmile Jan 18 '16 at 17:00
  • The snippet you share, in Firefox, I obtain 16 px of height (in calculated box model), with a padding of 16 (8 top and 8 bottom) and border of 1. `16 + 16 + 2 = 34` that's the total height of the input. Almost in firefox, all is fine. – Marcos Pérez Gude Jan 18 '16 at 17:03
  • I vote to reopen, but I haven't seen any problem – Marcos Pérez Gude Jan 18 '16 at 17:04
  • 1
    See http://stackoverflow.com/questions/7229568/input-height-differences-in-firefox-and-chrome – Michał Perłakowski Jan 18 '16 at 17:04
  • Thanks for looking into this, I appreciate I'm not the best writer in the world but that link has helped me, out, I've added a height of 16px and used 16px in the line-height and it has resolved the issue. With this info I can make a mixin as needed. – Sjrsmile Jan 18 '16 at 17:08

2 Answers2

0

You are wrong.

A font size of 16 pixels with a line height of 2, the line height is 32 pixels. 

span {
  display:inline-block;
  background:yellow;
  font-size: 16px;
  line-height: 2;
}
<span>Hello!</span>
Marcos Pérez Gude
  • 21,869
  • 4
  • 38
  • 69
0

Actually, when font size is 16px and line height is 2, pixel height is 32px. The formula is very simple: font-size * line-height.

alert($("p").height());
p {
  font-size: 16px;
  line-height: 2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>test</p>
Michał Perłakowski
  • 88,409
  • 26
  • 156
  • 177
  • Thanks for the comment, however I've updated my question as I made a bad mistake explaining myself. – Sjrsmile Jan 18 '16 at 16:51