CSS zoom on body or @viewport or other?

HTML & CSS
1

Hey guys. I need to zoom my outputted PDF to HTML conversion. It’s done with pdf2htmlEX software. Adjusting the CSS I don’t think is an option as it is far too complicated. Zoom 1.25 seems to work just perfect. SO… If I wanted to zoom the entire layout what would you suggest targeting? @viewport, body, html, or other? Thanks.

As an aside, I believe everyone plays nice with zoom except firefox. If I apply -moz zoom to Firefox on the body it disappears. Applying it to the main div works but then it’s not aligned correctly.

2

Remember that Firefox has two Zoom modes, Normal zoom like other browsers and Zoom Text Only. You will have to be in the “normal” zoom mode to compare FF’s behavior to that of other browsers.

4

Hey. Well firefox is the only one that doesn’t support css zoom. Which is no big deal here.

5

By CSS zoom do you mean this?

The zoom property in CSS allows you to scale your content. It is non-standard, and was originally implemented only in Internet Explorer. Although several other browsers now support zoom, it isn’t recommended for production sites.

1 Like
6

Probably better to use transform:scale() instead although you will also need to adjust the transform origin.

2 Likes
7

Yeah

.zoom {
zoom: 150%;
}

8

.element {
transform: scale(1.25);
}

So like this? Default is center correct? Is that cross browser?

9

Works in all modern browsers which is 98% of them.

You will need to set transform origin to top left or it will slide out sideways.

body {
	transform: scale(1.25);
	transform-origin: top left;
}

Note that you will get a horizontal scrollbar but I’m sure that would be the same with zoom.

1 Like
10

Cool cool thanks Paul. I thought I read somewhere that default was center? Is that true?

Also so if I need the entire page transformed (zoomed) then what element (body, html, @viewport) should I put it on?

11

Yes the default is center but if you zoom the body then you will cut off the left side and probably the top which is why you need left top as in my example.

You could zoom the body as per my example but perhaps if you have a whole page container then perhaps zoom that instead.

You may just have to try it and see what works best for the job in hand.

12

Thanks guys your the best. Fun to be using my brain again… working out some cobwebs. There is a page container but when I added zoom to it it when off to the right. And the code is like 100 pages long and so confusing it would take me a life time to figure out. So I happy these simple alts

13

Here is what I found… transform scale on the body makes it all disappear even with origin set to 0 0. Putting transform on the page container works (getting it centered would take some work). But transform unfortunately basically seems to blow up an image of the original. So the lines and text get blury and slight scale deviations. Whereas zoom simply zooms pixel perfect the original. I think I am going to stick with zoom.

14

Except in Firefox, I think you said.

2 Likes
15

Yeah doesn’t work in firefox.

16

Are you sure about that? I have not seen this with transform.

17

Are you sure you didn’t run into this issue:

When both zoom and transform: scale() are applied, Chrome will perform zooming operation twice.

18

I closed the tabs already or Id take a screenshot. But yeah Im positive. I went back and forth obsessively from tab to tab with my eyes 6 inches from the screen to see the dif. Wasn’t huge but it was very noticeable when being compared to zoom. Lots of the pdf conversions are complicated table set ups where pixel perfect would be important. Transform moved each line 1 or 2px up down or left or right too.

19

Im sure. I had the zoom tab open and with origin made it so the transform one the page container was in the exact pixel place as the zoom one. So I could see changes from tab to tab.

Edit - this was in Safari on mac mind you where transform blurred the lines and etc. I didnt test it side by side in any other browser.

20

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.