News

Add new post →

Workaround: colorfont.js

Chris Lilley

Posted on

W3C Staff

As a way to experiment with new technologies ahead of their implementation and widespread deployment, shims can show us the future, today. colorfont.js is a shim for HTML pages, which lets you retain semantics and accessibility (no duplicated text strings in the HTML source, just a simple class) while providing multicolored font rendering (adding the extra strings, extra fonts and alignment behind the scenes). Check it out!

Yes, this has the disadvantage that individual component fonts are still required. It has the advantage that the multiple colors are specified using CSS, not baked into the font. An OpenType SVG glyph solution must also be restylable via CSS.

Ana Isabel Carvalho and Ricardo Lafuente will be presenting a colorfont workshop at Libre Graphics meeting in Vienna.

Use case: coloured emoji

Chris Lilley

Posted on

W3C Staff

Here is an SVG font for emoji, created by Pagefire. This is an SVG 1.1 Full font. It simply has multiple paths, which include gradient fills, for each glyph. Apart from that it is a standard Unicode font (Unicode added emoji in Unicode 6.0).

In this image, the font is being displayed in Batik 1.7:

SVG glyphs for emoji

Edit: thought it was obvious but just in case: those are scalable, vector glyphs, not a raster image (or worse, a bunch of raster images at 10,11,12,13,14 etc px high)

Discussion at SVG WG meeting, Mountain View CA

Chris Lilley

Posted on

W3C Staff

Sairus Patel (Adobe) met with the SVG WG at  their Mountain View f2f meeting, hosted by Microsoft, to discuss SVG glyphs in Opentype.

Topics of discussion included ways to specify glyphs in an OpenType table,animation, shared resources, timelines, security and scripting. The benefits of SVG2 features such as non-scaling stroke and parameterisable colors were also discussed. The possibility of hinting (perhaps using Type1-style hints) was also covered.

(Full minutes)