Arctext.js - Curving Text with CSS3 and jQuery. While CSS3 allows us to rotate letters, it is quite complicated to arrange each letter along a curved path.
Arctext.js is a jQuery plugin that let's you do exactly that. Based on Lettering.js, it calculates the right rotation of each letter and distributes the letters equally across the imaginary arc of the given radius. View demo Download source While CSS3 allows us to rotate letters, it is quite complicated to arrange each letter along a curved path. Arctext.js is a jQuery plugin that let’s you do exactly that. How it works The main idea behind the Arctext plugin is to rotate letters with CSS3 transforms in order to place them along a curved path. Options The following options are available: BigText Makes Text Big.
11 January 2011Read this in about 3 minutes.
*I like shortcuts: Fork BigText on Github or Check out the BigText Demo Wizard It all began with a simple web foray to Designing Monsters. Their simple, typographic design was beautiful. But why? Their combination of the beautiful League Gothic font, use of Lettering.JS, and some simple font scaling gave the page a wonderful consistent vertical alignment. At its simplest, the BigText jQuery plugin takes a single element and sizes the text inside of its child <div>s to fit the width of the parent element. <div id="bigtext" style="width: 300px"><div>The elusive</div><div>BIGTEXT</div><div>plugin exclusively</div><div>captured on film</div></div> $('#bigtext').bigtext(); Implementation Details The plugin itself is more than just a simple font-size incrementer.
The BigText Demo Wizard This is where the magic happens. Turns out, the BigText Demo Wizard makes for really easy Kinetic Typography screencasts (not amazing, but surely easy): It's Bacon! A jQuery plugin that allows you to wrap text around a bezier curve or a line. Rainbow - Javascript Code Syntax Highlighting. Arctext.js - Curving text with CSS3 and jQuery. Kiro. Download: textualizer.js - (12.67 kb) development textualizer.min.js - (4.83 kb) production Usage Animation effects Textualizer currently has the following effects: fadeIn, slideLeft, slideTop, and random.
You can choose which effect to use by setting the effect option. .textualizer('pause') Pauses all animation at the next blurb. Events .on('textualizer.changed') Triggers when a blurb has completed animating, before switching to the next blurb in the list. Browser support Textualizer has been successfully tested in the following browsers: Chrome Safari 4+ Firefox 3.5+ IE 6,7,8,9+ Opera 10.6+ Mobile Safari (iOS 4+) Problems? If you encounter any problems, please use the GitHub issue tracker (GitHub account required). For anything else, feel free to email me, or post a comment below. Format money / currency in JavaScript. Accounting.js is a tiny JavaScript library for number, money and currency formatting, with optional excel-style column rendering (to line up symbols and decimals).
It's lightweight, fully localisable and has zero dependencies. Library Methods formatMoney() - format any number into currency The most basic function of this library is money-formatting numbers, with currency symbol, precision (places), and thousand/decimal separators: formatColumn() - format a list of values for column-display This table demonstrates how accounting.js can take a list of numbers and money-format them with padding to line up currency symbols and decimal places (NB: white-space:pre is needed for the browser to render the padded spaces): // Format list of numbers for display: accounting.formatColumn([123.5, 3456.49, 777888.99, 12345678, -5432], "$ "); formatNumber() - format a number with custom precision and localisation toFixed() - better rounding for floating point numbers Demo / Try it out Money formatting:
FitText - A plugin for inflating web type. Change font-size.