Autosize doesn't work using custom font?

  • Dear Klaus,

    we've looked at the possibility of using some custom fonts for our textfield based plugins (layers), so far we've only been using Arial. Thing is, it seems the onautosized event isn't always working properly. Here's the code that sets the css for the layer in question:

    menuItem.css = "font-family:Armata,sans-serif;font-size:13px;color:#FFFFFF;text-align:center";

    The text appears and displays fine, but (with a certain html string) it sets itself to a width of 111px, when in reality it's more like 128. If I find the corresponding table element in the devtools, it correctly displays the height of 128x40px.

    Yet the following code

    menuItem.onautosized = "trace(width)";

    traces 111 around 9 times out of 10. Yet on the 10th reload it traces 128 correctly.

    Any idea what might be causing this? As long as we've only used Arial, it was always working perfectly...

  • Hi,

    the autosizing of the textfields works that way:
    - it waits until the browser provides a valid size for internal html element of the textfield - that typically means a size larger than 0
    - once it got the size, the onautosize event will be sent

    But it doesn't wait for any external resources (e.g. custom font files) that the browser eventually might load and add later.

    See here a for manual solution by tracking the loading state of the custom fonts and forcing krpano to refresh the textfields:
    Embeddded fonts in HTML5?

    Best regards,

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!