How many monospace characters fit horizontally and vertically in an element?

Question

I'm trying to find out how many monospace characters fit in an element (e.g. div), knowing the size and the font-size.

For instance I expected the result being:

{
   x: Math.floor(divWidth / fontSize)
 , y: Math.floor(divHeight / lineHeight)
}

But it seems that they are not right: for a font size 50px and width: 100px, the expected answer would be 2, but it is 3:

div {
    font-family: monospace;
    background: black;
    color: lightgreen;
    font-weight: bold;
    width: 100px;
    height: 100px;
    font-size: 50px;
}

<div>
123
123
</div>

For the example above the answer should be:

{
   x: 3 // 3 chars horizontally
 , y: 1 // 1 char vertically
}

How to compute these values automatically?

var $div = $("div");
var divSize = {
    w: $div.width()
  , h: $div.height()
};
var fontSize = parseInt($div.css("font-size"));

`font-size` refers to the glyph height not width. (https://developer.mozilla.org/en-US/docs/Web/CSS/font-size-adjust) — Gabriele Petrioli, Jan 20 '15 at 18:13
what is the `line-height` ? If it's not `1` will impact calcs. — charlietfl, Jan 20 '15 at 18:15
@njzk2 This is how it looks on my browser: http://i.imgur.com/zJTe2SU.png — Ionică Bizău, Jan 20 '15 at 18:16
@IonicăBizău default `line-height` is not 1 so there is additional vertical space applied in each line. set it to 1. — Gabriele Petrioli, Jan 20 '15 at 18:17
@GabyakaG.Petrioli How to get the absolute value of `line-height`? It just returns `"normal"` (`$(...).css("line-height")`). — Ionică Bizău, Jan 20 '15 at 18:33
Try `getComputedStyle(element).lineHeight`. This will return the line height in pixels. But be careful that changing the `font-size` on that element will alter its computed `line-height` if it was set to a relative unit (*`%`, `em` etc*) — Gabriele Petrioli, Jan 20 '15 at 18:49
@GabyakaG.Petrioli Thanks for helpful comments. I created a jQuery plugin and posted an answer. — Ionică Bizău, Jan 20 '15 at 19:09

Ionică Bizău · Accepted Answer · 2015-01-20T19:25:09.157

4

I built a jQuery plugin that does this:

$.fn.textSize = function () {
    var $self = this;
    function getCharWidth() {
        var canvas = getCharWidth.canvas || (getCharWidth.canvas = $("<canvas>")[0])
          , context = canvas.getContext("2d")
          ;
        
        context.font = [$self.css('font-size'), $self.css('font-family')].join(' ');
        var metrics = context.measureText("3");
        return metrics.width;
    };

    var lineHeight = parseFloat(getComputedStyle($self[0]).lineHeight);
    return {
        x: Math.floor($self.width() / getCharWidth())
      , y: Math.floor($self.height() / lineHeight)
    };
};

alert(JSON.stringify($("div").textSize()));

div {
    font-family: monospace;
    background: black;
    color: lightgreen;
    font-weight: bold;
    width: 100px;
    height: 100px;
    font-size: 50px;
    line-height: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
</div>

edited Jan 20 '15 at 19:25

answered Jan 20 '15 at 19:09

Ionică Bizău

109,027
88
289
474

You might want to use `context.font = [$self.css('font-size'), $self.css('font-family')].join(' ');` to make it work for firefox as well (*`font` returns "" if not set on the same item*) – Gabriele Petrioli Jan 20 '15 at 19:22
@GabyakaG.Petrioli Thanks for suggestion. I updated it. – Ionică Bizău Jan 20 '15 at 19:26
1

also keep in mind that you will not get exact results as bold/italic can also affect it and bold (font-weight) has varying levels. You would need to match all `font` properties (see https://html.spec.whatwg.org/multipage/scripting.html#dom-context-2d-font) – Gabriele Petrioli Jan 20 '15 at 19:29

score -1 · Answer 2 · edited May 23 '17 at 10:26

-1

You can not calculate how many character would fit in the div this way, font-size:50px does not define the width of each character (just compare "w" and "l", these character can not have the same width).

Try: Finding how many letter div fit And: http://itnow.blogspot.fr/2009/05/calculating-number-of-characters-that.html

Regards,

edited May 23 '17 at 10:26

Community

1
1

answered Jan 20 '15 at 18:27

Ngob

446
4
11

This is simply not correct. – Zach Saucier Jan 20 '15 at 19:56
@ZachSaucier can u explain?? Does font—size define the width of a character? – Ngob Jan 20 '15 at 21:00
"You can not calculate how many character would fit in the div this way" - you can, as seen in the other answer. "font-size:50px does not define the width of each character " - it does, just not *the same* for each character. – Zach Saucier Jan 20 '15 at 21:45
Sorry I think I did not explain myself correctly, I mean you cannot calculate by juste divide the width of the div by the css property "font-size" value. And by "font-size:50px does not define the width of each character, I mean the width of each character is not "50px". Am I right? Maybe I misundertand the question... – Ngob Jan 20 '15 at 22:16

How many monospace characters fit horizontally and vertically in an element?

2 Answers2