JavaScript를 사용하여 텍스트 너비 계산

JavaScript를 사용하여 문자열 너비를 계산하고 싶습니다. 고정 폭 서체를 사용하지 않고도 가능합니까?

내장되어 있지 않으면 각 문자에 대해 너비 테이블을 만드는 것이 유일한 아이디어이지만 유니 코드 와 다른 유형 크기 (및 해당 문제에 대한 모든 브라우저)를 지원하는 것은 부당 합니다.

다음 스타일로 스타일 화 된 DIV를 작성하십시오. JavaScript에서 측정하려는 글꼴 크기와 속성을 설정하고 문자열을 DIV에 넣은 다음 DIV의 현재 너비와 높이를 읽습니다. 내용에 맞게 확장되며 크기는 문자열 렌더링 크기의 몇 픽셀 내에 있습니다.

var fontSize = 12;
var test = document.getElementById("Test");
test.style.fontSize = fontSize;
var height = (test.clientHeight + 1) + "px";
var width = (test.clientWidth + 1) + "px"

console.log(height, width);

#Test
{
    position: absolute;
    visibility: hidden;
    height: auto;
    width: auto;
    white-space: nowrap; /* Thanks to Herb Caudill comment */
}

<div id="Test">
    abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
</div>

HTML 5 에서는 Canvas.measureText 메서드를 사용할 수 있습니다 (자세한 설명은 여기 참조 ).

이 바이올린을보십시오 :

