Calculate the width of the string base on font size and font style

Question

I'm trying to determine the width of the string based on the font size and font style.
But I'm not sure how to do it. I found a function on google, and I dont quite understand how it works.

$.fn.textWidth = function(text, font) {
    if (!$.fn.textWidth.fakeEl) $.fn.textWidth.fakeEl = $('<span>').hide().appendTo(document.body);
    $.fn.textWidth.fakeEl.text(text || this.val() || this.text()).css('font', font || this.css('font'));
    return $.fn.textWidth.fakeEl.width();
};

I tested this out, and get an output, I can get the width of the string, but What if I declare the font style and size? I'm not sure how to do it. Any idea on this one?

possible duplicate of [calculating text width with jQuery](http://stackoverflow.com/questions/1582534/calculating-text-width-with-jquery) — Patsy Issa, May 21 '14 at 08:09
Yes, but I was thinking what if the user specify the font style and size? — user3627265, May 22 '14 at 07:00

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

1

Use this one:

$.fn.textWidth = function(){
  var html_org = $(this).html();
  var html_calc = '<span>' + html_org + '</span>';
  $(this).html(html_calc);
  var width = $(this).find('span:first').width();
  $(this).html(html_org);
 return width;
};

From this subject.

edited May 23 '17 at 10:26

Community

1
1

answered May 21 '14 at 08:04

Superdrac

1,208
17
29

I already seen that,. but what if,. the font style and font size is dynamically selected by the user? – user3627265 May 22 '14 at 06:35
You call the function each time that the size is changed ?! – Superdrac May 22 '14 at 07:36

Calculate the width of the string base on font size and font style

1 Answers1