LWN.net Logo

Development

LGM: Unusual typography

By Nathan Willis
May 16, 2012

Libre Graphics Meeting (LGM) always has a healthy serving of typography and font talks on the menu. This year in Vienna, there were several sessions on the program that showcased new and unusual approaches to getting text on screen. One was an OpenGL-based renderer that offers noticeably smoother text in video and animation, while another was a toolkit for web developers to seamlessly integrate advanced type design features into modern web pages — including multi-color fonts.

Fonts and the GPU

Google's Behdad Esfahbod is the author and maintainer of HarfBuzz, the OpenType layout engine in use by Gecko and many other free software projects. HarfBuzz takes a sequence of Unicode characters and returns a set of properly-arranged glyphs that corresponds to them in the current language and script. For simple alphabets, the process of selecting the right output is rarely more complex than looking for pre-composed versions of any accented characters, then deciding how to compose any missing ones out of base glyphs and accents. But for complex scripts like Arabic, the shaping, positioning, and cursive joining process is tricky enough to require a complete shaping engine.

[Behdad Esfahbod]

Esfahbod gave a talk about HarfBuzz, which is a well-established project, but he also presented his personal side-project GLyphy, which uses OpenGL to render smooth text in video and animation. He wrote GLyphy in an attempt to circumvent a common rendering problem visible with text rendered in animations: the stuttering of outlines whenever a piece of text moves on screen. The root of the problem, he explained, was that most such text was re-rendered for each frame using the traditional rasterization process designed for still images (on screen or in print). When the text moves in every frame, the anti-aliasing algorithm picks a different set of pixels to shade, and the sharp outlines of the glyphs make visible jumps.

Esfahbod's approach was to ditch the algorithm most frequently used to rasterize the glyphs: coverage-based anti-aliasing. In this approach, the program calculates the portion of each pixel covered by the outline, and uses that percentage to shade each pixel. The fact that the algorithm is pixel-oriented is what causes the jitter when translating or rotating text in an animation. GLyphy instead uses a signed-distance-field (SDF) algorithm to shade the glyphs, which is independent of scaling and other transformations. SDF calculates the distance from each pixel to the nearest point on the outline; together those values form an anti-aliased outline of the glyph — but one that looks good at high resolutions.

SDF is math-intensive, so GLyphy leverages OpenGL to speed up the process. It also decomposes the Bezier curves used in most outline fonts into arc segments, because arcs are easier to compute distances against. Unlike other OpenGL renderers, GLyphy sends the glyph outlines to the GPU in vector format rather than copying pre-rendered samples into textures. The result, as Esfahbod demonstrated, is very smooth text animations. Getting decent performance is not quite as simple, he said — GLyphy hits lots of driver bugs, and the specific font and text directly affect how fast and how much memory is required for rendering. Consequently, making good use of GLyphy requires some knowledge of the content and the graphics hardware, so it will probably never be a general-purpose text renderer. For now, it remains experimental — but other projects certainly may find things to learn from it.

Web typography gone wild

Ana Carvalho and Ricardo Lafuente of Manufactura Independente presented a session on web typography with open fonts and open source software. Manufactura Independente handled the recent redesign of the Open Font Library web site, which they demonstrated during their discussion of other online resources. But in addition to fonts themselves, their talk focused on a set of jQuery-based JavaScript libraries that implement new and (for now) unusual text rendering options for the web.

[Carvalho and Lafuente]

Covered in the talk were FitText.js, which auto-scales text to fit a given box element (regardless of the screen orientation or size) and Lettering.js, a library that automatically splits typographic elements into individual CSS classes so that they can be manipulated precisely. Both are open source products from design firm Paravel. Also discussed were Kerning.js, which offers CSS rules for altering the size, kerning, weight, slant, and color of text elements — by the word, individual character, or by matching letter patterns — and Ligature.js which allows you to replace specific letter sequences with ligatures, beyond the basic fl, fi, ae, and AE ligatures that the developers say can be reliably rendered in vanilla HTML.