/**
 * 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. "bold 14px verdana").
 * 
 * @see /programming/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("canvas"));
    var context = canvas.getContext("2d");
    context.font = font;
    var metrics = context.measureText(text);
    return metrics.width;
}

console.log(getTextWidth("hello there!", "bold 12pt arial"));  // close to 86

이 바이올린 은이 Canvas 방법을 Bob Monteverde의 DOM 기반 방법의 변형 과 비교하므로 결과의 정확성을 분석하고 비교할 수 있습니다.

이 방법에는 다음과 같은 몇 가지 장점이 있습니다.

• DOM과 같은 전역 상태를 변경하지 않기 때문에 다른 (DOM 기반) 방법보다 더 간결하고 안전합니다.
• 또한, 커스터마이즈가 가능 더 캔버스 텍스트 속성을 수정하는 등, textAlign및 textBaseline.

참고 : 텍스트를 DOM에 추가 할 때 채우기, 여백 및 경계 도 고려해야합니다 .

참고 2 : 일부 브라우저에서이 방법은 하위 픽셀 정확도 (결과는 부동 소수점 수)를 생성하고 다른 브라우저에서는 그렇지 않습니다 (결과는 정수임). 불일치를 피하기 위해 결과에서 실행 Math.floor(또는 Math.ceil)을 원할 수 있습니다 . DOM 기반 방법은 절대 서브 픽셀 정확도가 아니기 때문에이 방법은 다른 방법보다 정확도가 훨씬 높습니다.

이 jsperf 에 따르면 (주석에 기여한 사람들에게 감사드립니다) 캐싱이 DOM 기반 방법에 추가되고 Firefox를 사용하지 않는 경우 Canvas 방법 과 DOM 기반 방법 이 거의 동일 합니다. Firefox에서 어떤 이유로 든이 Canvas 방법 은 DOM 기반 방법 (2014 년 9 월 기준) 보다 훨씬 빠릅니다 .

여기에 예를 들지 않고 채찍질 한 것이 있습니다. 우리 모두 같은 페이지에있는 것 같습니다.

String.prototype.width = function(font) {
  var f = font || '12px arial',
      o = $('<div></div>')
            .text(this)
            .css({'position': 'absolute', 'float': 'left', 'white-space': 'nowrap', 'visibility': 'hidden', 'font': f})
            .appendTo($('body')),
      w = o.width();

  o.remove();

  return w;
}

그것을 사용하는 것은 간단합니다 : "a string".width()

** white-space: nowrap창 너비보다 큰 너비의 문자열을 계산할 수 있도록 추가되었습니다 .

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);

이것은 나를 위해 작동합니다 ...

// 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;
}

의 ExtJS 자바 스크립트 라이브러리는 "정확히 얼마나 높은 확인할 수 있습니다 넓은 픽셀 단위로 텍스트의 특정 블록이 될 수 있도록 텍스트 블록에 대한 정확한 픽셀 측정을 제공한다"고 Ext.util.TextMetrics라는 큰 클래스를 가지고있다. 직접 사용하거나 소스를보고 코드 작성 방법을 확인할 수 있습니다.

http://docs.sencha.com/extjs/6.5.3/modern/Ext.util.TextMetrics.html

나는 단지 정적 문자 너비 맵을하는 "단 하나의 아이디어"를 좋아합니다! 실제로 내 목적에 잘 작동합니다. 때로는 성능상의 이유로 또는 DOM에 쉽게 액세스 할 수 없기 때문에 단일 글꼴로 교정 된 빠른 해킹 독립형 계산기를 원할 수 있습니다. 여기 Helvetica에 보정 된 것이 있습니다; 문자열과 선택적으로 글꼴 크기를 전달하십시오.

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 => c.charCodeAt(0) < widths.length ? widths[c.charCodeAt(0)] : avg)
    .reduce((cur, acc) => acc + cur) * fontSize
}

그 거대한 추악한 배열은 문자 코드로 색인 된 ASCII 문자 너비입니다. 따라서 이것은 ASCII 만 지원합니다 (그렇지 않으면 평균 문자 너비를 가정합니다). 다행히도 너비는 기본적으로 글꼴 크기와 선형으로 확장되므로 모든 글꼴 크기에서 잘 작동합니다. 커닝이나 합자 등에 대한 인식이 눈에 띄게 부족합니다.

"교정"하기 위해 방금 svg에서 모든 문자를 charCode 126 (강한 물결표)까지 렌더링하고 경계 상자를 가져 와서이 배열에 저장했습니다. 더 많은 코드와 설명 및 데모는 여기에 있습니다 .

나는 그것을위한 작은 도구를 썼다. 아마도 누군가에게 유용 할 것입니다. jQuery없이 작동합니다 .

https://github.com/schickling/calculate-size

용법:

var size = calculateSize("Hello world!", {
   font: 'Arial',
   fontSize: '12px'
});

console.log(size.width); // 65
console.log(size.height); // 14

바이올린 : http://jsfiddle.net/PEvL8/

캔버스를 사용하면 CSS 속성을 많이 다루지 않아도됩니다.

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;

<span id="text">Text</span>

<script>
var textWidth = document.getElementById("text").offsetWidth;
</script>

<span> 태그에 다른 스타일이 적용되지 않는 한 작동합니다. offsetWidth는 테두리 너비, 가로 패딩, 세로 스크롤 막대 너비 등을 포함합니다.

아래 코드 조각은 범위 태그의 너비를 "계산"하고 너무 길면 "..."을 추가하고 부모에 맞을 때까지 또는 텍스트 길이를 줄입니다. 천 번)

CSS

div.places {
  width : 100px;
}
div.places span {
  white-space:nowrap;
  overflow:hidden;
}

HTML

<div class="places">
  <span>This is my house</span>
</div>
<div class="places">
  <span>And my house are your house</span>
</div>
<div class="places">
  <span>This placename is most certainly too wide to fit</span>
</div>

자바 스크립트 (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() > $(item).width() && placename.trim().length > 0) {
            var limit = 0;
            do {
                limit++;
                                    placename = placename.substring(0, placename.length - 1);
                                    $(obj).text(placename + "...");
            } while ($(obj).width() > $(item).width() && limit < 1000)
        }
    }
});

요소를 표시하기 직전에 텍스트가 맞는지 여부를 감지하는 것이 좋습니다. 따라서 요소를 화면에 표시 할 필요가없는이 기능을 사용할 수 있습니다.

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;
}

용법:

if ( textWidth("Text", "bold 13px Verdana") > elementWidth) {
    ...
}

다른 사람이 문자열 너비를 측정 하는 방법 과 특정 너비에 맞는 가장 큰 글꼴 크기를 알 수있는 방법을 찾고있는 경우 바이너리 검색을 사용하여 @Domi의 솔루션을 기반으로하는 함수가 있습니다. :

/**
 * 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. "bold ?px verdana") -- note the use of ? in place of the font size.
 * @param {width} the width in pixels the string must fit in
 * @param {minFontPx} the smallest acceptable font size in pixels
 * @param {maxFontPx} the largest acceptable font size in pixels
**/
function GetTextSizeForWidth( text, font, width, minFontPx, maxFontPx )
{
    for ( ; ; )
    {
        var s = font.replace( "?", maxFontPx );
        var w = GetTextWidth( text, s );
        if ( w <= 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( "?", g );
        w = GetTextWidth( text, s );
        if ( w >= width )
        {
            maxFontPx = g;
        }
        else
        {
            minFontPx = g;
        }
    }
}

이 코드를 사용해보십시오 :

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;
}

텍스트의 폭과 heigth가 얻어 질 수 clientWidth및clientHeight

var element = document.getElementById ("mytext");

var width = element.clientWidth;
var height = element.clientHeight;

스타일 위치 속성이 절대로 설정되어 있는지 확인하십시오

element.style.position = "absolute";

