Oblicz szerokość tekstu za pomocą JavaScript

Chciałbym użyć JavaScript do obliczenia szerokości łańcucha. Czy jest to możliwe bez konieczności używania kroju pisma monospace?

Jeśli nie jest wbudowany, moim jedynym pomysłem jest utworzenie tabeli szerokości dla każdego znaku, ale jest to dość nierozsądne, szczególnie obsługując Unicode i różne rozmiary typów (i wszystkie przeglądarki w tym zakresie).

Utwórz DIV w stylu z następującymi stylami. W swoim JavaScript ustaw rozmiar czcionki i atrybuty, które próbujesz zmierzyć, umieść swój ciąg w DIV, a następnie przeczytaj aktualną szerokość i wysokość DIV. Rozciągnie się, aby dopasować do zawartości, a rozmiar będzie mieścić się w odległości kilku pikseli od renderowanego rozmiaru ciągu.

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>

W HTML 5 możesz po prostu użyć metody Canvas.measureText (dalsze wyjaśnienie tutaj ).

Wypróbuj to skrzypce :

/**
 * 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

To skrzypce porównuje tę metodę Canvas z odmianą metody opartej na modelu DOM Boba Monteverde'a , dzięki czemu można analizować i porównywać dokładność wyników.

Podejście to ma kilka zalet, w tym:

• Bardziej zwięzłe i bezpieczniejsze niż inne metody (oparte na DOM), ponieważ nie zmienia stanu globalnego, takiego jak DOM.
• Dalsza personalizacja jest możliwa poprzez modyfikację większej liczby właściwości tekstu na płótnie , takich jak textAligni textBaseline.

UWAGA: Kiedy dodajesz tekst do DOM, pamiętaj, aby wziąć również pod uwagę wypełnienie, margines i ramkę .

UWAGA 2: W niektórych przeglądarkach ta metoda zapewnia dokładność subpikseli (wynik jest liczbą zmiennoprzecinkową), w innych nie (wynik jest tylko liczbą całkowitą). Możesz uruchomić Math.floor(lub Math.ceil) wynik, aby uniknąć niespójności. Ponieważ metoda oparta na DOM nigdy nie jest dokładna w subpikselach, ta metoda ma jeszcze wyższą precyzję niż inne metody tutaj.

Zgodnie z tym jsperf (dzięki autorom komentarzy) metoda Canvas i metoda DOM są równie szybkie, jeśli buforowanie jest dodawane do metody DOM i nie używasz przeglądarki Firefox. W Firefoksie z jakiegoś powodu ta metoda Canvas jest znacznie szybsza niż metoda oparta na DOM (stan na wrzesień 2014 r.).

Oto jeden, który wymieszałem bez przykładu. Wygląda na to, że wszyscy jesteśmy na tej samej stronie.

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

Korzystanie z niego jest proste: "a string".width()

** Dodano, white-space: nowrapaby można było obliczyć ciągi o szerokości większej niż szerokość okna.

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

To działa dla mnie ...

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

Przez biblioteki ExtJS obsługa JavaScript ma wielką klasę o nazwie Ext.util.TextMetrics że „zapewnia precyzyjne pomiary pikseli dla bloków tekstu, dzięki czemu można dokładnie określić, jak wysokie i szerokie, w pikselach, dany blok tekstu będzie”. Możesz użyć go bezpośrednio lub wyświetlić jego kod źródłowy, aby zobaczyć, jak to się robi.

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

Podoba mi się twój „jedyny pomysł” zrobienia statycznej mapy szerokości postaci! W rzeczywistości działa dobrze dla moich celów. Czasami, ze względu na wydajność lub ponieważ nie masz łatwego dostępu do DOM, możesz po prostu chcieć szybkiego, samodzielnego kalkulatora skalibrowanego do pojedynczej czcionki. Oto jeden skalibrowany do Helvetica; przekazać ciąg i (opcjonalnie) rozmiar czcionki:

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
}

Ta olbrzymia brzydka tablica ma szerokość znaków ASCII indeksowaną kodem znaków. To obsługuje tylko ASCII (w przeciwnym razie zakłada średnią szerokość znaków). Na szczęście szerokość zasadniczo skaluje się liniowo z rozmiarem czcionki, więc działa całkiem dobrze przy każdym rozmiarze czcionki. Zauważalnie brakuje mu świadomości kerningu, ligatur czy czegokolwiek innego.

Aby „skalibrować” po prostu renderowałem każdą postać do charCode 126 (potężna tylda) na pliku svg, dostałem obwiednię i zapisałem ją w tej tablicy; więcej kodu, wyjaśnienia i demo tutaj .

Napisałem do tego małe narzędzie. Być może jest to przydatne dla kogoś. Działa bez jQuery .

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

Stosowanie:

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

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

Fiddle: http://jsfiddle.net/PEvL8/

Możesz użyć płótna, abyś nie musiał tak bardzo zajmować się właściwościami 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>

Powinno to działać tak długo, jak długo znacznik <span> nie ma do niego zastosowania żadne inne style. offsetWidth obejmie szerokość dowolnych granic, dopełnienie w poziomie, szerokość pionowego paska przewijania itp.

Poniższe fragmenty kodu „obliczają” szerokość znacznika span, dodają do niego „...”, jeśli jest za długi i zmniejsza długość tekstu, dopóki nie dopasuje się do elementu nadrzędnego (lub dopóki nie spróbuje więcej niż tysiąc razy)

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>

JavaScript (z 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)
        }
    }
});

Lepiej jest wykryć, czy tekst będzie pasował tuż przed wyświetleniem elementu. Możesz więc użyć tej funkcji, która nie wymaga wyświetlania elementu na ekranie.

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

Stosowanie:

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

Na wypadek, gdyby ktoś tu przybył i szukał zarówno sposobu pomiaru szerokości łańcucha, jak i sposobu określenia, jaki jest największy rozmiar czcionki pasujący do określonej szerokości, oto funkcja oparta na rozwiązaniu @ Domi z wyszukiwaniem binarnym :

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

Wypróbuj ten kod:

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

Szerokość i wysokość tekstu można uzyskać za pomocą clientWidthiclientHeight

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

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

upewnij się, że właściwość position stylu jest ustawiona na wartość bezwzględną

element.style.position = "absolute";

nie musi znajdować się w a div, może znajdować się w a plub aspan

Opierając się na odpowiedzi Deepaka Nadara , zmieniłem parametr funkcji, aby akceptować style tekstu i czcionek. Nie musisz odwoływać się do elementu. Ponadto fontOptionsmają wartości domyślne, więc nie trzeba podawać ich wszystkich.

(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>

Wydaje mi się, że jest to podobne do wpisu Depaka, ale oparte jest na pracy Louisa Lazarisa opublikowanej w artykule na imponującej stronie internetowej

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

Zdarzenie dopasowania służy do natychmiastowego wykonania wywołania funkcji po przypisaniu funkcji do sterowania.

np .: $ („input”). autofit (). trigger („fit”);

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

Skrzypek przykładowego działania: 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>

Kod JavaScript:

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()Metoda zwraca kolekcję DOMRectobiektów, które wskazują okalającym prostokątów dla każdego pola granicznego CSS w kliencie. Zwrócona wartość to zbiór DOMRectobiektów, po jednym dla każdego pola obramowania CSS związanego z elementem. Każdy DOMRectobiekt zawiera tylko do odczytu left, top, righti bottomwłaściwości opisujące pole obramowania w pikselach z lewego górnego w stosunku do górnej lewej rzutni.

Element.getClientRects () firmy Mozilla Contributors jest licencjonowany na licencji CC-BY-SA 2.5 .

Zsumowanie wszystkich zwróconych szerokości prostokąta daje całkowitą szerokość tekstu w pikselach.

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>

Zrobiłem mały moduł ES6 (używa 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();
}

Łatwy w użyciu:

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

Fajna rzecz, którą możesz zauważyć - pozwala uwzględnić wszelkie atrybuty CSS, nawet wypełnienia!

Możesz to również zrobić za pomocą createRange, który jest dokładniejszy niż technika klonowania tekstu:

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