It is certainly possible already to use CSS to manually tweak individual page elements, right down to wrapping individual characters in <span> tags, but web designers will appreciate the simplicity of using a library instead.

[Colorfont example]

The team also presented its own library, Colorfont.js, which implements fonts sporting multiple colors in each glyph, using CSS. The process is specific to the typeface used — you start with a base font and create an "overlay" version separately. The overlay font should match up to the glyphs of the original exactly, but only include the portions of each letter to be shown in the second color. Colorfont.js then allows you to mark up text with the colorfont style class, which it will render with the two versions of the font superimposed.

Here again, a designer could use other means to accomplish the same end result (such as generating a PNG image), but using Colorfont allows the two-tone text to remain actual text — visible to search engines, mouse-selectable, and everything else. Depending on the size of the image it replaces, it is likely to save load time as well, plus fall back gracefully on image-less browsers or those without JavaScript.

Carvalho and Lafuente also led a design workshop in which participants created an overlay font to match an existing base font. I was unable to attend, as it was scheduled at the same time as a workshop I was proctoring. However, I was able to talk to several of the attendees after the fact and see their results. The hands-on experience certainly makes the library more useful to the attendees.

Final word

Having worked with font design and development for the past two years, I am keenly aware how easy it is to take it for granted. Users and developers both count on fonts appearing on screen as desired with little intervention, so it can be quite a reality check to dig into the glyph shaping and rendering process and see how many steps are involved. Esfahbod's work with GLyphy may remain an experimental exercise for the foreseeable future, but as more and more processing gets offloaded from the CPU onto graphics hardware, it is also possible that someday OpenGL rendering will be commonplace — in which case we will be glad that open source software is ready.

Ironically, the jQuery font libraries showcased by Carvalho and Lafuente at the same event are really backward-looking, in the sense that they restore a level of control and precision to typography that was commonplace centuries ago, but lost in the transition to digital fonts and web publishing. After all, illuminated manuscripts are some of the oldest multi-color typography projects in history; it is quite entertaining to see JavaScript and CSS used to reproduce them today.

[Thanks to the Libre Graphics Meeting for assistance with travel to Vienna.]

Comments (14 posted)

Brief items

Quotes of the week

I couldn't have told you the first thing about Java before this problem. I have done, and still do, a significant amount of programming in other languages. I've written blocks of code like rangeCheck a hundred times before. I could do it, you could do it. The idea that someone would copy that when they could do it themselves just as fast, it was an accident. There's no way you could say that was speeding them along to the marketplace. You're one of the best lawyers in America, how could you even make that kind of argument?
-- Judge Alsup (Oracle v. Google) has a clue

Janet Jackson's wardrobe malfunction was merely notorious, whereas Adolph Hitler was an infamous tyrant. See what I mean? [...]

So that's why I switched it. I didn't feel that the Unicode bug deserved to be labeled as evil incarnate, a vile abomination deserving utter reprobation. I didn't want to be seen to make a moral judgment.

-- Tom Christiansen

Comments (9 posted)

ConnMan 1.0 released

Marcel Holtmann has announced the 1.0 release of ConnMan, an internet connection manager targeted at embedded systems. It is designed to be small, require few resources, and handle a wide array of connection types (wired, wireless, cellular) with IPv4 and IPv6 support, along with proxy handling, tethering support, statistics gathering, and more. "The ConnMan 1.0 release means that we from now on provide a stable D-Bus API. From now on, the API will only be extended and we will keep backward compatibility going forward. [...] ConnMan is a monolithic system that includes many features right out of the box without requirement of any external daemons or programs." (Thanks to Gustavo Padovan and Daniel Wagner.)

Comments (23 posted)

Kdenlive 0.9 released

Version 0.9 of the Kdenlive video editor has been released. Improvements in this release include the ability to align multiple video tracks using the audio stream, a rewritten effects subsystem, improved importing of online media, and a number of usability enhancements.