안에있을 필요는 없습니다. 안에있을 div수도 있습니다 p.span

Deepak Nadar의 답변을 바탕으로 텍스트 및 글꼴 스타일을 허용하도록 함수 매개 변수를 변경했습니다. 요소를 참조 할 필요는 없습니다. 또한 fontOptions기본값이 있으므로 모든 값을 제공 할 필요는 없습니다.

(function($) {
  $.format = function(format) {
    return (function(format, args) {
      return format.replace(/{(\d+)}/g, function(val, pos) {
        return typeof args[pos] !== 'undefined' ? args[pos] : val;
      });
    }(format, [].slice.call(arguments, 1)));
  };
  $.measureText = function(html, fontOptions) {
    fontOptions = $.extend({
      fontSize: '1em',
      fontStyle: 'normal',
      fontWeight: 'normal',
      fontFamily: 'arial'
    }, fontOptions);
    var $el = $('<div>', {
      html: html,
      css: {
        position: 'absolute',
        left: -1000,
        top: -1000,
        display: 'none'
      }
    }).appendTo('body');
    $(fontOptions).each(function(index, option) {
      $el.css(option, fontOptions[option]);
    });
    var h = $el.outerHeight(), w = $el.outerWidth();
    $el.remove();
    return { height: h, width: w };
  };
}(jQuery));

var dimensions = $.measureText("Hello World!", { fontWeight: 'bold', fontFamily: 'arial' });

// Font Dimensions: 94px x 18px
$('body').append('<p>').text($.format('Font Dimensions: {0}px x {1}px', dimensions.width, dimensions.height));

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

나는 이것이 Depak 항목과 비슷한 예식이라고 생각하지만, 인상적인 웹 페이지 의 기사에 게시 된 Louis Lazaris의 작품을 기반으로합니다 .

(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, '<br>');
                hiddenDiv.html(content);

                $(this).css('width', hiddenDiv.width());

            });

            return this;

        };
    })(jQuery);

fit 이벤트는 함수가 컨트롤에 연결된 후 즉시 함수 호출을 실행하는 데 사용됩니다.

예 : $ ( 'input'). autofit (). trigger ( "fit");

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);

작업 예의 바이올린 : http://jsfiddle.net/tdpLdqpo/1/

HTML :

<h1 id="test1">
    How wide is this text?
</h1>
<div id="result1"></div>
<hr/>
<p id="test2">
    How wide is this text?
</p>
<div id="result2"></div>
<hr/>
<p id="test3">
    How wide is this text?<br/><br/>
    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
</p>
<div id="result3"></div>

자바 스크립트 코드 :

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");

이 Element.getClientRects()메서드는 DOMRect클라이언트의 각 CSS 테두리 상자에 대한 경계 사각형을 나타내는 개체 컬렉션을 반환합니다 . 리턴 된 값은 DOMRect요소와 연관된 각 CSS 테두리 상자마다 하나씩 오브젝트 의 콜렉션입니다 . 각 DOMRect개체는 읽기 전용으로 포함하고 left, top, right및 bottom받는 좌상 상대적으로 픽셀 경계 박스를 나타내는 특성 뷰포트의 상단 왼쪽.

Element.getClientRects () 에 의해 모질라 기여자 에 따라 사용이 허가됩니다 CC-BY-SA 2.5 .

반환 된 모든 사각형 너비를 합하면 총 텍스트 너비 (픽셀)가 생성됩니다.

document.getElementById('in').addEventListener('input', function (event) {
    var span = document.getElementById('text-render')
    span.innerText = event.target.value
    var rects = span.getClientRects()
    var widthSum = 0
    for (var i = 0; i < rects.length; i++) {
        widthSum += rects[i].right - rects[i].left
    }
    document.getElementById('width-sum').value = widthSum
})

<p><textarea id='in'></textarea></p>
<p><span id='text-render'></span></p>
<p>Sum of all widths: <output id='width-sum'>0</output>px</p>

작은 ES6 모듈을 만들었습니다 (jQuery 사용).

import $ from 'jquery';

const $span=$('<span>');
$span.css({
    position: 'absolute',
    display: 'none'
}).appendTo('body');

export default function(str, css){
    $span[0].style = ''; // resetting the styles being previously set
    $span.text(str).css(css || {});
    return $span.innerWidth();
}

사용하기 쉬운:

import stringWidth from './string_width';
const w = stringWidth('1-3', {fontSize: 12, padding: 5});

멋진 점-CSS 속성, 심지어 패딩까지 고려할 수 있습니다!

텍스트 복제 기술보다 더 정확한 createRange를 사용하여이 작업을 수행 할 수도 있습니다.

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;
}

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'));