text flow and css3 zoom property

Problem

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

Problem courtesy of: Matt Welander

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.

Solution courtesy of: vals

Discussion

In Web pages you have no proper text-flow control. Mainly this is because different browsers on different platform render the font glyphs differently. The tracking of your text will differ as well. So if you optimize your text to look awesome on your own browser, it might suck on a different one. So say goodby to pixel exact text representation in web browsers. It's a forlorn hope.

P.S.:
Don't use text-align: justify on web pages. It really sucks.

Discussion courtesy of: HerrSerker

This recipe can be found in it's original form on Stack Over Flow.