Web developers tackle advanced font controls

The Web began as a publishing medium, but in many ways it's only really growing up now. Adobe, Mozilla, and others are improving font and layout.

Ligatures can link letters together aid in reading or text styling.
Ligatures can link letters together aid in reading ease or text styling. Support for them is being developed within the World Wide Web Consortium's CSS standard. W3C

The Web, ever more sophisticated, is feeble as a publication medium when it's compared to what can be done with layout software such as Adobe Systems' InDesign. But that's beginning to change.

The change is significant: digital publishing is moving to the Web, but the array of new devices such as iPads and Kindles pose a challenge. Should those overseeing the designs create native applications for those devices or Web pages that will work on just about any device? For the latter to be a competitive option, the Web has to match up better.

A foundation for change was built with Cascading Style Sheets (CSS) , a standard for Web page formatting that's now growing in significance and power. One big element here is support for the @font-face technology and the related Web Open Font Format , which together are letting Web developers specify downloadable fonts and use online font repositories such as TypeKit for a more polished, customized look.

A new phase is under way now, though. Firefox browser developer Mozilla has begun work on CSS features to permit higher-end font controls, Mozilla developer John Daggett said yesterday in a blog post.

Among the controls are the following:

• Ligatures, which can replace combinations of letters with fancier or more readable replacements, a classic example being a specific glyph for "fi" to keep the top of the f from bumping into the dot of the i.

• A way to specify use of small caps, which higher-end typefaces create independently so that the stroke weight of the characters matches that of lowercase letters.

CSS developments would let Web developers specify when the browser should display alternate characters such as those with swashes, a distinctive look in combination, or historical styling.
CSS developments would let Web developers specify when the browser should display alternate characters such as those with swashes, a distinctive look in combination, or historical styling. W3C

• A way to specify use of typeset fraction characters rather than spelled-out versions such as "3/4."

• Kerning, which governs how closely placed letters are to each other.

• Support for monospaced numbers, which have the same width for easier reading in tables where vertical alignment of columns of numbers is required.

Also under development is better support for bidirectional and vertical text, which accommodates languages with characters written top to bottom or right to left. Anne van Kesteren, who works on standards for browser maker Opera, offers a brief introduction to the new bidirectional text controls in HTML5

Adobe, naturally, is an expert in design, and is getting more public about its interest in bringing better publishing to the Web. Despite its big business selling tools for Flash technology, the company insists it's a toolmaker, not a Flash toolmaker, and it's been branching out more into Web standards.

Adobe's adaptive text layout tools can let text reflow when objects are repositioned on a page or the display device changes from horizontal to vertical orientation.
Adobe's adaptive text layout tools can let text reflow when objects are repositioned on a page or the display device changes from horizontal to vertical orientation. screenshot by Stephen Shankland/CNET

A good example is work Adobe showed off at its Max conference for "adaptive layout," in which text flows around objects such as photos or pull-out quotations. The adaptive part comes in when a Web page using the technology automatically adjusts to different screen sizes or orientations, an important factor given the diversity of reading devices that digital publishers must target.

Notably, Adobe is working on both browser code and Web standards to advance the effort. For the browser work, it's relying on a partnership with ally Google. Here's how this particular set of stars align: Adobe's AIR programming foundation includes both the Flash Player and Adobe's version of the WebKit browser engine; WebKit is the foundation of Google's Chrome; and Google is supporting Flash Player on Android and building it directly into Chrome. Adobe's adaptive layout is a new example of the two companies' partnership of convenience.

"We're working with our friends at Google to help bring this back to WebKit," said Paul Gubbay, Adobe's vice president of product development for design, Web, and interative. In addition, Adobe is working with the W3C, which oversees CSS development, to bake the technology into the Web standard.

CSS controls under development would let Web developers specify when ordinary fractions written out as separate characters would be replaced by specialized fraction characters, as shown in the bottom example.
CSS controls under development would let Web developers specify when ordinary fractions written out as separate characters would be replaced by specialized fraction characters, as shown in the bottom example. Mozilla, John Daggett
 

Join the discussion

Conversation powered by Livefyre

Don't Miss
Hot Products
Trending on CNET

HOT ON CNET

Want affordable gadgets for your student?

Everyday finds that will make students' lives easier: chargers, cables, headphones, and even a bona fide gadget or two!