Calculate text width with JavaScript

Question

I d like to use JavaScript to calculate the width of a string  Is this possible without having to use a monospace typeface   If it s not built-in  my only idea is to create a table of widths for each character  but this is pretty unreasonable especially supporting Unicode and different type sizes  and all browsers for that matter

User · Answer

You can use the canvas so you don t have to deal so much with css properties   var canvas   document createElement  canvas    var ctx   canvas getContext  2d    ctx font    20pt Arial       This can be set programmaticly from the element s font-style if desired var textWidth   ctx measureText     myElement   text    width

User · Answer

jQuery    function          textMetrics   function el       var h   0  w   0     var div   document createElement  div      document body appendChild div       div  css      position   absolute      left  -1000     top  -1000     display   none             div  html   el  html       var styles     font-size   font-style    font-weight    font-family   line-height    text-transform    letter-spacing        styles  each function        var s   this toString         div  css s    el  css s             h     div  outerHeight      w     div  outerWidth         div  remove       var ret        height  h     width  w         return ret         jQuery

User · Answer

The width and heigth of a text can be obtained with clientWidth and clientHeight  var element   document getElementById   mytext     var width   element clientWidth  var height   element clientHeight    make sure that style position property is set to absolute  element style position    absolute     not required to be inside a div  can be inside a p or a span

User · Answer

The Element getClientRects   method returns a collection of DOMRect objects that indicate the bounding rectangles for each CSS border box in a client  The returned value is a collection of DOMRect objects  one for each CSS border box associated with the element  Each DOMRect object contains read-only left  top  right and bottom properties describing the border box  in pixels  with the top-left relative to the top-left of the viewport    Element getClientRects   by Mozilla Contributors is licensed under CC-BY-SA 2 5   Summing up all returned rectangle widths yields the total text width in pixels    x000D   x000D  document getElementById  in   addEventListener  input   function  event    x000D      var span   document getElementById  text-render   x000D      span innerText   event target value x000D      var rects   span getClientRects   x000D      var widthSum   0 x000D      for  var i   0  i  lt  rects length  i      x000D          widthSum    rects i  right - rects i  left x000D        x000D      document getElementById  width-sum   value   widthSum x000D     x000D   lt p gt  lt textarea id  in  gt  lt  textarea gt  lt  p gt  x000D   lt p gt  lt span id  text-render  gt  lt  span gt  lt  p gt  x000D   lt p gt Sum of all widths   lt output id  width-sum  gt 0 lt  output gt px lt  p gt  x000D   x000D   x000D

User · Answer

Without jQuery   String prototype width   function  fontSize        var el          f   fontSize     px arial      12px arial       el   document createElement  div        el style position    absolute       el style float    left       el style whiteSpace    nowrap       el style visibility    hidden       el style font   f      el innerHTML   this      el   document body appendChild el       w   el offsetWidth      el parentNode removeChild el       return w        Usage  MyString  width 12

User · Answer

Rewritten my answer from scratch  thanks for that minus   Now function accepts a text and css rules to be applied  and doesn t use jQuery anymore   So it will respect paddings too  Resulting values are being rounded  you can see Math round there  remove if you want more that precise values   x000D   x000D  function getSpan        const span   document createElement  span       span style position    fixed       span style visibility    hidden       document body appendChild span       return span     function textWidth str  css        const span   getSpan        Object assign span style  css             span innerText   str      const w   Math round span getBoundingClientRect   width            span remove             return w      const testStyles        fontSize   10px       fontSize   12px       fontSize   60px       fontSize   120px       fontSize   120px   padding   10px       fontSize   120px   fontFamily   arial       fontSize   120px   fontFamily   tahoma       fontSize   120px   fontFamily   tahoma   padding   5px        const ul   document getElementById  output    testStyles forEach style   gt      const li   document createElement  li      li innerText      JSON stringify style    gt    textWidth  abc   style       ul appendChild li       x000D   lt ul id  output  gt  lt  ul gt  x000D   x000D   x000D

User · Answer

lt span id  text  gt Text lt  span gt    lt script gt  var textWidth   document getElementById  text   offsetWidth   lt  script gt    This should work as long as the  lt span gt  tag has no other styles applied to it  offsetWidth will include the width of any borders  horizontal padding  vertical scrollbar width  etc

User · Answer

