Webmasters Gallery

Scott Jehl has released jQuery Visualize, the plugin that groks HTML tables and generates lovely charts from it, all from a simple $('table').visualize(); (lot’s of options for you to twiddle too if you want).

First, you create a bog standard table like:

Then you visualize it. You end up with pretty graphs like these:

Paul Rouget and Tristan Nitot are having a lot of obvious fun with Canvas and <video> these days. The latest goodness is a demo by Paul that shows real-time dynamic content injection.

Notice the Firefox logo in between the two phones with bright screens? That is injected into the world thanks to Canvas.

How did Paul do this? He told us:

Obviously, I use the <video/> tag.
But what you see is not the video element (display: none;), but a
<canvas/> tag.
All the patterns you see on the top right are regular <img/>,
<video/> and <canvas/> elements. The play/pause button is
a <svg/> element
(position: absolute;) on the top of the main <canvas/> element.

A canvas element provides a method named drawImage which let you
inject the content of a DOM element in the canvas (like a screenshot). It works
with three kinds of elements: <img/>, <canvas/> and
<video/>.

When you click on the <svg/> button, the Javascript code launches the
main video. Then, the main javascript loop is executed each 10
milliseconds.

Here are key things that occur during the main loop:

• first, the content of the video is injected in the main canvas. That’s why
  the canvas element looks like a video element;
• second, the position of the 2 brighter areas of the canvas are computed
  (you have access to all pixels values);
• third, the required transformation is computed (rotation, scale,
  translation);
• fourth, the content of the selected pattern is injected in the main canvas
  following the transformation.

A little drawing:

 

Erik Arvidsson, one of our Knights, has shared a new Explorer Canvas release that has enabled excanvas folks to keep on trucking wrt IE 8 users. The way IE 8 does VML has been tweaked, so the library had to be changed accordingly.

You can also check out the Silverlight bridge too.

Here are the release notes:

• Implement transform and setTransform. This passes all the tests in the HTML5 canvas tests for 2d.transformation.*
• Remove fallback content that caused some issues when resizing the canvas element.
• Fix issue where strokeRect, fillRect and clearRect incorrectly cleared the current path.
• Added 2 new tests and modified an existing test to ensure that the new code works as expected and tested this in all modern browsers
• Fix for IE8. This involved passing one more argument to namespaces.add as well as ensuring all CSS lengths have units (px). Passes all the test cases in all modes in IE8.
• Fixes for linear gradients.
• Added two test cases for linear gradients.
• Changed the calculation method of line width. An averaged line width is calculated from the determinant of matrix, which is valid even when transform() method is implemented someday.
• Improved the rendering of lines. Lines with the width less than 1px look better now.
• Fixed the bug that stroke() ignored lineCap, lineJoin and miterLimit when fillStyle attribute was set.
• Removed the settings of strokeweight, strokecolor and fillcolor. They are unnecessary since they are overridden by the weight and color attributes in <v:stroke> and <v:fill>. </v:fill></v:stroke>
• This fixes issues where translate, rotate and scale is used during a path is being constructed. Previously we did the coord translations just before we draw the path. That is incorrect and now we do the translations when we add each individual piece to the path
• Added very limited support for scaling of the stroke width. Currently we do the scaling by calculating the position in the final coordinate space and we therefore cannot do non uniform scaling of the stroke. For now we just do the max x/y scale factor.
• Fix stroke. It should not close the path
• Fix memory leaks
• Fix issue where the path was not closed when strokeRect/fillRect was called.
• Use the document.createElement('canvas') hack that was exposed by Sjoerd Visscher last week. This allows us to remove fixElement_ completely.
• Added globalAlpha to the list of attributes copied for save/restore, as per the canvas specification.

Probably the most requested CSS feature of designers is being able to use custom fonts on web sites. Right now the only real way of doing that cross-browser is relying on Flash, either by building the whole page in it or by using the “Scalable Inman Flash Replacement” or short SIFR script. This does the job for most people but Simo Kinnunen wanted to avoid having to use proprietary software and go for canvas instead to reach the same goal.

The goals for Cufón were:

    * Absolutely no plugins required – Everything needed to display Cufón is already available by default in your visitor’s browser. Rather than requiring flash to make the switch, Cufón relies simply on javascript alone.
    * Compatibility – Cufón runs on IE6, 7, 8, Firefox and the latest version of Safari. On other unsupported browsers (IE5-, Safari 2) it will fail gracefully.
    * Ease of use – Little or no configuration required.
    * Speed – Cufón is quick. It loads almost instantly with no ‘flicker’ that you would normally experience with sIFR.

Technically Cufón is a web interface to fontforge and creates an SVG font on the fly from your source font using a JavaScript renderer.

Chris Jennings has more details on it and there’s a handy online generator for converting your fonts.

Visually this is pretty cool, however now we need to give it the same rigorous poking we gave SIFR over the years: what does it do in terms of accessibility, usability (copy and pasting text), scaling of text and most importantly overall page performance?

The other problem of course is copyright of font faces, and this is a much harder issue to tackle. Another solution with the same approach, typeface.js had issues with that in the past and this will not be different.

Instead of creating images or using flash just to show your site’s graphic text in the font you want, you can use typeface.js and write in plain HTML and CSS, just as if your visitors had the font installed locally.

Typeface.js uses browsers’ vector drawing capabilites to draw text in HTML documents. The typeface.js project has two components: the perl module for converting fonts, and the javascript library for drawing in the browser. The perl module extracts glyph outline information from truetype fonts and writes that data in JSON format. The javascript library then traverses the HTML document and renders text using <canvas> or VML to draw the glyphs.

This code is and always will be free and open source. This includes both the typeface.js javascript library, as well as the perl module with functionality to convert truetype fonts to typeface ones.