Hitung lebar teks dengan JavaScript

Saya ingin menggunakan JavaScript untuk menghitung lebar string. Apakah ini mungkin tanpa harus menggunakan jenis huruf monospace?

Jika tidak built-in, satu-satunya ide saya adalah membuat tabel lebar untuk setiap karakter, tetapi ini sangat tidak masuk akal terutama mendukung Unicode dan ukuran tipe yang berbeda (dan semua browser dalam hal ini).

Buat DIV yang ditata dengan gaya berikut. Di JavaScript Anda, atur ukuran font dan atribut yang Anda coba ukur, masukkan string Anda ke DIV, lalu baca lebar dan tinggi DIV saat ini. Itu akan meregang agar sesuai dengan konten dan ukurannya akan berada dalam beberapa piksel dari ukuran string yang diberikan.

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>

Di HTML 5 , Anda bisa menggunakan metode Canvas.measureText (penjelasan lebih lanjut di sini ).

Coba biola ini :

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

Biola ini membandingkan metode Kanvas ini dengan variasi metode berbasis DOM Bob Monteverde , sehingga Anda dapat menganalisis dan membandingkan keakuratan hasil.

Ada beberapa keuntungan dari pendekatan ini, termasuk:

• Lebih ringkas dan lebih aman daripada metode lain (berbasis DOM) karena tidak mengubah keadaan global, seperti DOM Anda.
• Kustomisasi lebih lanjut dimungkinkan dengan memodifikasi lebih banyak properti teks kanvas , seperti textAligndan textBaseline.

CATATAN: Saat Anda menambahkan teks ke DOM Anda, ingatlah untuk juga memperhitungkan padding, margin, dan border .

CATATAN 2: Pada beberapa browser, metode ini menghasilkan akurasi sub-pixel (hasilnya adalah angka floating point), pada yang lain tidak (hasilnya hanya int). Anda mungkin ingin menjalankan Math.floor(atau Math.ceil) pada hasilnya, untuk menghindari inkonsistensi. Karena metode berbasis DOM tidak pernah akurat sub-pixel, metode ini bahkan memiliki presisi yang lebih tinggi daripada metode lain di sini.

Menurut jsperf ini (terima kasih kepada kontributor dalam komentar), metode Canvas dan metode berbasis DOM hampir sama cepatnya, jika caching ditambahkan ke metode berbasis DOM dan Anda tidak menggunakan Firefox. Di Firefox, untuk beberapa alasan, metode Canvas ini jauh lebih cepat daripada metode berbasis DOM (per September 2014).

Inilah yang saya kocok bersama tanpa contoh. Sepertinya kita semua ada di halaman yang sama.

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

Penggunaannya sederhana: "a string".width()

** Ditambahkan white-space: nowrapsehingga string dengan lebar lebih besar dari lebar jendela dapat dihitung.

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

Ini bekerja untuk saya ...

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

The ExtJS javascript perpustakaan memiliki kelas besar yang disebut Ext.util.TextMetrics bahwa "menyediakan pengukuran pixel yang tepat untuk blok teks sehingga Anda dapat menentukan dengan tepat seberapa tinggi dan lebar, dalam pixel, blok diberikan teks akan". Anda dapat menggunakannya secara langsung atau melihat sumbernya ke kode untuk melihat bagaimana hal ini dilakukan.

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

Saya suka "satu-satunya ide" Anda hanya melakukan peta lebar karakter statis! Ini sebenarnya berfungsi dengan baik untuk tujuan saya. Terkadang, untuk alasan kinerja atau karena Anda tidak memiliki akses mudah ke DOM, Anda mungkin ingin kalkulator mandiri yang cepat dikalibrasi ke satu font. Jadi, inilah yang dikalibrasi ke Helvetica; meneruskan string dan (opsional) ukuran font:

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
}

