I'm scaling my site based on window size, but this ruins user's zoom


#1

For example, check out http://stage.mapper.ai. If you resize your window, you’ll see that the size of things (f.e. the menu) scales up or down. It uses transform:scale() to achieve the affect. But, if you try to zoom (f.e. pressing ctrl-+/-) you’ll notice that this changes the window size, and therefore scale my size in the opposite direction of the user zoom.

So, the only way to zoom as a user is to modify the font setting, which affects all sites.

Inspect the div#root element to see the transform applied as you resize your window.

Any thoughts on how to allow zoom to work? Should I add a UI component that lets the user scale the root font size as a workaround?


#2

Looks like an SVG problem — SVG does not support reflowing text to fit, but you might be able to get close by using ems in the <text> layout attributes, instead of transform to position each line:

<text x="858.2422" y="69.8em" class="st25 st26 st46">
  People are always
  <tspan x="858.2422"  dy="1.5em" class="st25 st26 st46">on the move.</tspan>
</text>

This wouldn’t be a problem if the text was HTML elements, since those do reflow. It looks like the SVG is coming out of Adobe Illustrator, so good luck with that — Illustrator is as good at exporting SVG as Microsoft Word is at exporting HTML.