To measure a string length in pixel using Javascript

By -
One may make use of Span.offsetWidth to measure the length of a string in Javascript environment, consider the following example:


<html>
<body>
    <select id="select1" style="width:100px;" onchange="checkStringWidth()">
        <option value="1">abcde abcde abcde abcde abcde</option>
        <option value="2">abcde abcde abcde abcde</option>
    </select>
    <br>
    Selected option: <span id="span1"></span>
    <br>
    Text width: <span id="lbWidth"></span>
</body>
</html>


<script>
    function checkStringWidth() {
        var select1 = document.getElementById('select1');
        var span1   = document.getElementById('span1');
        var lbWidth = document.getElementById('lbWidth');
        span1.innerHTML = select1.options[select1.selectedIndex].text;        
        lbWidth.innerHTML = span1.offsetWidth;
    }
</script>

Comments

  1. UnknownMay 30, 2014 at 8:51 AM

    Thank you for your script. Unexpectedly, it turned out to be easy to measure the pixel length or width of a string. No matter what the OS is (in a UI all is relative in the same OS), font family, size, ..
    I have evolved your script to that beow. You may publish it for public use. Replace all © (Alt0169) by < and all ® (Alt0174) by >.

    Aad (www.aadx.nl)

    ©!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"®
    ©html®
    ©head®
    ©title®measure sring width©/title®
    ©meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"®

    ©script language="JavaScript"®

    function checkStringWidth() {
    var txtbox1 = document.getElementById('textbox');

    var select1 = document.getElementById('select1');
    var select2 = document.getElementById('select2');
    var select3 = document.getElementById('select3');
    var select3a = document.getElementById('select3a');
    var select4 = document.getElementById('select4');
    var select5 = document.getElementById('select5');

    var span1 = document.getElementById('span1');
    var span2 = document.getElementById('span2');

    span1.innerHTML = txtbox1.value + select1.options[select1.selectedIndex].text;

    span1.style.fontFamily = select2.options[select2.selectedIndex].text;
    span1.style.fontSize = select3.options[select3.selectedIndex].text + select3a.options[select3a.selectedIndex].text;
    span1.style.fontWeight = select4.options[select4.selectedIndex].text;
    span1.style.fontStyle = select5.options[select5.selectedIndex].text;

    stringwidth = span1.offsetWidth;
    span2.innerHTML = stringwidth + ' pixels';
    document.getElementById('line').style.width = stringwidth;
    }
    ©/script®
    ©/head®

    is 1st part

    ReplyDelete
  2. UnknownMay 30, 2014 at 8:51 AM

    2nd part:

    ©body style="font-family:arial; font-size:12pt" onLoad="checkStringWidth()"®

    ©p® ©/p®
    ©p align="center"® ©/p®
    ©div align="center"®
    ©input type="text" id="textbox" name="textfield" style="width:260px" value="Free text" onKeyUp="checkStringWidth()"® +  
    ©select id="select1" style="" onchange="checkStringWidth()"®
    ©option value="0"®©/option®
    ©option value="1"®abcde©/option®
    ©option value="2"®abcdeabcde©/option®
    ©option value="3"®abcdeabcdeabcde©/option®
    ©option value="4"®abcdeabcdeabcdeabcde©/option®
    ©/select®
    ©/p®
    ©div align="center"®
    ©select id="select2" style=";" onchange="checkStringWidth()"®
    ©option value="1"®Courier©/option®
    ©option value="2"®Lucida Console©/option®
    ©option value="3" selected®Arial©/option®
    ©option value="4"®Times New Roman©/option®
    ©option value="5"®MS Console©/option®
    ©/select®
       
    ©select id="select3" style="" onchange="checkStringWidth()"®
    ©option value="1"®10©/option®
    ©option value="2"®20©/option®
    ©option value="3" selected®30©/option®
    ©option value="4"®30©/option®
    ©option value="5"®50©/option®
    ©/select®
       
    ©select id="select3a" style="" onchange="checkStringWidth()"®
    ©option value="1"®pt©/option®
    ©option value="2" selected®px©/option®
    ©option value="3"®em©/option®
    ©/select®
       
    ©select id="select4" style="" onchange="checkStringWidth()"®
    ©option value="1"®bolder©/option®
    ©option value="2"®bold©/option®
    ©option value="3" selected®normal©/option®
    ©option value="4"®lighter©/option®
    ©/select®
       
    ©select id="select5" style="" onchange="checkStringWidth()"®
    ©option value="1" selected®normal©/option®
    ©option value="2"®italic©/option®
    ©/select®
    ©/div®

    ©p align="center"® ©/p®
    ©p align="center"®The combined string (free text and selected) is:©br®
    ©p align="center"®©span id="span1" style="font-family:arial; font-size:50px"®©/span®
    ©hr id="line" style="height:20px; width:0px; color:#000; background-color:#f00; margin-top:-30px"®©/p®
    ©p align="center"®The combined string has a width or length of: ©span id="span2" style="font-size:20px"®©/span®©/p®
    ©p align="center"® ©/p®
    ©p align="center"®The colored bar (hr) has a height of 20px and a ©br®width equal to the length of the selected string.©br®The bar is shifted 30px upward to facilitate comparison.©/p®

    ©/body®
    ©/html®

    ReplyDelete

Post a Comment

Popular posts from this blog

Java encoding : UTF-8, Big5, x-MS950-HKSCS

By -
Suppose you got a file in Big5 containing some HKSCS characters (e.g. 深水埗, 赤鱲角, etc). When your environment (Ref: Charset.defaultCharset( ) ) is either UTF-8 / Big5, you will never get the things work. The proper encoding should be "x-MS950-HKSCS" This situation happens when I'm try the same pieces of code in Java console / Eclipse console and JSP @ Tomcat. While JSP works fine, but sucks in console mode. Finally I found the JSP is actually using encoding "x-MS950-HKSCS". To set environment charset in Eclipse: Right click on the file that you are going to execute (e.g. Testing.java), then "Properties" → "Run/Debug Settings" → "Common" → "Encoding". Type "x-MS950-HKSCS" in the field. What a pity!
Read more