Share via

Building Rich Text-Centric Pages in IE10

  • Article

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 https://connect.microsoft.com/ie/.

—Christian Stockwell, Program Manager, Internet Explorer

Comments

  • Anonymous
    October 10, 2011
    iframe...? srsly?

  • Anonymous
    October 10, 2011
    That's nice, but when do we get an up-to-date platform preview for Win7/Vista? Or a Beta version maybe? What about browser features? Now that IE is up to the competition standards wise, maybe it's time to work in some extra features that other browsers can do either natively or via addons... userscripts, userstyles, etc.

  • Anonymous
    October 10, 2011
    Seriously though how  am I suppose to test out these great new features within my current windows 7 setup?

  • Anonymous
    October 10, 2011
    iframe ??

  • Anonymous
    October 10, 2011
    I have to say I'm not sold on the CSS3 Regions proposal, I see the need for such a feature, but the way this is proposed will make it difficult to debug site layouts as content does not exist in the dom of the elements with "flow-from".

  • Anonymous
    October 10, 2011
    18 languages is relatively small number. Will developers be able to set up custom settings of hyphenation, like LaTeX does with hyphenation command?

  • Anonymous
    October 10, 2011
    It would be nice if the demo page (ie.microsoft.com/.../hands-on_regions.htm) functioned properly in the latest Firefox though... sure it's an early demo, but something that is cross browser compliant would be nice since most of us don't have IE10 yet.

  • Anonymous
    October 10, 2011
    On this W3C test w3c-test.org/.../paused_true_during_pause.html IE passes the test but continue the playback while it should remain at the paused state. Other browsers don't show this behavior. OAN, IE fails all the tests laid by Apple w3c-test.org/.../Apple

  • Anonymous
    October 11, 2011
    I read this as meaning 'loads of empty divs' but the other layout modules sound like they could play a role in future.

  • Anonymous
    October 12, 2011
    How well does the framed document support JavaScript? Do functions like elementFromPoint continue to work? If yes, how?

  • Anonymous
    October 12, 2011
    Everyone be sure to patch IE today. "Andrew Storms, director of security operations at nCircle, implores, "Patching Internet Explorer should be at the top of everyone's list."   One day you guys will get it, I'm sure.  

  • Anonymous
    October 12, 2011
    One hopes there's a security check so that this doesn't work with cross-origin iframes.  :)

  • Anonymous
    October 13, 2011
    Are you guys going to release an API so people can add cross language hyphenation to their own (desktop native code) apps?

  • Anonymous
    October 13, 2011
    Off the topic but seems like this is the only place to communicate with IE guys. In IE 10, is the SmartScreen Filter the same as in IE9 or IE8 or it has changed ? SmartScreen Filter as in IE9 or IE8 asks users not to download applications untill the publisher or that specific application has been downloaded n number of times or y number of days Now if SmartScreen Filter as in IE9 or IE8 prompts users not to download, then how on earth that publisher or application can generate reputation? http://www.murgee.com/

  • Anonymous
    October 13, 2011
    @Fermant A lot of testcases for global attrributes that Apple submitted are not valid. They do not accept valid integer values which IE9 is returning