Any progress with the MSIE layout issues?

2007-12-18
2013-04-29
  • Mike Pearson
    Mike Pearson
    2007-12-18

    Hi,

    This is a great system in FF and Safari, but we have problems with IE when the user selects larger font sizes and jsMath is using images. I imagine this is the problem that is already documented in Known Bugs, so I was wondering whether there was any likelihood of further progress on sorting this out - at least for IE7 standards mode?

    Let me know if you need access to the problem page. g m p 26 at c a m dot a c dot u k

    Thanks for all the good work,
    Mike

     
    • Can you be more specific about the issue that you are having? 

      If you mean that you load the page, then change the text size, and jsMath doesn't display properly, then yes, that is the case (and not just with IE).  But if you RELOAD the page, it should display correctly at the new size.  The reason or this is that the images used are appropriate for the original size, but are not appropriate for the new size.  When you reload the page at the new size, jsMath will pull images correct for that size.  It is possible to change the settings so that the images will be scaled along with the text when the text size changes, but this can cause thin lines to be lost, and so a minus sign (for example) might disappear, or a plus can turn into a minus.  That is why that feature is turned off by default, but you can use the jsMath control panel to select scalable fonts (on the Options page, next to Use Image Fonts; it affects both image modes).

      If you mean something else, can you explain it further?  I am not aware of a problem with IE7 and changing the font size other than the one mentioned above.  Please be as specific as you can about the result you are seeing and what you need to do to obtain it.

      Davide

       
    • Mike Pearson
      Mike Pearson
      2007-12-18

      Davide,

      Thanks for replying so quickly. Take a look at http://understandinguncertainty.org/node/41 in IE7 in image symbol fonts mode.
      On first loading this page you are likely to see reasonably good maths - possibly with a little crowding. If you increase the font size or zoom in using the controls in IE Page menu the maths overwrites adjacent text and becomes unreadable. This is in a Drupal installation running 3.4d, so I'd be very happy if you tell me all I need to do is upgrade to 3.4f. Reload - either from IE refresh button or by jsMath RELOAD button does not improve the situation.

      Mike

       
      • OK, thanks for the web site.  I think that there are probably some CSS interactions with jsMath that are at the root of the spacing problem, but I won't get to look into it for a few days (maybe not until after the holidays).  Changing the text size doesn't have any effect on the page, due to the CSS that you are using (personally, I think that is a bad idea).  I have not spent much time with IE7's Zoom feature, but it looks like it may be buggy (no surprise), and I'm not sure I'll be able to work around that.  In any case, it will take some work.

        I'll let you know when I have something more to report.

        Davide

         
      • OK, I figured out the problem.  JsMath was having trouble detecting a small change in font size (between the default for the page and the 13px size that you specified), and that caused the sizes to be incorrectly computed.  I have fixed this in the next version of jsMath, but that is not yet ready for release.

        Instead, I have made a patch file for you, available at

            http://sourceforge.net/tracker/index.php?func=detail&aid=1860722&group_id=172663&atid=862560

        There are instructions on that page.  Let me know if this doesn't clear things up for you.

        Davide

         
    • Mike Pearson
      Mike Pearson
      2007-12-31

      Thank you very much Davide, I'll try that and let you know how it goes.

      A couple of points that may mean that this patch is of more general use than just for our CSS:

      1) I think we do allow the text size to change in our CSS - it certainly does for me anyway.

      2) Testing with MSIE7 the page http://www.math.union.edu/~dvpc/jsmath/examples/Henrici.html, I see identical behaviour to our Drupal page. The page formats correctly only if the Page > Zoom is 100% and the Page > Text Size is Medium. At other settings all pages format in a similar incorrect way (e.g. in the p.421 expression the kappas under the square root appear before the square root sign).

      Hope this helps!

      Mike

       
      • Hmm, when I set the text size, the main text on the page doesn't change (though the jsMath button text size does).  Changing the zoom does change the size, but not changing the text size.  The CSS gives the fonts size as 13px, which I would expect NOT to change, since it is given explicitly in pixels.  I'm using version 7.0.5730.11, so perhaps that has changed in a newer version if it is working for you.

        As for zoom, I haven't addresses that problem.  IE7 does seem to mishandle jsMath when zoom is not 100% in all cases.  The Henrici page you site works fine for me as long as zoom is 100%, but text size can be anything.  I should have been clearer about what the issue was that I had addressed (which was the baseline and width errors that you were seeing in the un-zoomed version of the page).  I still haven't had the chance to look into the zoom problem, which is undoubtedly an IE bug, and there is no guarantee that I can do anything about it.  I'll let you know if I find anything more.  Personally, I think their zoom feature is pretty worthless, but to each his own.

        Davide

         
      • Well, it looks like there isn't going to be a complete solution to the zoom problem that is entirely satisfactory.  Using

            <STYLE>
                .typeset {letter-spacing:0}
            </STYLE>

        helps, but doesn't completely eliminate the problem (this will be included in the styles set by version 3.4g, but you can add it to your site now if you want).  Even with this, IE7 doesn't always format the paragraphs containing the mathematics correctly, though the mathematics itself seems to be fixed by this.

        What does seem to work is adding letter-spacing:0 to the block-level element containing the mathematics, and that is outside of jsMath's control, so you will need to do that yourself.  One solution is to add letter-spacing:0 to the <BODY> tag itself.  This will make the page zoom properly (or has in my examples), but it also decreases the quality of the spacing of the letters with the paragraphs, and so it may not be a desirable solution.  You will have to decide whether zooming is more important or readability in general.

        Davide

         
    • Mike Pearson
      Mike Pearson
      2007-12-31

      Davide,

      Getting there! Many thanks!

      To correct my previous message - I'm testing with 2 Drupal themes and I see that the one you have access to did indeed have a 13px fixed font size. I've corrected this now, applied the patch - it's definitely being called - and it now behaves correctly for Page > Text Size changes.

      It still fails in the same way for Page > Zoom changes though, which is a shame since many users will use the control+ and control- shortcuts to resize, and these change the zoom factor rather than the font size. 100% zoom works correctly, but all others fail.

      Mike

       
      • OK, the two different themes would certainly explain the differences that we were seeing.  I confirm that I am now able to change the font size using the text size menu item.

        As for the zoom feature, I did a little experimenting, and it does seem that IE7 is very buggy about this in ways that have nothing to do with jsMath, and seem particularly non-intuitive even for a Microsoft product.  Doing a little internet searching, I see that this problem is documented at

        http://www.brunildo.org/test/ie7_relzoom2.html

        and there are other zoom-related bugs as well.  They suggest some possible remedies, so perhaps I can work around it after all.  Stay tuned for further updates.

        Davide

         
    • Mike Pearson
      Mike Pearson
      2008-01-02

      OK - I see what you mean now having fiddled around with letter-spacing a bit. Putting letter-spacing=0 on the typeset class fixes display maths but not inline maths. You have to adjust letter-spacing on the enclosing paragraph to fix the inline maths, but that makes the ordinary text quite nasty. 'i' kerning is really bad.

      I've ended up with setting letter-spacing at 0.04em in the body style as a reasonable compromise, though it's by no means pretty. We'll probably do some work now on narrowing this down to just those paragraphs that really need it. I don't know whether that makes any sense to you, but it appears to work.

      It is really difficult to understand why IE has this zoom feature - it doesn't appear to offer anything over text resizing except for extra bugs - and yet they assign it the ^+ and ^- shortcuts.

      Thanks for the help.

      Mike

       
      • I tried out your value of .04em, and that does seem a reasonable compromise, though it is ridiculous to have to do it at all.  The letter spacing is too wide, but it does look better than 0.  I've tried other approaches, but none of them work.

        I did a little reading about the zoom feature, and apparently their goal was to make it possible to enlarge the page without changing the layout (whereas just enlarging the font can cause the layout to change).  There are people out there who think this is the right thing to do (e.g., elderly and visually impaired who need larger fonts), so I guess there is some value to it, but the added horizontal scrolling seems pretty awkward to me.  And I agree that binding CTRL-+ and CTRL-- to it would not have been my choice.

        If you add zoom:10% to the .typeset style (in addition to the letter spacing), then that should make the in-line math format correctly, even though it may not be placed at the right point, and the rest of the paragraph may be incorrectly displayed.

        Sorry it is such a pain for you.  I've been able to work around nearly every IE bug I've found so far, but I think this one has me licked.

        Davide

         
    • Mike Pearson
      Mike Pearson
      2008-02-04

      Davide,
      I did some work on limiting the impact of the letter-spacing fix over the w/e. I discovered that the easiest way to do this really needed the addition of a hook in jsMath in order to add an inline class to blocks that contain inline maths. It's a bit much to expect authors to remember to do this so I wanted it automated. My first attempts to do this entirely outside of jsMath failed - I think because of timing issues - you have to detect class="math" before jsMath runs, or class="typeset" after it loads and neither seems to be that easy to achieve.

      So my solution patches jsMath.js around line 6161 with some code hung on a jsMath.Browser == 'MSIE' guard:

      [code]
          math = obj.getElementsByTagName('span');
          for (k = 0; k < math.length; k++) {
            if (math[k].className && math[k].className.match(/(^| )math( |$)/)) {
                if (jsMath.Browser.renameOK && obj.getElementsByName) {
                    math[k].setAttribute('name','_jsMath_');
                // Fix IE zoom control bug
                if(jsMath.Browser == 'MSIE') {         
                clsName = math[k].parentNode.className;
                if(!clsName.match(/inline/))
                    math[k].parentNode.className += ((clsName.length > 0) ? " inline" : "inline");
                }

            }
                else {element[element.length] = math[k]}
            }
          }

      [/code]

      (Excuse my pidgin javascript)

      I then apply the necessary css to the inline class. Of course this now gives me maintenance issues as I have to re-apply the patch over each upgrade and recompress the js, so any help you can give me on these would be gratefully received.

      Mike

       

      Related

      Code: code

      • This should work most of the time, but the parent node might not be the enclosing block-level element, which is the one that really needs to be changed.  For example, if you happened to have some math inside italic tags (e.g., <I>some text $x+1$</I>), then the italics would be changed, and that would not have the desired effect.  But most of the time it will work.

        You also should mention that you need additional CSS styles for "inline .typeset".  These could be added to the jsMath styles array so that the page author doesn't have to include them him- or herself.

        Finally, the recommended way to make modifications to jsMath is not to edit jsMath.js directly, but rather to override one of jsMath's functions using an external file.  For example, you could make a file jsMath/plugins/MSIE-zoom-fix.js that contains

        |  jsMath.Translate.GetMathElements = function (obj) {
        |    (your patched version here)
        |  };

        (vertical bars used only to keep SourceForge from removing the leading blanks) and then add "plugins/MSIE-zoom-fix.js" to the loadFiles array of the jsMath/easy/load.js file.  This will cause jsMath to load your patch once it is installed, and your patched routine will replace the jsMath version.  No need to modify new versions of jsMath or for recompressing edited copies.  You simply move your MSIE-zoom-fix.js file to the new version's plugins and you are off and running.

        In fact, you could have your patch made only if the browser is MSIE:

        |  jf (jsMath.browser == 'MSIE') {
        |    jsMath.Translate.GetMathElements = function (obj) {
        |      (your patched MSIE-specific version  here)
        |    }
        |  }

        so that the patch would not need to check for browser == 'MSIE' for each span, but only once at the beginning of the page.  That would not slow down other well-behaved browsers.

        As it stands, this patch would still include some of the original jsMath code, and if that were to change from one version to the next, then you would have to change your patch file.  There is another approach that would make that less likely:

        |  if (jsMath.browser == 'MSIE') {
        |    jsMath.Translate.OldGetMathElements = jsMath.Translate.GetMathElements;
        |    jsMath.Translate.GetMathElements = function (obj) {
        |      var math = jsMath.Translate.OldGetMathElements(obj);  // get elements
        |      for (var i = 0; i < math.length; i++) {
        |        if (math.tagName == 'SPAN') {  // only process SPANs, not DIVs
        |          var clsName = math[i].parentNode.className;
        |          if (!clsName.match(/inline/))
        |             math[i].parentNode.className += ((clsName.length > 0) ? " inline" : "inline");
        |        }
        |      }
        |      return math;
        |    }
        |  }

        Here, you let jsMath's original GetMathElements routine get the list of math elements, then you postprocess it with your own code.  That way, you don't have to worry about changes within the GetMathElements code when you update jsMath.  It's a tiny but less efficient, in that it will scan through DIVs along the way, but should not be much noticeable in relation to the length of time jsMath actually takes to process the math.

        You can also add something like

        |   jsMath.Setup.Styles({'inline .typeset': '(whatever CSS you need here)'});

        inside the "if (jsMath.browser == 'MSIE')" block so that the needed CSS is automatically added to the page as needed.

        Hope that helps.  When you have your final version, please post it here again.

        Davide

         
    • Mike Pearson
      Mike Pearson
      2008-02-18

      Davide,

      Here's the code I ended up with - just a minor change on line 6. Created in plugins/MSIE-zoom-fix.js:
      | if (jsMath.browser != 'MSIE') {
      |     jsMath.Translate.OldGetMathElements = jsMath.Translate.GetMathElements;
      |     jsMath.Translate.GetMathElements = function (obj) {
      |     var math = jsMath.Translate.OldGetMathElements(obj);  // get elements
      |     for (var i = 0; i < math.length; i++) {
      |         var m=math[i];
      |         if (m.tagName == 'SPAN') {  // only process SPANs, not DIVs
      |         var clsName = m.parentNode.className;
      |         if (!clsName.match(/inline/))
      |             m.parentNode.className += ((clsName.length > 0) ? " inline" : "inline");
      |         }
      |     }
      |     return math;
      |    }
      | }

      This goes with some CSS:
      | .inline {
      |   letter-spacing:0.04em;
      | }

      .typeset {
      }

      As you say - it's not foolproof, but in practice there seem to be very few occasions when maths is embedded in an inline parent. When that does happen we'll just have to remember to add the 'inline' class to the surrounding block manually.

      Mike

       
      • Right, I should have used math[i].tagName not math.tagName.  Sorry about that, and thanks for posting your final version.

        Davide

         
    • Mike Pearson
      Mike Pearson
      2008-03-07

      Davide - we need to keep an eye on this as IE8 has an updated zoom feature.

      See http://www.microsoft.com/windows/products/winfamily/ie/ie8/readiness/DevelopersExisting.htm

      <blockquote>
      Accessibility
      Zoom Version 2

      Page zoom lets you enlarge or reduce the view of a web page to improve readability. The feature is particularly useful on really large and really small displays, allowing for scaling of content while maintaining the intended layout of the page. The second iteration of the zoom feature set (the first shipped in Internet Explorer 7) focuses on improving the existing experience by providing a higher quality, more predictable and persistent zooming experience. Primary features in this release include the elimination of horizontal scroll bars for the majority of mainstream scenarios and the introduction of persistent zoom states.
      See Zoom Version 2 white paper for more information.
      </blockquote>

       
      • Thanks for the pointer.  I read their document about the new Zoom feature, and it looks like it should be an improvement.  It is a complete change from their earlier approach of not adjusting the layout (or at least saying that was what they were doing), and now follows the Firefox3 model of reflowing the page.  That, at least, is a useful thing.  Unfortunately, it may may it harder for jsMath to look good at the larger sizes, as it will scale the images itself rather than having jsMath use its higher-resolution ones.  This is what Firefox3 does, and I haven't yet found a way to compensate yet.  Sigh.

        Davide