Work at SourceForge, help us to make it a better place! We have an immediate need for a Support Technician in our San Francisco or Denver office.

Close

jsMath text metrics

2008-12-16
2013-04-29
  • mike seeman
    mike seeman
    2008-12-16

    Hi,

    I'm looking at diagramming using the html 5 canvas element.

    In addition I would like to overlay text and annotations, some of
    which will be mathematical.   In order to implement
    accurate positioning of text I need text metric information. 

    Is there some way of getting this from a string in tex format.
    Presumably it would need to
    be parsed/formatted first and then some kind of
    measureText call would give dimensions.  The information
    can be used for accurate placement or collision detection
    of mathematical annotations.

    Any help or pointers on how I might
    do this greatly appreciated.

    Thanks
    Mike

     
    • The size of the mathematics depends on the CSS settings, and so it is not determined just by the TeX code, but also by the mathematic's placement within the document.  For this reason, jsMath doesn't give you a means of processing a string, but rather processes DOM elements containing math strings.

      So one way to do what you want is to do what you want is to use document.createElement() to create a SPAN (say) and set its innerHTML to the TeX string you want.  Then call jsMath.ProcessElement() on the SPAN element, and finally check the SPAN's offsetHeight and offsetWidth in order to get its size.  This is not a perfect measure, as the DOM size does not always match the TeX box sizes exactly, but may be enough to satisfy your needs.  If you need something more accurate, let me know.

      Note that jsMath.ProcessElement() may run asynchronously, so the element size may not be available immediately after the call completes.  (This can happen if the mathematics requires one of jsMath's extensions to be loaded, for example.)   You should really use jsMath.Synchronize() to make sure that the mathematics is completely typeset before you access its offsetWidth and offsetHeight.  See

      http://www.math.union.edu/locate/jsMath/authors/synchronizing.html

      for more details.

      You might also find the discussion at

      http://sourceforge.net/forum/message.php?msg_id=4790847

      to be useful, as it discusses jsMath/canvas issues.

      Davide