Array jelek raksasa itu adalah lebar karakter ASCII yang diindeks oleh kode karakter. Jadi ini hanya mendukung ASCII (selain itu mengasumsikan lebar karakter rata-rata). Untungnya, lebar pada dasarnya berskala linier dengan ukuran font, sehingga berfungsi cukup baik pada ukuran font apa pun. Itu terasa kurang kesadaran tentang kerning atau ligatur atau apa pun.

Untuk "mengkalibrasi", saya hanya merender setiap karakter hingga charCode 126 (the perkasa tilde) pada svg dan mendapatkan kotak pembatas dan menyimpannya ke array ini; lebih banyak kode dan penjelasan dan demo di sini .

Saya menulis alat kecil untuk itu. Mungkin bermanfaat bagi seseorang. Ini bekerja tanpa jQuery .

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

Pemakaian:

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

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

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

Anda dapat menggunakan kanvas sehingga Anda tidak perlu terlalu banyak berurusan dengan properti 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>

Ini akan berfungsi selama tag <span> tidak memiliki gaya lain yang diterapkan padanya. offsetWidth akan mencakup lebar batas, bantalan horizontal, lebar scrollbar vertikal, dll.

Kode-snips di bawah ini, "menghitung" lebar span-tag, menambahkan "..." padanya jika terlalu panjang dan mengurangi panjang teks, sampai pas dengan induknya (atau sampai ia mencoba lebih dari seribu kali)

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

Yang lebih baik adalah mendeteksi apakah teks akan pas sebelum Anda menampilkan elemen. Jadi Anda dapat menggunakan fungsi ini yang tidak memerlukan elemen berada di layar.

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

Pemakaian:

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

Jika ada orang lain yang datang ke sini mencari cara untuk mengukur lebar string dan cara untuk mengetahui apa ukuran font terbesar yang sesuai dengan lebar tertentu, berikut adalah fungsi yang dibangun di atas solusi @ Domi dengan pencarian biner :

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

Coba kode ini:

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

Lebar dan tinggi teks dapat diperoleh dengan clientWidthdanclientHeight

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

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

pastikan properti posisi style diatur ke absolut

element.style.position = "absolute";

tidak wajib berada di dalam div, bisa di dalam patauspan

Membangun dari jawaban Deepak Nadar , saya mengubah parameter fungsi untuk menerima gaya teks dan font. Anda tidak perlu merujuk elemen. Juga, fontOptionsmemiliki default, sehingga Anda tidak perlu menyediakan semuanya.

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

Saya kira ini hampir mirip dengan entri Depak, tetapi didasarkan pada karya Louis Lazaris yang diterbitkan pada sebuah artikel di halaman impressivewebs

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

Acara fit digunakan untuk menjalankan pemanggilan fungsi secara langsung setelah fungsi dikaitkan dengan kontrol.

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

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

Contoh biola yang bekerja: 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>

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

The Element.getClientRects()metode mengembalikan koleksi DOMRectbenda-benda yang menunjukkan persegi panjang berlari untuk setiap kotak perbatasan CSS di klien. Nilai yang dikembalikan adalah kumpulan DOMRectobjek, satu untuk setiap kotak batas CSS yang terkait dengan elemen. Setiap DOMRectobjek berisi read-only left, top, rightdan bottomsifat-sifat yang menggambarkan kotak perbatasan, dalam pixel, dengan relatif kiri atas ke kiri atas viewport.

Element.getClientRects () oleh Mozilla Contributors dilisensikan di bawah CC-BY-SA 2.5 .

Menjumlahkan semua lebar persegi panjang yang dikembalikan menghasilkan lebar teks total dalam piksel.

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>

Saya telah membuat modul ES6 kecil (menggunakan 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();
}

Mudah digunakan:

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

Hal keren yang mungkin Anda perhatikan - memungkinkan untuk memperhitungkan semua atribut CSS, bahkan paddings!

Anda juga dapat melakukan ini dengan createRange, yang lebih akurat, daripada teknik kloning teks:

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