Forum Discussion

ewaghabi's avatar
ewaghabi
Frequent Visitor
5 years ago
Solved

measureSvgTextWidth giving wrong results?

I'm using measureSvgTextWidth, from textMeasurementService ("powerbi-visuals-utils-formattingutils") - and getting lower values than I think it should give, based on actual svg element. On the other side, measureSvgTextRect seems to return the correct width:

 

 

let textProperties = {
                text: "Lorem ipsum dolor sit amet",
                fontFamily: "Trebuchet MS",
                fontSize: "17"
};

console.log(tms.measureSvgTextWidth(textProperties)); // 120.6005859375
console.log(tms.measureSvgTextRect(textProperties));  // width: 209.9375

 

 

From inspector I can verify the 209.9372 witdh as correct, in both Edge and Chrome.

 

The problem is getTailoredTextOrDefault uses measureSvgTextWidth and, thus, isn't working properly. But I have used both measureSvgTextWidth and measureSvgTextWidth before with sucess. I can't figure out what is different.

Need Help
  • ewaghabi's avatar
    ewaghabi
    5 years ago

    Hi, Henry, thank you for you answer!

     

    I didn't say the problem was with getTailoredTextOrDefault. The problem seem to be with measureSvgTextWidth, that returned the wrong size. 

     

    I just now figured out what is wrong, so I'll just put here for further reference: one must inform the fontsize unit, either in points (pt) or pixels (px). If only the number is used, although anything else works fine, this function calculates the wrong width (which breaks getTailoredTextOrDefault as well).

     

    So, to further exemplify:

    let textProperties = {
   text: "Microsoft PowerBI!",
   fontFamily: "sans-serif",
   fontSize: "24"        
};
               
console.log(tms.getTailoredTextOrDefault(textProperties, 100));  // Microsoft PowerBI!

     

    Here's a little experiment I've made:

     

    I didn't see any reference to this behaviour in the official document, nor any mention of what is the default unit (if any). 

2 Replies

  • v-henryk-mstf's avatar
    v-henryk-mstf
    Icon for Community Support rankCommunity Support
    5 years ago

    Hi ewaghabi ,

     

    According to your description, the reason that causes the getTailoredTextOrDefault function to use the error is that no specific value is specified in the return value. For details, refer to the official website document for the use of getTailoredTextOrDefault and measureSvgTextWidth.

    Here is the official document link.


    If the problem is still not resolved, please provide detailed error information and let me know immediately. Looking forward to your reply.

    Best Regards,
    Henry

    If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

    • ewaghabi's avatar
      ewaghabi
      Frequent Visitor
      5 years ago

      Hi, Henry, thank you for you answer!

       

      I didn't say the problem was with getTailoredTextOrDefault. The problem seem to be with measureSvgTextWidth, that returned the wrong size. 

       

      I just now figured out what is wrong, so I'll just put here for further reference: one must inform the fontsize unit, either in points (pt) or pixels (px). If only the number is used, although anything else works fine, this function calculates the wrong width (which breaks getTailoredTextOrDefault as well).

       

      So, to further exemplify:

      let textProperties = {
   text: "Microsoft PowerBI!",
   fontFamily: "sans-serif",
   fontSize: "24"        
};
               
console.log(tms.getTailoredTextOrDefault(textProperties, 100));  // Microsoft PowerBI!

       

      Here's a little experiment I've made:

       

      I didn't see any reference to this behaviour in the official document, nor any mention of what is the default unit (if any).