Building Rich Text-Centric Pages in IE10

Internet Explorer 10 in the Windows Developer Preview introduces two new CSS features designed to make it easier for developers to create rich text-centric Web pages and apps. CSS3 Regions provides a lightweight mechanism to flow content through multiple non-contiguous areas. IE10’s support of CSS3 Hyphenation gives developers a simple mechanism to hyphenate text in a wide range of languages.

These two new features complement other great CSS features we previously announced, including CSS3 Grid Layout, CSS3 Flexible Box Layout, CSS3 Multi-column Layout, and Positioned Floats. Taken together, this set of standards-based features provides developers powerful new tools for designing great Web apps and sites that scale across a variety of screen resolutions and form factors.

CSS3 Regions

CSS3 Regions adds a new mechanism to manage content overflow. In addition to adding scrollbars, clipping content, or letting content spill outside of its container, developers can now direct the overflow from one element into another using a pair of new CSS properties.

Here’s an illustration of how you can use CSS3 Regions:

Illustration of content from an external file, content.html, being flowed into two div elements using CSS3 Regions.

<!DOCTYPE HTML>

<html>

<head>

<style>

iframe {

-ms-flow-into: contentIdentifier; /* causes the iframe to hide */

}

#div1, #div2 {

-ms-flow-from: contentIdentifier; /* causes these elements' content to come from the iframe with "-ms-flow-into: contentIdentifier" */

width: 120px;

height: 300px;

float: left;

border: solid 2px lightblue;

margin-right: 8px;

}

</style>

</head>

<body>

<iframe src="content.html"></iframe>

<div id="div1"></div>

<div id="div2"></div>

</body>

</html>

CSS has traditionally been a styling language optimized to lay out content on bottomless, vertical-scrolling Web pages. CSS defines properties that developers can use to position content, including several mechanisms to handle ‘overflow’—the handling of content that doesn’t fit within its containing space. Most typically, Web pages manage overflow by adding scrollbars. Experts in such matters have blogged on the impact of scrolling on reading speed and comprehension.

It’s traditionally been challenging on the Web to creating complex text-centric designs that look great—like newspapers or magazines—without relying heavily on scrollbars.

A few short months ago Adobe introduced the CSS3 Regions working draft at the W3C with Internet Explorer’s Alex Mogilevsky as co-editor. CSS3 Regions offers developers a new approach and is a great addition to the Web platform. Internet Explorer 10 in the Windows Developer Preview gives developers their first look at CSS3 Regions in vendor-prefixed (-ms-) form.

To enable advanced scenarios, the CSS3 Regions specification also defines an event, a property, and a method that, together, enable developers to create and manage regions dynamically through JavaScript. We have an early version of those capabilities available in IE10. The current draft of the W3C CSS3 Regions specification describes these in detail.

The ietestdrive.com demo Hands On: CSS3 Regions provides an interactive example of CSS3 Regions in action (Internet Explorer 10 in Windows Developer Preview required).

As HTML5 Web applications continue to evolve, we expect developers will want to use CSS3 Regions to create complex text layouts designed to adapt fluidly to a variety of different screen resolutions and form factors.

CSS3 Hyphenation

The second feature unveiled in the Windows Developer Preview is CSS3 Hyphenation. Native support for CSS3 Hyphenation means developers get high performance and professional-quality hyphenation built into the browser.

Over the last few years, user habits and the Web platform have evolved. Increasingly, users are consuming Web content on a broad range of devices—including phones, tablets, and netbooks. On these devices less text fits on screen and some typographic issues, for example, rivers of white, become more prevalent.

At the same time, new capabilities including CSS3 Multi-Column, CSS3 Regions, and Positioned Floats appeared in the Web platform. Those features enable developers to create more complex text-centric layouts, but may also shorten average line length, increasing the prevalence of some common typographic problems.

A narrow column of text flowing around a Positioned Float, without CSS3 Hyphenation
A narrow column of text flowing around a Positioned Float, without CSS3 Hyphenation

To build great-looking sites and apps that use the new constructs available in CSS3 and continue to look great across a broad range of devices, it’s important to have robust support for hyphenation in the Web platform.

Building on Microsoft’s expertise acquired over years of hyphenating text in Microsoft Office, Internet Explorer 10 supports hyphenation in 18 of the world’s most common languages. These include Catalan, Czech, Danish, Dutch, English, French, German, Italian, Norwegian (Bokmål and Nynorsk), Polish, Portuguese, Brazilian Portuguese, Russian, Spanish, Swedish, and Turkish (as well as common variants for many of those languages—British and American English, for example).

A narrow column of text flowing around a Positioned Float, with CSS3 Hyphenation
A narrow column of text flowing around a Positioned Float, with CSS3 Hyphenation

Visit our demo Hands On: Multi-column Layout on ietestdrive.com to play around with CSS3 Hyphenation (Internet Explorer 10 in Windows Developer Preview required).

What Will You Build

We’re eager to see the sites and apps you build with CSS3 Regions and Hyphenation as well as the other new features IE10 brings to the Web platform. Once you’ve had a chance to explore more, send us your feedback here on the IEBlog or at http://connect.microsoft.com/ie/.

—Christian Stockwell, Program Manager, Internet Explorer


IEBlog