jquery - Manage tiny fonts visualization with CSS/Javascript in Firefox -
i trying create website in navigation based on zoomable contents.
for instance, here screenshot of can see after opening webpage:
then, using zoom.js "zooming" page , able read text. however, after magnification got this:
the font-size set 9.4%, , can see causes characters overlapped , not correctly positioned.
i tried use jquery plugin fittext.js or jquery textfill, see if changed font-size in "magic" way solve issue; unfortunately had effect in solving visualization issue.
so question is: how can make font looking "normal"? there jquery plugin or other js library manage problem?
i using firefox, , prefer focus on using browser moment.
as suggested nico o , ed plunkett in comments, solution problem start big page, in 20 times bigger desired page size. added following css scale 20 times smaller:
body { transform: scale(0.05); transform-origin: 0 0; }
when need zoom on point, add new transformation parameters in css, changing transform
property (i used jquery, can done in many other ways):
$("body").css("transform", "scale("+scale_factor+") translate("+translate_data+")");
note didn't need additional library (with exception of jquery) this.
Comments
Post a Comment