I wrote a little tool for that  Perhaps it s useful to somebody  It works without jQuery   https   github com schickling calculate-size  Usage   var size   calculateSize  Hello world         font   Arial      fontSize   12px       console log size width      65 console log size height      14   Fiddle  http   jsfiddle net PEvL8

User · Answer

I like your  only idea  of just doing a static character width map  It actually works well for my purposes  Sometimes  for performance reasons or because you don t have easy access to a DOM  you may just want a quick hacky standalone calculator calibrated to a single font  So here s one calibrated to Helvetica  pass a string and  optionally  a font size   function measureText str  fontSize   10      const widths    0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 2796875 0 2765625 0 3546875 0 5546875 0 5546875 0 8890625 0 665625 0 190625 0 3328125 0 3328125 0 3890625 0 5828125 0 2765625 0 3328125 0 2765625 0 3015625 0 5546875 0 5546875 0 5546875 0 5546875 0 5546875 0 5546875 0 5546875 0 5546875 0 5546875 0 5546875 0 2765625 0 2765625 0 584375 0 5828125 0 584375 0 5546875 1 0140625 0 665625 0 665625 0 721875 0 721875 0 665625 0 609375 0 7765625 0 721875 0 2765625 0 5 0 665625 0 5546875 0 8328125 0 721875 0 7765625 0 665625 0 7765625 0 721875 0 665625 0 609375 0 721875 0 665625 0 94375 0 665625 0 665625 0 609375 0 2765625 0 3546875 0 2765625 0 4765625 0 5546875 0 3328125 0 5546875 0 5546875 0 5 0 5546875 0 5546875 0 2765625 0 5546875 0 5546875 0 221875 0 240625 0 5 0 221875 0 8328125 0 5546875 0 5546875 0 5546875 0 5546875 0 3328125 0 5 0 2765625 0 5546875 0 5 0 721875 0 5 0 5 0 5 0 3546875 0 259375 0 353125 0 5890625    const avg   0 5279276315789471   return str      split          map c   gt  c charCodeAt 0   lt  widths length   widths c charCodeAt 0     avg       reduce  cur  acc    gt  acc   cur    fontSize     That giant ugly array is ASCII character widths indexed by character code  So this just supports ASCII  otherwise it assumes an average character width   Fortunately  width basically scales linearly with font size  so it works pretty well at any font size  It s noticeably lacking any awareness of kerning or ligatures or whatever   To  calibrate  I just rendered every character up to charCode 126  the mighty tilde  on an svg and got the bounding box and saved it to this array  more code and explanation and demo here

User · Answer

var textWidth    function  el        el style position    absolute       el style top    -1000px       document body appendChild el        return function  text            el innerHTML   text          return el clientWidth            document createElement  div

User · Answer

Fiddle of working example  http   jsfiddle net tdpLdqpo 1   HTML    lt h1 id  test1  gt      How wide is this text   lt  h1 gt   lt div id  result1  gt  lt  div gt   lt hr  gt   lt p id  test2  gt      How wide is this text   lt  p gt   lt div id  result2  gt  lt  div gt   lt hr  gt   lt p id  test3  gt      How wide is this text  lt br  gt  lt br  gt      f sdfj f sdlfj lfj lsdk jflsjd fljsd flj sflj sldfj lsdfjlsdjkf sfjoifoewj flsdjfl jofjlgjdlsfjsdofjisdojfsdmfnnfoisjfoi  ojfo dsjfo jdsofjsodnfo sjfoj ifjjfoewj fofew jfos fojo foew jofj s f j  lt  p gt   lt div id  result3  gt  lt  div gt    JavaScript code   function getTextWidth text  font        var canvas   getTextWidth canvas             getTextWidth canvas   document createElement  canvas         var context   canvas getContext  2d        context font   font      var metrics   context measureText text       return metrics width          result1    text  answer          getTextWidth                   test1   text                     test1   css  font        px         result2        text  answer              getTextWidth                   test2   text                     test2   css  font        px         result3        text  answer              getTextWidth                   test3   text                     test3   css  font        px

User · Answer

Try this code   function GetTextRectToPixels obj    var tmpRect   obj getBoundingClientRect    obj style width    auto    obj style height    auto    var Ret   obj getBoundingClientRect     obj style width    tmpRect right - tmpRect left  toString      px   obj style height    tmpRect bottom - tmpRect top  toString      px    return Ret

User · Answer

