Division symbol

2008-11-11
2013-04-29
  • We used unicode to display the arithmetic equations. But the division symbol is not displaying proporly. A gap is comming between the curve and the horizontal line. Please help me to resolve this issue....

     
    • I am using the below jsmath code to display the division...

      <div class="math">\left){\vphantom{11}}\right.
      \!\!\!\!\overline{\,\,\,\vphantom 1{1}}
      \&lt;/div>

      please let me know any idea to remove the gap...

       
    • JsMath doesn't have as fine-grained control over the spacing as TeX does.  Mostly this is because jsMath depends on the browser to place the characters based on relative sizes that jsMath is only able to determine roughly.  The sizes that jsMath obtains from the browser are in pixels, but that is far too large a measurement to do the delicate positioning that you require.  JsMath does the best it can with the information it has, but it does not really know how big the various characters are going to appear on screen.

      Be that as it may, there was an error in jsMath's measuring of the heights (it looks like a left-over hack from an earlier attempt to overcome some other problem).  I have improved the measurement algorithm, and that helps with your problem.  It seems to take care of it completely in all browsers but Internet Explorer (naturally), where there is still a small gap.

      The correction will be part of the next release of jsMath, but for now you can add the following lines to your jsMath/easy/load.js file just before the "Do not make changes below this" comment.  (If you are not using easy/load.js, let me know how you are loading jsMath and I'll give you the right way to make the patch).

      jsMath.Box = {
      __TeX: function (C,font,style,size) {
      ____var c = jsMath.TeX[font][C];
      ____if (c.d == null) {c.d = 0}; if (c.h == null) {c.h = 0}
      ____if (c.img != null && c.c != '') this.TeXIMG(font,C,jsMath.Typeset.StyleSize(style,size));
      ____var scale = jsMath.Typeset.TeX(style,size).scale;
      ____var box = new jsMath.Box('text',c.c,c.w*scale,c.h*scale,c.d*scale);
      ____box.style = style; box.size = size;
      ____if (c.tclass) {
      ______box.tclass = c.tclass;
      ______if (c.img) {box.bh = c.img.bh; box.bd = c.img.bd}
      ____________else {box.bh = scale*jsMath.h; box.bd = scale*jsMath.d}
      ____} else {
      ______box.tclass = font;
      ______box.bh = scale*jsMath.TeX[font].h;
      ______box.bd = scale*jsMath.TeX[font].d;
      ______if (jsMath.Browser.msieFontBug && box.html.match(/&#/)) {
      ________box.html += '<span style="display:none">x</span>';
      ______}
      ____}
      ____return box;
      __}
      };

      Note that underlines are used here at the beginning of the line in order to show the text indented; you will need to replace the underlines with spaces in the jsMath/easy/load.js file.

      As I mentioned, there is still a small gap when using MSIE.  You might try

      \raise1px{\left)\vphantom{11}\right.}\!\!\!\overline{\,\,\phantom{1}1}

      instead if that is important to you.  Note that \raise works slightly differently with jsMath than in TeX itself (you do not need an \hbox), and you should remove one of the \! and \, since inside the \raise, the \left and \right don't insert the \, space that they do within a larger equation.  You should not use more than 1px, though, as it will cause browsers other than MSIE to overcompensate and look bad.  If ALL your users are using MSIE, you can do it, but if you want your site to work with other browsers, you can't get away with more than 1px or so.

      Hope that works for you.

      Davide