CODEWITHSUNDEEP
htmlcssinternet-explorer
Gunnzie
Gunnzie

Reputation: 31

HTML Page Rotation Using DXImageTransform Causes Quality Loss

I am rotating some pages in a HTML document so that in the same document some pages are printed in portrait and some are printed in landscape. This is easy to do in current browsers using CSS3 transform rotate. However, I also need to support IE6 where the previous method doesn't work. I have got round this by using some conditional CSS when the browser is IE7 or lower. This uses this on the main div for each page (which all other page content is embedded in):

    filter: progid:DXImageTransform.Microsoft.Matrix(
            M11=3.061515884555943e-16,
            M12=1,
            M21=-1,
            M22=3.061515884555943e-16,
            SizingMethod='auto expand');

This works okay in IE6 in that it correctly rotates the required pages in the document and as far as layout goes, it prints correctly. However, the quality of the printout on these rotated pages is sub-standard. Unlike the CSS3 solution which prints perfectly. I could understand the degradation if I was scaling the page or using an angle other than 90,180 or 270 degrees but I'm not.

The pages consist of tables with text. All text is lowered in quality but especially the bolded text.

Is there any way of keeping the quality?

Note: I've already tried rotating it using BasicImage which produces exactly the same result.

Upvotes: 3

Views: 287

Answers (1)

jantimon
jantimon

Reputation: 38160

If you use only 90°, 180° and 270° you might try BasicImage instead of Matrix:

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

The rotation property of the BasicImage filter can accept one of four values: 0, 1, 2, or 3 which will rotate the element 0, 90, 180 or 270 degress respectively.

See the MSDN BasicImage Filter Documentation for details and examples.

Upvotes: 1

Related Questions