Comments (none posted)

Lotus Symphony code for OpenOffice coming soon

IBM has announced that the paperwork has been signed and that the contribution of the Lotus Symphony code to OpenOffice will happen shortly. "The successful delivery of Apache OpenOffice 3.4 has enabled us to finalize our grant with the the Apache Software Foundation and initiate this new phase of effort within the community. This is about envisioning a future for Apache OpenOffice that builds on the best code we can offer together with the best developers who have mastered it." For those wondering about what this code offers, there is a Symphony Contribution wiki page describing the most interesting features.

Full Story (comments: 71)

OrientDB 1.0 released

The OrientDB "NoSQL graph-document database management system" project has produced its 1.0 release. New features include a new multi-master replication scheme, a new object database interface, an undo mechanism, server-side scripting, and more.

Comments (37 posted)

PowerTOP v2.0 Release

The PowerTOP power consumption monitor has released version 2.0. "Version 2.0 has several new key features and updates. The first big change is the use of a hardened library called libparseevents, for accessing the kernel "perf" infrastructure. With this enhancement, we are able to provide much more accurate data, and be more flexible with any future kernel development. There has been a great deal of work done in the area of CPU data measurement and diagnostics. Full accurate support was added for CPU idle, frequency, and power traces, along with expanded frequency state reporting for CPUs with more than 10 states. With these additions, PowerTOP v2.0 now gives a clearer picture of how programs affect CPU utilization, and the impact on important power-saving sleep states." In addition, version 2.0 adds the ability to export HTML and CSV reports, has a re-designed, tab-oriented UI, and more.

Comments (17 posted)

PulseAudio 2.0 released

Version 2.0 of the PulseAudio sound system is out. New features include support for multiple sample rates, jack detection, a number of VOIP support improvements, a virtual surround module, and more; see the release notes for details.

Full Story (comments: 11)

pypy-stm: a parallel Python

PyPy developer Armin Rigo has announced "the very first Python 2.7 interpreter to run existing multithreaded programs on multiple cores." He also advises that it is "horribly slow," so it is mostly of interest to people wanting to learn about the technology and help make it better. This documentation file contains some good information on how the software transactional memory system used in pypy-stm works and what can be done with it.

Full Story (comments: 1)

tig 1.0 released

"Tig" is a curses-based front end to the git version control system; the 1.0 release is now available. It includes a long list of new features and customization options; click below for the details.

Full Story (comments: none)

Newsletters and articles

Development newsletters from the last week

Comments (none posted)

Open Source Robotics Foundation incorporated (The H)

The H has a story about the launch of the Open Source Robotics Foundation (OSRF). "The mission of the non-profit organisation is to support the development, distribution, and adoption of open source software for use in robotics research, education, and product development." Spearheading the OSRF is Willow Garage, whose Robot Operating System (ROS) we covered in January 2012.

Comments (none posted)

Open source Java moving to Linux, AIX on PowerPC (IT World Canada)

IT World Canada is reporting that a team from IBM and SAP is working to bring support for PowerPC processors to OpenJDK, on Linux and on IBM's AIX. "'This reference implementation can then be used by IBM and SAP to provide their commercially licensed Java offerings in much the same way in which Oracle offers its Oracle JDK product based on OpenJDK,' [Volker] Simonis said. 'The big advantage for the open source community is that everybody (i.e. Linux distributors like Debian, Red Hat, or Ubuntu) will be able to build and provide free and state-of-the-art versions of Java based on the new OpenJDK platform ports. And of course they are highly welcome to engage in the project as well.'" OpenJDK would replace IBM's proprietary JDK as the leading Java implementation on PowerPC. The project was first proposed May 7 on the OpenJDK discussion list.

Comments (7 posted)

Page editor: Jonathan Corbet
Next page: Announcements>>

Copyright © 2012, Eklektix, Inc.
Comments and public postings are copyrighted by their creators.
Linux is a registered trademark of Linus Torvalds