Jump to content
Sign in to follow this  

SmartCL.Components MeasureText functions not working in chrome

Recommended Posts



I have found the functions as listed don't work in chrome but do work as expected in the internal browser.


example code:


procedure Test.Resize();



writeln(ErrorLabel.MeasureTextSize(errorlabel.handle,'my test').tmWidth);

MyLabel.width := ErrorLabel.MeasureText(ErrorLabel.Caption).tmWidth ;



In chrome this outputs 0, and looks like this: https://puu.sh/xnKRo/df97c53ccb.png


but in SMS this will output 73 and display correctly (more or less): https://puu.sh/xnKPx/f596b44247.png


Please let me know if i'm doing something wrong!




Seems like further testing is needed, it works on chrome on my mobile.

Share this post

Link to post
Share on other sites

In general I would not use MeasureTextSize to set the width of a label. As a method it is pretty slow.


Before the new RTL is released, a quick and nice way to do this is to use a TW3CustomControl:




Lab.InnerText:='Whatever you want';

Lab.StyleClass:='TW3LabelText'; //Unless you have your own style


The trick is this: When you don't set the size yourself, the browser resizes it automatically.


In the new RTL you can simply set in Label.AutoSize:=True, but this same trick works there too.

Share this post

Link to post
Share on other sites

AFAIK desktop browsers always give a correct result using measuretext

However some mobile browsers reply with 0


status April 2017:

Android-Chrome, Android-Chrome-beta and Android-Chrome-dev do that,

Android-firefox is ok



The following workaround works in the current version of SMS ( :



    W := mObj.MeasureText(mObj.getFontInfo(self.handle),
    If W = 0 then
    // some mobile browsers report mObj.MeasureText as zero
    // so in that case use workaround
      W := JSMeasureText(Label.InnerHTML,16,0,'');

Function JSMeasureText(mText: String; mFontSize: Integer; mywidth: integer; mStyle: String) : Integer;
  S, S2 : String;
  W, H : Integer;
  S := mText;
  S2 := inttostr(mywidth);
function MyMeasureText(pText, pFontSize, pWidth, pStyle) {
    var lDiv = document.createElement('lDiv');


    lDiv.innerHTML = pText;

    if (pStyle != '') {
        lDiv.style = pStyle;
    lDiv.style.fontSize = "" + pFontSize + "px";
    lDiv.style.position = "absolute";
    lDiv.style.left = -2000;
    lDiv.style.top = -2000;
    lDiv.style.width = "" + pWidth + "px";
    lDiv.style.float = "none";

    var lResult = {
        width: lDiv.clientWidth,
        height: lDiv.getBoundingClientRect().bottom
//        height: lDiv.clientHeight

    lDiv = null;

    return lResult;

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this