5

I have a text that is uppercase, e.g. ABC.
As it is uppercase, all characters have the same height.
I also have a container (div) with fixed height, e.g. 100px.

How do I make this text fill it vertically, so each letter is exactly 100 pixels high?

I tried font-size: 100px, but it does not fill the container (there are gaps above and below).
See http://jsfiddle.net/6z8un/1/ for an example.

UPDATE 1:
Let's assume all characters actually have the same height (difference either does not exist or is negligible). Otherwise the question does not make much sense.

UPDATE 2:
I am pretty sure it can be solved using https://stackoverflow.com/a/9847841/39068, but so far I had no perfect solution with it. I think ascent and descent are not enough, I would need something else for the top space.

Community
  • 1
  • 1
Andrey Shchekin
  • 21,101
  • 19
  • 94
  • 162
  • 4
    That is because a Font usually has it's own whitespace. So you need to solve that with `line-height` – putvande Dec 30 '13 at 13:08
  • 1
    Uppercase letters do not generally have the same height. This should be obvious for characters like É, Å, and Ç. In many fonts, J and Q are taller than most other uppercase letters A–Z. – Jukka K. Korpela Dec 30 '13 at 13:21
  • http://stackoverflow.com/questions/14061228/remove-white-space-above-and-below-large-text-in-an-inline-block-element – Matt Whipple Dec 30 '13 at 13:23
  • I do not think http://stackoverflow.com/questions/14061228/remove-white-space-above-and-below-large-text-in-an-inline-block-element covers the possible answers well enough, it seem not to consider JS solution at all. – Andrey Shchekin Dec 30 '13 at 14:34

4 Answers4

2

line-height http://jsfiddle.net/6z8un/2/ will not solve the problem because this will not remove the whitespaces. You could apply the size by hardcoding (for me it fits with font-size of 126px) But this is different to every user (sans-serif can be configured by user/system/browser)

Windows default sans-serif font MS sans serif is different to Droid sans serif on Android or DejaVu Sans on Ubuntu.

To solve this problem, you could set a font to default, like Times New Roman, but not every system does have this font by default.

To solve this, you could use a custom font imported from a server like htttp://google.com/fonts but not every browser does support custom fonts.

I think the only way to solve this is to use an image.

But custom fonts should do their job on modern browsers too :) (e.g.: http://jsfiddle.net/6z8un/5/ )

bbuecherl
  • 1,609
  • 12
  • 20
  • This is the only answer that actually comes close to a real solution that works reliably on all browsers / systems (images) – Cerbrus Dec 30 '13 at 13:26
  • Yes, I know I can hardcode it for a given font, but I am interested in font-independent solution (I am looking into building a jQuery plugin that should work for any font). – Andrey Shchekin Dec 30 '13 at 14:03
  • You need to know the percentage of whitespace... the only way you could achieve this for every font, would be analiying the font files, and this will be a very slow code... – bbuecherl Dec 30 '13 at 14:37
0

Use this code. I hope this can help you.

<div class="outer"><div class="inner">ABC</span></div>

.outer {
    margin: 0;
    padding: 0;
    height: 75px;
    overflow-y: hidden;
}

.inner {
    font-size: 100px;
    background-color: #ccc;
    font-family: sans-serif;
    margin-top: -18px;    
}

Note: As I know whenever we use font-size the upper and lower gap is also the part of height. I mean font-size = upper gap + actual height of font + lower gap. So if we want 100px div then use font-size larger than 100.

kundan Karn
  • 226
  • 1
  • 8
  • The outer div is not `100px` high, and this depends on hardcoded height values, which may differ for browsers, fonts, and individual characters. – Cerbrus Dec 30 '13 at 13:21
  • As I know whenever we use font-size the upper and lower gap is also the part of height. I mean font-size = upper gap + actual height of font + lower gap. So if we want 100px div then use font-size larger than 100. – kundan Karn Dec 30 '13 at 13:29
  • Then add that to your answer, since the OP asked: "How do I make this text fill it vertically, so each letter is *exactly 100 pixels* high?" – Cerbrus Dec 30 '13 at 13:31
0

Is this ok?

http://jsfiddle.net/6z8un/4/

HTML:

<div><span>ABC</span></div>

CSS:

div {
    height: 100px;
    background-color: #ddd;
    font-family: sans-serif;
}
span {
    font-size:136px;
    margin-top:-25px;
    display:inline-block;
};
cretzzzu3000
  • 221
  • 1
  • 7
0

So far I made a small script that measures letter heights using canvas (would be a good thing to put on GitHub I suppose). It is currently slightly unprecise, mostly because of caching.

I have published it as a library on GitHub, see here: https://github.com/ashmind/textmetrics.

Unfortunately I did not have time to make demo work as a GitHub page yet, so I can't link to it.

Andrey Shchekin
  • 21,101
  • 19
  • 94
  • 162