Building off of Deepak Nadar s answer  I changed the functions parameter s to accept text and font styles  You do not need to reference an element  Also  the fontOptions have defaults  so you to not need to supply all of them    x000D   x000D   function      x000D      format   function format    x000D      return  function format  args    x000D        return format replace     d    g  function val  pos    x000D          return typeof args pos       undefined    args pos    val  x000D            x000D        format     slice call arguments  1     x000D       x000D      measureText   function html  fontOptions    x000D      fontOptions     extend   x000D        fontSize   1em   x000D        fontStyle   normal   x000D        fontWeight   normal   x000D        fontFamily   arial  x000D         fontOptions   x000D      var  el       lt div gt      x000D        html  html  x000D        css    x000D          position   absolute   x000D          left  -1000  x000D          top  -1000  x000D          display   none  x000D          x000D         appendTo  body    x000D        fontOptions  each function index  option    x000D         el css option  fontOptions option    x000D          x000D      var h    el outerHeight    w    el outerWidth    x000D       el remove    x000D      return   height  h  width  w    x000D       x000D    jQuery    x000D   x000D  var dimensions     measureText  Hello World      fontWeight   bold   fontFamily   arial      x000D   x000D     Font Dimensions  94px x 18px x000D     body   append   lt p gt    text   format  Font Dimensions   0 px x  1 px   dimensions width  dimensions height    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   x000D

User · Answer

I guess this is prety similar to Depak entry  but is based on the work of Louis Lazaris published at an article in impressivewebs page   function                fn autofit   function                               var hiddenDiv     document createElement  div                 content   null               hiddenDiv css  display   none                    body   append hiddenDiv                  this  bind  fit keyup keydown blur update focus  function                      content     this  val                     content   content replace   n g    lt br gt                     hiddenDiv html content                      this  css  width   hiddenDiv width                                   return this                     jQuery     The fit event is used to execute the function call inmediatly after the function is asociated to the control   e g      input   autofit   trigger  fit

User · Answer

In HTML 5  you can just use the Canvas measureText method  further explanation here   Try this fiddle         Uses canvas measureText to compute and return the width of the given text of given font in pixels          param  String  text The text to be rendered      param  String  font The css font descriptor that text is to be rendered with  e g   quot bold 14px verdana quot            see https   stackoverflow com questions 118241 calculate-text-width-with-javascript 21015393 21015393     function getTextWidth text  font           re-use canvas object for better performance     var canvas   getTextWidth canvas     getTextWidth canvas   document createElement  quot canvas quot         var context   canvas getContext  quot 2d quot        context font   font      var metrics   context measureText text       return metrics width     console log getTextWidth  quot hello there  quot    quot bold 12pt arial quot         close to 86  This fiddle compares this Canvas method to a variation of Bob Monteverde s DOM-based method  so you can analyze and compare accuracy of the results  There are several advantages to this approach  including   More concise and safer than the other  DOM-based  methods because it does not change global state  such as your DOM  Further customization is possible by modifying more canvas text properties  such as textAlign and textBaseline   NOTE  When you add the text to your DOM  remember to also take account of padding  margin and border  NOTE 2  On some browsers  this method yields sub-pixel accuracy  result is a floating point number   on others it does not  result is only an int   You might want to run Math floor  or Math ceil  on the result  to avoid inconsistencies  Since the DOM-based method is never sub-pixel accurate  this method has even higher precision than the other methods here  According to this jsperf  thanks to the contributors in comments   the Canvas method and the DOM-based method are about equally fast  if caching is added to the DOM-based method and you are not using Firefox  In Firefox  for some reason  this Canvas method is much much faster than the DOM-based method  as of September 2014

User · Answer

You can also do this with createRange  which is more accurate  than the text cloning technique   function getNodeTextWidth nodeWithText        var textNode     nodeWithText  contents   filter function              return this nodeType    Node TEXT NODE         0       var range   document createRange        range selectNode textNode       return range getBoundingClientRect   width

User · Answer

The code-snips below   calculate  the width of the span-tag  appends       to it if its too long and reduces the text-length  until it fits in its parent  or until it has tried more than a thousand times   CSS  div places     width   100px    div places span     white-space nowrap    overflow hidden      HTML   lt div class  places  gt     lt span gt This is my house lt  span gt   lt  div gt   lt div class  places  gt     lt span gt And my house are your house lt  span gt   lt  div gt   lt div class  places  gt     lt span gt This placename is most certainly too wide to fit lt  span gt   lt  div gt    JavaScript  with jQuery      loops elements classed  places  and checks if their child  span  is too long to fit     places   each function  index  item        var obj     item  find  span        if  obj length            var placename     obj  text            if    obj  width    gt    item  width    amp  amp  placename trim   length  gt  0                var limit   0              do                   limit                                        placename   placename substring 0  placename length - 1                                         obj  text placename                         while    obj  width    gt    item  width    amp  amp  limit  lt  1000

