Zoomable Type is a jQuery plugin for reading small text on a display from far away. Text is upscaled to the largest size based on its width and the browser's viewport.
Try some examples.
Zoomed text will remain centred in the browser after scrolling or resizing.
Zoomable Type is completely unobtrusive. You only need to set a common class on the elements you care about for them to become zoomable. Works great with the hCard microformat.
The plugin is compatible with all modern browsers, including IE7+. Browsers without CSS3 support fallback to satisfactory defaults.
Zoomable Type is intentionally disabled on mobile devices to prevent conflicting with native dialling functionality and obfuscating small displays.
I'm building a web application with many contact numbers.
Reading a contact number off a display and typing it into a handset can be difficult when the text is small and you lose your place.
Apple have already solved this problem in Mac OS X with the “Show in Large Type” functionality found in Address Book and Mail. Zoomable Type implements this as a jQuery plugin for the web.
Load jQuery, the plugin and the stylesheet.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> <script src="jquery.zoomabletype.js" type="text/javascript"></script> <link rel="stylesheet" href="jquery.zoomabletype.css" type="text/css" media="all" />
Markup your zoomable elements.
My contact number is <span class="zoomable">(05) 3581 8761</span>
Invoke zoomabletype() inside the DOM ready event and you're done!
jQuery(document).ready(function() {
jQuery('.zoomable').zoomabletype();
});
zoomabletype() takes a number of options. You should pass these in as an object.
The source resides on GitHub and is distributed under the MIT licence.
Zoomable Type was created by Tate Johnson.
