Mon, 29 Jan 2007
PNG Transparency (continued)
Well, the problem of PNG transparency was more complicated than I thought.
Firstly, how does it work: the original approach
tries to look up all the <img>
tags in the document,
and replace them by the following text:
<span ... style="width:XXXpx;height=YYYpx;filter:progid: DXImageTransform.Microsoft.AlphaImageLoader(src= 'URL_TO_THE_IMAGE',sizingMethod='scale');"> </span>
There are problems with this approach, however:
- Firstly, the Javascript code does not quote the image URL correctly, so should it include the quote character, the transformation would be incorrect.
- The code searches for PNG images by looking at the
src
attribute of the<img>
tag and testing whether it ends by a ".PNG
" string. Which does not work for our images, because they are generated, and end with the TeX code in the query string, instead of the PNG file extension. Does anybody know how to search the images based on their MIME type instead of the URL? - Another problem was in MSIE parsing itself: when the image URL contained
the closing parenthesis (strings like
f(x)
are common in math :-), MSIE took the parenthesis as the closing element of the wholeAlphaImageLoader()
function, despite that the closing quote of the URL has not been seen yet :-( I had to add the URL-quoting of parentheses to the Javascript code. - And the worst one: when the URL contained backslashes (be it quoted as
%5C
or not), the actual HTTP request made by theAlphaImageLoader
had each backslash substituted by two backslashes! I don't know how to solve this cleanly. As you can guess, backslashes are also pretty common in the TeX syntax :-). What I did was to add ";msiehack=1
" at the end ofAlphaImageLoader
URL, and on the server side substitute all sequences of two backslashes back by a single backslash if "msiehack=1
argument is seen.
After all, I have the PNG transparencey hack working, but the amount of dirty hacking needed to get it working is simply stunning.