How to Measure the Space That a Text Will Take in JavaScript

How can you measure the space that a text will take in Javascript?

try this

http://blog.mastykarz.nl/measuring-the-length-of-a-string-in-pixels-using-javascript/

Calculate text width with JavaScript

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.

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>

Find the amount space occupied by the text in a div

A simple solution with jQuery .css() function. Returns the css properties of HTML elements.. Link to more on .css()

<!DOCTYPE html>
<html>
<head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <title>Test</title>
</head>
<body>
    
    <span id="myText">A bunch of sample text</span>
    <br><br>
    <div id="display"></div>
</body>
<script type="text/javascript">

var spanPx = $('#myText').css('width');
document.getElementById('display').innerText = 'The span length is: '+spanPx;

</script>
</html>

Calculate empty vertical space in text

UPDATE

I wrote a little script to automatically readjust the font-size, all you need to do is manually adjust the ratio between the total height of the font-family total size and font-family uppercase size.

Check the script: http://jsfiddle.net/jTpfT/32/

JS:

/**
 * Calculate the ratios by hand and store in this variable form:
 * myfontlowercase + _upper_case_ratio
 */
 var georgia_upper_case_ratio           = 1.44
 var arial_upper_case_ratio             = 1.32
 var times_upper_case_ratio             = 1.48

 /********************************************/

 $(document).ready(function() {
    $(".fitTextHeight").each(function(){
        //Get font family
        var ff = $(this).css('font-family').toLowerCase().split('\'').join('').split(' ').join('');

        //get ratio
        var miRatio = 1;
        try {miRatio = eval(ff+ "_upper_case_ratio"); } catch (e) { }

        //Get boxSize
        var boxSize = Number ($(this).css('height').split('px')[0]);

        //Calculate newSize & apply
        var newCssFontSize =  boxSize  * miRatio
        $(this).css('font-size', newCssFontSize );
        $(this).css('line-height', boxSize + "px" );
    })
});

Measuring text width/height without rendering

Please check this. is a solution using canvas

function get_tex_width(txt, font) {
        this.element = document.createElement('canvas');
        this.context = this.element.getContext("2d");
        this.context.font = font;
        return this.context.measureText(txt).width;
    }
    alert('Calculated width ' + get_tex_width("Hello World", "30px Arial"));
    alert("Span text width "+$("span").width());

Demo using

EDIT

The solution using canvas is not the best, each browser deal different canvas size.

Here is a nice solution to get size of text using a temporary element.
Demo

EDIT

The canvas spec doesn't give us a method for measuring the height of a string, so for this we can use parseInt(context.font).
TO get width and height. This trick work only with px size.

function get_tex_size(txt, font) {
    this.element = document.createElement('canvas');
    this.context = this.element.getContext("2d");
    this.context.font = font;
    var tsize = {'width':this.context.measureText(txt).width, 'height':parseInt(this.context.font)};
    return tsize;
}
var tsize = get_tex_size("Hello World", "30px Arial");

alert('Calculated width ' + tsize['width'] + '; Calculated height ' + tsize['height']);

checking space between text in javascript

Just use the match() method of strings. For example:

'Spaces here'.match(' ');

That returns true.

'Nospace'.match(' ');

That returns false.

So for what you want, just use something like this:

if(cName.match(' ')){
   alert('Spaces found!');
   return false;
}

Demo