Search code examples
javascriptjqueryhtmlcssmathml

is it possible to know the vertical dimension of rendered HTML within Javascript/jQuery?

I'm working on a website with a lot of MathML and as you can see from examples, the vertical dimension of a rendered formula would be hard to guess based on just looking at the code, without rendering it first.

an example of a rendered formula

 <math display="block"> <mrow> <msub> <mi>a</mi> <mn>0</mn> </msub> 
 <mo>+</mo> <mfrac><mn>1</mn> <mstyle scriptlevel="0" displaystyle="true"> ...

On the other hand, it seems that the browser clearly "knows" the vertical dimension at some point in the process of building the page.

Is there a way for me to get information about the size of rendered HTML expressions, within Javascript/jQuery, so that I can adjust the dimensions of any containing boxes accordingly?

To explain a little more, If I was rendering "plain text" I could estimate the vertical dimension by counting the number of "lines" -- but clearly this is hacky and it's useless for the case I'm interested in.

jQuery(this).find('span').each( function(){
    if ($(this).css('display') != 'none'){
    // count the number of lines in this span
      num_lines += Math.ceil(jQuery(this).text().length/84);
      max_lines = Math.max(max_lines,num_lines);
    }
}
Solution

  • You can use javascript functions :

    1.The innerWidth property sets or returns the inner width of a window's content area.

    window.innnerHeight

    2.The innerHeight property sets or returns the inner height of a window's content area.

    window.innerWidth