User · Answer

The better of is to detect whether text will fits right before you display the element  So you can use this function which doesn t requires the element to be on screen   function textWidth text  fontProp        var tag   document createElement  div        tag style position    absolute       tag style left    -999em       tag style whiteSpace    nowrap       tag style font   fontProp      tag innerHTML   text       document body appendChild tag        var result   tag clientWidth       document body removeChild tag        return result      Usage   if   textWidth  Text    bold 13px Verdana    gt  elementWidth

User · Answer

In case anyone else got here looking both for a way to measure the width of a string and a way to know what s the largest font size that will fit in a particular width  here is a function that builds on  Domi s solution with a binary search         Find the largest font size  in pixels  that allows the string to fit in the given width          param  String  text - The text to be rendered      param  String  font - The css font descriptor that text is to be rendered with  e g   quot bold  px verdana quot   -- note the use of   in place of the font size      param  Number  width - The width in pixels the string must fit in     param  Number  minFontPx - The smallest acceptable font size in pixels     param  Number  maxFontPx - The largest acceptable font size in pixels      function GetTextSizeForWidth text  font  width  minFontPx  maxFontPx      for            var s   font replace  quot   quot   maxFontPx       var w   GetTextWidth text  s       if  w  lt   width          return maxFontPx             var g    minFontPx   maxFontPx    2       if  Math round g     Math round minFontPx     Math round g     Math round maxFontPx           return g             s   font replace  quot   quot   g       w   GetTextWidth text  s       if  w  gt   width          maxFontPx   g        else         minFontPx   g

User · Answer

Here s one I whipped together without example  It looks like we are all on the same page   String prototype width   function font      var f   font     12px arial         o       lt div gt  lt  div gt                 text this               css   position    absolute    float    left    white-space    nowrap    visibility    hidden    font   f                appendTo    body           w   o width       o remove       return w      Using it is simple   a string  width      Added white-space  nowrap so strings with width larger than the window width can be calculated

User · Answer

I m using text-metrics package  Works really nice  I tried this solution but in some reasons  it counts it wrong  textMetrics init document querySelector  h1      fontSize   20px       textMetrics init     fontSize   14px     lineHeight   20px     fontFamily   Helvetica  Arial  sans-serif     fontWeight  400    width  100

User · Answer

This works for me        Handy JavaScript to measure the size taken to render the supplied text     you can supply additional style information too if you have it   function measureText pText  pFontSize  pStyle        var lDiv   document createElement  div         document body appendChild lDiv        if  pStyle    null            lDiv style   pStyle            lDiv style fontSize        pFontSize    px       lDiv style position    absolute       lDiv style left   -1000      lDiv style top   -1000       lDiv innerHTML   pText       var lResult             width  lDiv clientWidth          height  lDiv clientHeight             document body removeChild lDiv       lDiv   null       return lResult

User · Answer

The ExtJS javascript library has a great class called Ext util TextMetrics that  provides precise pixel measurements for blocks of text so that you can determine exactly how high and wide  in pixels  a given block of text will be    You can either use it directly or view its source to code to see how this is done   http   docs sencha com extjs 6 5 3 modern Ext util TextMetrics html

User · Answer

Create a DIV styled with the following styles  In your JavaScript  set the font size and attributes that you are trying to measure  put your string in the DIV  then read the current width and height of the DIV  It will stretch to fit the contents and the size will be within a few pixels of the string rendered size    x000D   x000D  var fontSize   12  x000D  var test   document getElementById  Test    x000D  test style fontSize   fontSize  x000D  var height    test clientHeight   1     px   x000D  var width    test clientWidth   1     px  x000D   x000D  console log height  width   x000D   Test x000D    x000D      position  absolute  x000D      visibility  hidden  x000D      height  auto  x000D      width  auto  x000D      white-space  nowrap     Thanks to Herb Caudill comment    x000D    x000D   lt div id  Test  gt  x000D      abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ x000D   lt  div gt  x000D   x000D   x000D

[javascript] Calculate text width with JavaScript

Examples related to javascript

Examples related to textbox