Search code examples
htmlcsszoomingscale

text flow and css3 zoom property

I have a div containing text. In editmode this div is zoomed out to roughly 0.9 using css to fit in my admin interface. In presentation mode it is however not zoomed out, and there - loand behold - the text flows totally different. Line feeds are in totally different places.

Is there a way around this or will I just have to give up on zooming out during editing?

Look in bottom right corner on these pics... First the scaled version in editmode, then the full-size, unscaled, unzoomed version for presentation mode.

scaled

full size

Solution

  • I don't know if I have reproduced your issue at 100%; but I have prepared a similar layout, and found the same problem than you in Chrome.

    But changing zoom to 

    -webkit-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);

    solved the problem in Chrome.

    In IE10, the problem didn't show.

    Haven't tried others browsers, though.

    If suport for IE 8 is required I would try :

    #transformedObject {

/* IE8+ - must be on one line, unfortunately */ 
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.9, M12=0, M21=0, M22=0.9, SizingMethod='auto expand')";

    This taken from useragentman web, I haven't tried it

    I see that my previous comment was poorly explained: In my tests in IE10, both the zoom and the transform worked well. I don't know if I have reproduced the problem exactly, so I don't know if I have solved it; but I least looks like it's safe to do the change.

    See it in test:

    fiddle

    When you check the checkbox, the width of the divs will grow, just to see different adjusts to the layout. The divs are: original, transformed (green) zoomed (red) and both transformed and zoomed overlayed to see the difference. At least in IE 10, both transformed and zoomed are equivalents to the original.