Standards-based adaptive layouts in Windows 8 (and IE10)

Windows 8 Consumer Preview: Product Demo [on WindowsVideos YouTube channel, Feb 28, 2012]

Jensen Harris from Windows User Experience gives a demo of the Windows 8 Consumer Preview.

With Windows 8 (and IE10) Microsoft is carrying out a future-proof web platform strategy as well. Below I’ve collected the standards-based adaptive layout technologies (as the most critical ones from a scaling point of view) implemented by the company for the current Windows 8 Consumer Preview released on Feb 29, 2012.

Windows 8 Consumer Preview: Making great Metro style apps [on WindowsVideos YouTube channel, Feb 29, 2012]
For this post watch at least the #2 Snap and Scale beautifully part between [2:42] and [3:20] !

Discover the common traits of great Metro style apps. For this post watch at least the #2 Snap and Scale beautifully part between [2:42] and [3:20] !

The corresponding W3C specifications are indicated along, namely:

Notes:

  1. For text layout CSS regions may be a better option than the multi-column in situations where a more varied page layout is called for, or where there is a possibility that the inline content of an element could overflow the element.
  2. All of the layout constructs available in HTML are available for XAML developers as well. In this way developers in the C++ and the managed (C# etc.) worlds are having the exactly same capabilities, particularly from the point of view of adaptive layout technologies described here from web standards point of view.

Scaling to different screens [Building Windows 8 blog, March 22, 2012]

This graphic shows a sample of the diversity of common wide-screen aspect ratios and screen sizes that Windows 8 can run on. Windows will support just about any screen dimension so long as the graphics driver and hardware combination provide the correct information to Windows. In addition, some screens will scale to different aspect ratios via cropping and/or stretching. And although we indicate slate or laptop in the diagram below, please keep in mind that these are “fuzzy” boundaries that are getting more fuzzy all the time.

10.1" 2560x1440, 11.6" 2560x1440, 10.1" 1920x1080, 11.6" 1920x1080, 10.1" 1366x768, 11.6" 1366x768, 14" 1920x1080, 14" 1366x768, 12" 1280x800, 15.6" 1920x1080, 17" 1920x1080, 23" 1920x1080, 27" 2560x1440.

Why choose 1024×768 as a minimum?

We chose 1024×768 as a minimum for Metro style apps for three reasons.

  • It is large enough to support the rich and beautiful layouts that we expect to see with Metro style apps. Lower resolutions, like 800×600 for example, require simpler more basic layouts with less content.
  • Websites are typically designed for 1024×768 as the minimum (or only) resolution, and web developers are used to targeting this resolution.
  • Looking at the data about devices in the marketplace today, we see that only 1.2% of active Windows 7 users have screens with a resolution of less than 1024×768. When designing a new platform that supports the devices of today and tomorrow (with undoubtedly higher resolutions) we optimized for the majority of today’s screens (i.e. 98.8%) without sacrificing the experience and complicating the developer story for legacy screens. In addition, the runrate of new PCs with screen sizes of 1024×600 and 1280×720 has dramatically fallen and, to the best of our knowledge, almost no new mainstream PCs are being manufactured with this resolution. We are aware of purpose-built machines that run at lower resolutions, which are built for specialized desktop apps as well. While many run virtual machines, VMs can easily support 1024×768 even though many default to lower resolution.

Bar graph showing all Windows 8 apps supported at 1366x768, 1280x800, 1600x900, 1920x1080, 1280x1024, 1440x900, 1680x1050, 1024x768, 1360x768, 1920x1200, and 1280x768. Desktop apps only are supported on 1024x600 and 1280x720 (which comprise only about 1% each of screens)

The Windows 8 platform makes building one app that scales to different screen sizes straightforward for the developer by providing built-in layout controls and techniques. Apps in Windows 8 fill the available space by bringing in more content where possible. A developer can easily build the same app to show more content as the screen size changes from a tablet, to a laptop with a bigger screen, all the way up to a desktop monitor. For example, this news app shows more articles on bigger screens. It should be noted that the underlying platform and tools have been developed to provide support for asynchronous programming which also enables “filling” larger displays, and making them just as fast and fluid as smaller displays—there’s no need to block the user while fetching and filling large amounts of content.

Headlines app on 11.6" 1366x768 screen has 10 articles, on 13" 1400x1050 screen has 15 articles, and on 20" 1920x1080 screen has 21 articles

Building apps for larger screen sizes

Windows 8 has been designed to work in a predictable and consistent way for screens of different sizes and shapes across tablets, laptops, and desktop monitors. When a user changes to a different sized screen, it’s important that the system and apps make the best use of the screen space that’s available to provide the most immersive experience.

Sample app shown on 3 different sized screens
With adaptive layouts like this sample app created for the Developer Preview
at //build/, users see more content on larger screens

One way that Windows 8 helps app developers to adapt their apps for this variety is through support in the app platform for standards-based adaptive layouts. Building an app layout that looks great on different screens has been a challenge in the past on the web. Rather than inventing a new, proprietary set of layout controls, Windows 8 has built-in support for the familiar adaptive layout techniques from XAML, and for the W3C ratified set of CSS3 features, which were designed specifically to make this easier for web developers.

In HTML, the CSS3 grid, flexible box, and multi-column layouts help developers use screen real estate more effectively across a variety of devices and resolutions.

The CSS3 grid layout allows a developer to specify the rows and columns of their layout; it is similar to using an HTML table but provides much more control and flexibility. A grid is also great for defining a top-level adaptive layout that is similar to the ones that you see in the Windows 8 UI(like the Start screen and the file picker). You define the rows and columns, and then place your content into the cells of the grid. It is simple to define which cells should adapt and reflow to the screen.

Grid of four boxes, containing number pairs: 1,1; 1,2; 1,2; 2,2

CSS3 flexible boxlayout allows a developer to distribute margins and whitespace equally and predictably. It’s great for laying out individual components and collections like toolbars and image collections.

Finally, CSS3 multi-columnlayout can be used to arrange content into multiple columns on the page, similar to the layout of a newspaper or magazine.

All of the templates provided with Visual Studio 11 use these layout constructs and leverage the ListView and other controls to support different sized screens by default. Developers can use the same standards-based layout techniques and controls that help them accommodate different screen sizes to also help them adapt the layout to different orientations and snapped views. All of the layout constructs available in HTML are available for XAML developers as well.

Web Platform Features in Windows Consumer Preview [MSDN Blogs, March 2, 2012]
MSDN Blogs > IEBlog > Web Platform Features in Windows Consumer Preview

Internet Explorer 10 in the Windows Consumer Preview introduces a number of new or updated Web platform features when compared to the IE10 in the Windows Developer Preview released September 13, 2011. Some of these shipped in the fourth IE10 platform previewreleased November 29, 2011, and have been blogged about since; some are new in the Consumer Preview.

New or Updated Web Platform Features

Across the board, we’ve improved performance and addressed feedback on the platform features that were available in the Windows Developer Preview but not IE9:

Design case study: Website to Metro style app [MSDN, March 15, 2012]
Dev Center – Metro style apps > Learn > Designing UX for apps > Case studies > Website to Metro style app

Scaling and views

Design adaptive layout for orientation and screen sizes

We designed the food truck website layout to be flexible enough to scale to different devices, screen sizes, resolutions, and orientation. Similar to a fluid website design, a Windows 8 PCs range from small, touch-only tablets to larger laptops and desktops. Designing our app so it looks great on the wide range of devices that support Metro style apps is crucial if we want our app to reach more customers.

You can apply many principles of website design to Metro style app development. Built-in templates and controls make changing from landscape view to portrait view and back easy. When orientation changes to portrait, more trucks are shown in each category. Similarly, the app also shows more trucks in each category to take advantage of the additional screen space of high resolution monitors.

Example: food truck website and the Metro style app on different devices.

The food truck website on different devices and screen resolutions.

Website:

  • The food truck website adjusts layout and reflows for different screen sizes and form factors.

The Metro style app in different layout modes and at different resolutions.

Metro style app:

  • The Metro style app in portrait mode, landscape mode, and on a high resolution screen. We use the extra space to show more content.

Use snap view to engage your users

Windows 8 lets users multitask by snapping an app next to another app. Snapped view is a great way to increase the app’s time on screen and engage users for longer periods. It’s easy for a user to switch the main app and the snapped app by manipulating the splitter between the two, so it is important to maintain context across resizes. Users should not lose app state as a result of resizing their app.

For more info on Snapped view, see Guidelines for snapped and fill views.

Example: Metro style app home screen in both filled and snap views.

Metro style app in both filled and snapped view.

  • Left:The food truck app in filled view. The user can use a weather app and the food truck app side-by-side.
  • Right: In snapped view, a user pans vertically to get to more content because it’s more comfortable to pan along the long edge. This is different than the horizontal panning in full view, which is also optimized to pan along the long edge.

Developing reader apps [MSDN, March 6, 2012]
Dev Center – Metro style apps > Learn > End-to-end apps and games > Developing reader apps

[This documentation is preliminary and is subject to change.]

Apps that incorporate a reading experience are quickly becoming popular as slate PCs become more prevalent. This article highlights the new Cascading Style Sheets (CSS) and HTML5 features that you can use to create great reader apps. After reading this article you will have a solid understanding of key layout features that are used in these apps and will also have a basic reader app to start from.

Now, let’s learn more about creating great reader experiences in Windows. This article accompanies the Dynamic CSS region templates sample.

Introduction

Windows 8 Consumer Preview offers developers and designers a range of the latest HTML5 and CSS3 features to create new and unique reading experiences. Specifically, thanks to new technologies such as CSS regions and CSS grid, you can create digital publications that combine the advantages of HTML—fluid layouts, markup-based styling, accessible content, interactivity—with innovative layouts that have so far been possible only in the print domain.

Webpages have traditionally been rendered as single columns of vertical content. Paragraphs are piled on top of paragraphs and other images, with the occasional floating element thrown in to offer some visual variety. “Pages” were created only by segmenting the content into different HTML documents; there was no markup-based way to take a stream of content and segment that content into individual screens of text. A lack of strong controls for creating columns and adapting to screen size meant that many pages were optimized for a specific resolution only, such as 1024 × 768. You see a great example of a bad experience when text optimized for small resolutions is rendered on a high resolution, widescreen monitor. The following image shows a single-column layout on a monitor with a 4:3 aspect ratio.

Single column of text rendered on a 4:3 monitor.

The following image shows the same layout on a widescreen monitor with empty white space.

Single column of text rendered on a widescreen monitor.

In contrast, a page designed to take full advantage of a page’s available space would likely feature multiple columns of text, thereby filling the screen while making sure that individual lines of text are not too long to read easily. Through some small refinements, titles can increase their size to be more eye-catching, and images can be given a more prominent position while text wraps around them.

The following image shows an improved reader layout for widescreen monitors.

Hh780610.single_column_widescreen_wrap(en-us,WIN.10).png

Print designers have long been able to design such layouts with ease, because they have to contend only with a fixed page size known well in advance. Designers of adaptive layouts must use tools such as CSS grid and media queries to create pages that adapt intelligently to different screen sizes.

This article, together with the Dynamic CSS region templates sample, describes how to create great-looking layouts for reading that adapt to a wide variety of screen sizes. In Reviewing new CSS reading features, we go over several new features [multi column, hyphenation, grid, regions, and exclusions] that you can use to present text and images in innovative new ways. In Putting features together to create a great reading experience, we continue by showing how to combine these features [grid, media queries, regions, and exclusions] to build an adaptive reading experiencethat combines great design with fluid and engaging layouts.

Reviewing new CSS reading features

Let’s look at the new CSS features that you’re likely to use in your reader app: multi-column, hyphenation, grid, regions, and exclusions.

Multi-column

CSS multi-column enables designers to format the inline content (such as text) of an element—for example, a div element or the body of a page—into multiple adjacent columns of equal size, located next to each other. For example, simply adding the CSS property column-count: 2; to adivproduces a layout like the one in the following image.

Using CSS Multicolumn on a block of text

Multi-column does have some limitations, however. Columns must all be the same size and positioned next to each other. Moreover, content from a multi-column element obeys the CSSoverflow property; that is, it clips, adds a scroll bar, or overflows by creating additional columns next to the original element. For these reasons, CSS regions may be a better option for text layout in situations where a more varied page layout is called for, or where there is a possibility that the inline content of an element could overflow the element.

Hyphenation

Multi-column enables us to lay out inline content, such as text, in relatively narrow columns. But content in these columns can appear ragged, especially when the average word length is a large percentage of the column width. In particular, when columns are combined with the text-align: justifyproperty, large “rivers” of whitespace can appear between words, giving the content an irregular and unattractive appearance as shown here.

Non-hyphenated, fully justified text with excess whitespace

Accordingly, we now offer the ability to automatically hyphenate words, so that lines can be more densely packed while still supporting a strong reading experience as seen here.

Hyphenated, fully justified text with minimal whitespace

Hyphenation is defined in part in the W3C CSS Text Level 3 specification. CSS hyphenation offers the ability to:

  • Specify a minimal word-fragment length following and preceding a hyphenation break.
  • Specify a maximum number of consecutive hyphenated lines.
  • Prevent the last words in paragraphs and columns from being hyphenated.
  • Specify a custom hyphenation character.

Hyphenation in Windows 8 and Windows Internet Explorer 10 Consumer Preview is supported for a wide variety of languages and is recommended for use for both CSS multi-column and regions.

Grid

The core idea behind CSS grid layout is to partition a page into a defined set of rows and columns and then to set the position and size of elements based on those rows and columns by using CSS. Because the size of rows and columns can be defined as fixed, flexible, or size-to-content, it’s easy to build a layout that completely fills the entire screen, regardless of screen size.

For example, the image below shows an example of a reader that has been divided into two columns and three rows with multiple elements. Some of the elements must remain fixed while others grow or shrink as the size of the browser window changes.

Text flowing across Regions within a page

Regions

CSS regions enable a designer to flow content from one containing element into another, thereby connecting flows of content across different areas within a page or across multiple pages. This ability makes new and innovative designs possible. For example, the following illustration shows text flowing across two regions within a page. Note that, unlike CSS multi-column, regions allow containers to be different sizes, and not immediately adjacent to one another.

Text flowing across multiple Regions across multiple pages

Regions can also be used to flow a single content stream, such as the text of an article, across multiple virtual pages, as seen in the following illustration.

Content.html flowing into Master.html via CSS Regions

Note that “pages” in this context are not pages created by the printing process, such as pages that are styled using an “@page” CSS rule, but are instead div elements containing one or more regions. By placing these divelements in a scrollable area (usually with snap points to simulate page flipping), we can create a paginated reading experience where a single stream of content is displayed across multiple, full-screen pages and not as a single scrolling region of content. In addition, regions can be combined with CSS grid and media queries to create pages that precisely fit a particular screen size, and to generate the exact number of pages needed to display a particular stream of content.

The following diagram shows a high-level overview of how regions work. The content from a source document (Content.html) flows into multiple regions in a master template document (Master.html).

Content.html flowing into Master.html via CSS regions

It’s important to note that regions do not participate in the CSS style cascade across a document, so that a style rule placed on a specific region (for example, text-color: red) does not affect the content inside the region. But style rules placed on the content document itself do affect the content, although they don’t affect any elements within the master template document.

Likewise, content the displayed by regions within the master template does not exist in the master template’s Document Object Model (DOM); looking at Master.html via the DOM explorer in Microsoft Visual Studio, for example, shows that each region is empty. Instead, the content displayed by regions exists within a hidden iframeelement that exists in Master.html and points to Content.html.

Exclusions

CSS exclusions offer a way to cause inline content to wrap around an element, such as an image, title, or text callout. Exclusions are similar to CSS floats, except that instead of being pushed to one side or the other of a containing block, exclusions can be positioned in the middle of a containing block and have content flow around both sidesas shown here.

Inline content flowing around an Exclusion

Exclusions can interact with multiple surrounding elements at once. For example, an exclusion can be surrounded by multiple regions and cause the content in each region to wrap around it. For more info about how to do that, see Putting features together to create a great reading experience.

Note that regions can only be rectangular blocks in Internet Explorer 10. However, multiple regions can be placed next to one another to create nonrectangular regions.

Putting features together to create a great reading experience

Now that we’ve reviewed the individual technologies that you can use to create a great reading experience in Windows 8, let’s discuss how to combine these technologies. We’ll do that together by examining the Dynamic CSS region templates sample. First, we’ll cover how to combine a grid, media queries, regions, and exclusions to create individual page templates. Then we’ll look at JavaScript code that instantiates these page templates until all content in the source document has been displayed. Finally, we’ll look at additional JavaScript code that can adjust the number of pages based on a change to the screen size or font size.

About the authors

Chris Jones is a Program Manager on the Windows Presentation and Composition team. During Windows 8 development, he has worked on CSS control styling and on layout features such as CSS Regions, CSS3 Floats, Grid, Flexbox, and Multi-column. He can be reached atcjon@microsoft.com.

Gus Class is a programmer/writer on the Windows developer content team. Find him at http://gusclass.com or follow him on Twitter @gguuss.

Dynamic CSS Region templates sample [MSDN, March 22, 2012]
Dev Center – Metro style apps > Samples > Windows 8 Consumer Preview Metro style app samples – C#, VB.NET, C++, JavaScript > Dynamic CSS Region templates sample

This sample demonstrates how you can use the layout templates that are provided with the Windows Software Development Kit (SDK) for Metro style Apps with Cascading Style Sheets (CSS) Regions to flow and display large amounts of content in a Metro style app using JavaScript.

Specifically, this sample covers configuring an app to:

  • Use a layout that creates regions automatically, at the optimal size for the view state, based on the amount of content to be displayed within an app.
  • Use pre-defined templates of region layouts on specific pages or screens of an app.

This sample is written in JavaScript, CSS, and HTML.

Note  The Windows Samples Gallery contains a variety of code samples that exercise the various new programming models, platforms, features, and components available in Windows 8 Consumer Preview and/or Windows Server “8″ Beta. These downloadable samples are provided as compressed ZIP files that contain a Visual Studio solution (SLN) file for the sample, along with the source files, assets, resources, and metadata necessary to successfully compile and run the sample. For more information about the programming models, platforms, languages, and APIs demonstrated in this sample, please refer to the guidance, tutorials, and reference topics provided in the Windows 8 documentation available in the Windows Developer Center. This sample is provided as-is in order to indicate or demonstrate the functionality of the programming models and feature APIs for Windows 8 and/or Windows Server “8″ Beta. Please provide feedback on this sample!

To obtain an evaluation copy of Windows 8, go to Windows 8.

To obtain an evaluation copy of Microsoft Visual Studio 11 Beta, go to Visual Studio 11 Beta.

CSS Flexbox sample [MSDN, Feb 22, 2012]

Introduction

CSS Flexbox lets you create webpages with elements, controls, forms, toolbars, and menus that can resize and reposition themselves when the user changes the size of the browser window. This can help you design more flexible webpages that can automatically adapt to changing browser windows.  As the window changes, you can control what the user sees, rather than just having elements and text truncated as a windows shrinks.

Building the Sample

The sample contains HTML, CSS, and JavaScript files, along with a project file that you can open in Visual Studio, or your favorite editor. To run the sample, open the default.html file in your HTML5 enabled browser.

Description

This sample demonstrates two ways CSS Flexbox can be used to create menus, toolbars, and controls of screen elements that resize according to the application’s layout.

The Flexbox Toolbarexample shows how a toolbar can change orientation as the browser window change in size to keep as much content displayed for the user.

The Flexbox item collection example shows how Flexbox can be used to create a simple collection to hold elements such as images and text boxes. When the screen resizes, Flexbox creates more or fewer lines of elements and wraps the element collection as needed. As less and less room is available horizontally, the layout puts more items on more lines.

The view source option lets you see a preview of the CSS code that controls how the collection is laid out.

CSS Multi-column layout sample [MSDN, Feb 24, 2012]

Introduction

While printed newspapers are giving in to electronic versions, the column is alive and well online. CSS Multicolumn layout enables you to create attractive text layouts in a number of variations. This sample shows how to create a fixed or variable number of columns, controlling column breaks, and more.

Building the Sample

The sample contains HTML, CSS, and JavaScript files, along with a project file that you can open in Visual Studio, or your favorite editor. To run the sample, open the default.html file in your HTML5 enabled browser.

Description

The Fixed number of columns example shows how to create a page with a set number of columns of text. As the browser window is resized, the columns change width and reflow the text to keep the same layout.

The Flexible column count example lets you create webpages where the number and size of the columns change with the size of the window. In this example, when the browser window is made smaller, the colums get narrower. As the window’s size reduces, rather than making narrower columns, columns are removed, and the text reflowed to the remaining columns. The text is fully justified and hyphenatedacross each column, and columns are separated by a column length gap and decorative rule.

The Column breaks example shows how to control how a column breaks when a window is resized. The example has three columns. As the window resizes, one column will get narrower and finally break and create a second column to flow the text to. Another column however doesn’t break, instead requiring the page to be scrolled to see the complete text. This type of layout can help when displaying source code or math formulas where breaking arbitrarily would make reading more difficult.

The Column span example shows how to use CSS rules to make columns that span several other columns. This can let you create a webpage for example where an article title spans the columns that contain the story. As the page is resized, the number of columns in the story change, but the title continues to span across all of them.

The Column fill example shows how to balance how text is distributed across multiple columns. In one view, the text is laid out sequentially, where the text flows to the bottom of the column and then into the next column. In the other view, the text flows to a certain height in the column, and then flows to the next. All the columns text in the second view are approximately the same height.

Source Code Files

  • default.html-  contains HTML source for examples.
  • program.js- contains JavaScript source code for examples.
  • program.css – contains CSS source code for examples.

CSS [MSDN, March 14, 2012]
Internet Explorer Developer Center > Learn > Internet Explorer 10 Guide for Developers > CSS

[This documentation is preliminary and is subject to change.]

Windows Internet Explorer 10 Consumer Preview, as well as Metro style apps using JavaScript in Windows 8 Consumer Preview, adds support for several new Cascading Style Sheets (CSS) features, including new advanced layout, visual effects, and panning and zooming capabilities. This trend began with Windows Internet Explorer 8 (full compliance with the Cascading Style Sheets, Level 2 Revision 1 (CSS2.1) standard) and continued with Windows Internet Explorer 9 (support for CSS rounded corners, multiple background images, new color models and opacity, Cascading Style Sheets, Level 3 (CSS3) Fonts and Web Open Font Format (WOFF), 2-D Transforms, Media Queries, CSS3 Namespaces, and more. Internet Explorer 10 continues this progress by introducing support for the following CSS features:

Advanced Layout

Internet Explorer 10 and Windows 8 introduce several new methods to lay out your webpage or Metro style app using JavaScript with CSS. These methods include:

  • CSS Exclusions: Wrap text so that it completely surrounds elements, instead of limiting elements to floating to the left or right of text.
  • CSS Regions: Take a single stream of HTML content that includes both text and images, and stream that content into multiple empty containers defined in a standard HTML document.
  • CSS3 Multi-column Layout: Flow content into multiple columns that allow for a gap and optional rule between them.
  • CSS3 Flexible Box (“Flexbox”) Layout: Takes the available space into account when defining box dimensions, thereby enabling relative sizes and positioning.
  • CSS3 Grid Alignment: Divide space for major regions of a webpage or web app, and define the relationship between parts of an HTML control in terms of size, position, and layer.

2011 in review: the most productive year in CSS? [by Molly Holzschlag in .net magazine, Dec 23, 2011]

… Known for drama, the CSS Working Group left those days behind in 2011. Armed with revisions to the group’s charter, strengthening of leadership, expansion of the group’s active members, a more open public face and the wise application of modularisation, 2011 may have been the most productive year in CSS yet. …

Strong leadership, multiple voices

The CSS Working Group has more active members than ever, as well as strong leadership. This is reflected in the group’s co-chairs Daniel Glazman (Disruptive Innovations) and Peter Linss (HP). With bell and gavel, they lead a large and wonderfully opinionated group as close to consensus as anyone could

Fastest movement to rec yet

In other words: Stuff got done. Here’s a taste of the best:

Flexible Box Module: Shout out to Tab Atkins (Google) along with Alex Mogilevsky (Microsoft) and David Baron (Mozilla) for steering this amazing spec with incredible passion, originally proposed by Mozilla, Netscape and Opera.

Grid Layout:Microsoft For the WIN! Editors Markus Mielke and Alex Mogilevsky (Microsoft) for this one.

Regions and Exclusions:Wow. If you haven’t looked yet, this stuff is very juicy. Presented by Vincent Hardy and other members from Adobe, this may be one of the coolest visual design/layout solutions we’ve seen in CSS yet.

Of course, the success of of CSS transitions, animations and gradients has to be mentioned, despite my own stubborn belief these are only in CSS because of late implementations of SVG. For designers, I’m happy. For the sake of “pure” CSS, not so much.

More information:

CSS Specifications Updated: Flexible Box Layout, Grid Layout [W3C, March 22, 2012]

The Cascading Style Sheets (CSS) Working Grouphas published two Working Drafts:

  • CSS Flexible Box Layout Moduledescribes a CSS box model optimized for user interface design. In the flexbox layout model, the children of a flexbox can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated. Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions.
  • CSS Grid Layout which allows designers to define invisible grids of horizontal and vertical lines. Elements from a document can then be anchored to points in the grid, which aligns them visually to each other, even if they are not next to each other in the source.

Learn more about the Style Activity.

More to see:
- THE CSS STANDARDIZATION PROCESS [current version, Oct 14, 2011]
- Understanding the CSS Specifications [current version, Dec 14, 2011]
- Specification Issues and Planning [in CSS Working Group Wiki]
- CSS current work & how to participate [current version, March 20, 2012]

Note: The latter “current work” document is ordering the specifications from most to least stable, and in that ordering there are the following “maturity stages” as well:
Completed, Stable, Testing, Refining, Revising, Exploring, Rewriting and Abandoned.


Grid alignment [MSDN, March 14, 2012]

Internet Explorer Developer Center > Learn > Internet Explorer 10 Guide for Developers > CSS > Grid alignment

[This documentation is preliminary and is subject to change.]

Cascading Style Sheets, Level 3 (CSS3) Grid Alignment (“the Grid”) is new in Windows Internet Explorer 10 Consumer Preview and Metro style apps using JavaScript. Like Flexbox, the Grid enables more layout fluidity than is possible with positioning using floats or script. It enables you to divide space for major regions of a webpage or web application, and to define the relationship between parts of an HTML control in terms of size, position, and layer. This removes the need to create a fixed layout, which cannot take advantage of available space within the browser window.

CSS3 Grid Alignment is, as of this writing, still in development. The implementation of CSS3 Grid Alignment in the current pre-release is partially based on the CSS Grid Positioning Module Level 3, which is currently a World Wide Web Consortium (W3C) Member’s Only Draft. Be aware that Grid Alignment implementation in future Internet Explorer 10 pre-releases and Metro style apps using JavaScript might change according to changes in the specification.

Because the Grid enables you to align elements into columns and rows but has no content structure, it also enables scenarios that are not possible with HTML tables. By using the Grid in conjunction with media queries, you can enable your layout to seamlessly adapt to changes in device form factor, orientation, available space, and more.

This topic contains the following sections:

For hands-on demos of Grid Alignment, see Hands On: CSS3 Grid Layout and The Grid System on the IE Test Drive.

Note: CSS Grid Positioning Module Level 3 [W3C Member-only Draft 26 October 2011] is coming up on the web with the following warning:

This specification is not being actively maintained, and should not be used as a guide for implementations. It may be revived in the future, but for now should be considered obsolete.

Moreover it has been initiated by Microsoft in September 2007, and maintained under the same authorship till abandoned and put into a Member-only status four years later (as noted above).

GRID LAYOUT PUBLICATION HISTORY [W3C, excerpted on March 23, 2012]

[actively developed but still Exploring upcoming: Working Draft]

2012-03-22 Working Draft [the same 4 editors from Microsoft]

2011-04-07 First Public Draft [4 editors from Microsoft]

June 29, 2011 by by Adrian Bateman, Program Manager, Microsoft:

… Last week, at the working group meeting in Japan (link), the community made progress on a number of new CSS3 features including Microsoft’s grid layout proposal, Adobe’s regions proposal, and the flexible box model. Microsoft also proposed a new module for CSS3 Floats and Positioning. …

Nov 30, 2010 by Adrian Bateman, Program Manager, Microsoft:

… Once CSS 2.1 is complete, the [CSS Working] group will be able to focus all its time on progressing CSS3 modules. CSS3 isn’t a single monolithic document like CSS 2.1. Instead it is a series of modules each providing a set of features that builds upon the CSS 2.1 foundation. During the meeting we presented a new proposal for Grid Layout in CSS3. The group agreed to move the spec to w3.org as an Editor’s Draft, the very first step of the standardisation process, and the discussions continue about how to proceed. …

Grid Alignment is published on W3.org! [KathyKam [MSFT], Nov 3, 2010]

Yesterday, the W3C accepted our Grid proposal and it is now published under w3.org!

http://dev.w3.org/csswg/css3-grid-align/

This is start of the long road! If you have any feedback on the spec, I’d still love to hear it.


Flexible box (“Flexbox”) layout [MSDN, March 14, 2012]

Internet Explorer Developer Center > Learn > Internet Explorer 10 Guide for Developers > CSS > Flexible box (“Flexbox”) layout

[This documentation is preliminary and is subject to change.]

Windows Internet Explorer 10 Consumer Preview and Metro style apps using JavaScript in Windows 8 Consumer Preview introduce support for the CSS Flexible Box Layout Module (“Flexbox”). The Flexbox module is, as of this writing, a World Wide Web Consortium (W3C) Working Draft. (The implementation of Flexbox in Internet Explorer 10 is based on the July 23, 2009 version of the Flexbox Working Draft. Flexbox implementation in future pre-releases might change according to changes in the specification.) Flexbox adds to the four basic layout modes defined in Cascading Style Sheets, Level 2 Revision 1 (CSS2.1) (and enabled via the displayproperty): block layout, inline layout, table layout, and positioned layout. Flexbox layout is intended for laying out more complex webpages. It’s especially useful for making the relative position and size of elements stay constant, even as screen and browser window sizes vary and change. Flexbox can lessen the reliance on floats, which are more complicated to position and size correctly.

Flexbox layout takes the available space into account when defining box dimensions, which enables relative sizes and positioning. For example, you can ensure that extra whitespace in a browser window is equally distributed to the size of multiple child elements, and that those child elements are centered in the middle of the containing block.

With Flexbox layout, you can:

  • Build a layout that is fluid—even by using different screen and browser window sizes—but contains elements (such as images or controls) that maintain their position and size relative to each other.
  • Specify how excess space along the layout axis (horizontal or vertical) of a series of elements can be proportionately allocated to increase the size of given elements.
  • Specify how excess space along the layout axis of a series of elements can be allocated to fall before, after, or between the series of elements.
  • Specify how excess space perpendicular to the layout axis of an element can be shaped around the element—for instance, extra space above or below buttons that have been laid out side by side.
  • Control the direction that elements are laid out on the page—for instance, top-to-bottom, left-to-right, right-to-left, or bottom-to-top.
  • Reorder elements on the screen in an order that is different from how they are specified by the Document Object Model (DOM).

For a hands-on demo of Flexbox layout, see Hands On: CSS3 Flexible Box Layout on the IE Test Drive.

This topic contains the following sections:

CSS Flexible Box Layout – Use Cases [CSS Working Group Wiki, July 18, 2011]

< SEE ON THE LINKED PAGE ! >

FLEXIBLE BOX LAYOUT MODULE PUBLICATION HISTORY [W3C, excerpted on March 23, 2012]

[actively developed but already in Revising upcoming: Working Draft ]

2012-03-22 Working Draft [the same 3 editors from Microsoft, Mozilla and Google]

2011-11-29 Working Draft [the same 3 editors from Microsoft, Mozilla and Google]

2011-03-22 Working Draft [3 new editors from Microsoft, Mozilla and Google]

2009-07-23 First Public Draft [3 editors from Mozilla, Opera and Apple]


Multi-column layout [MSDN, March 14, 2012]

Internet Explorer Developer Center > Learn > Internet Explorer 10 Guide for Developers > CSS > Multi-column layout

[This documentation is preliminary and is subject to change.]

Windows Internet Explorer 10 Consumer Preview, as well as Metro style apps using JavaScript in Windows 8 Consumer Preview, introduces support for the CSS Multi-column Layout Module. As of this writing, the Multi-column Layout Module is a World Wide Web Consortium (W3C) Candidate Recommendation. Multi-column layout enables content to be flowed into multiple columns, which retain a gap and an optional rule between them. It also makes it possible to vary the number of columns based on the size of the browser window.

A multi-column element is defined by the W3C as an element whose column-width or column-count property is not set to “auto” and therefore acts as a container for multi-column layout. Multi-column layout introduces the column box, which is defined as a new type of container between the content box and the content. Column boxes contain rows, which are ordered in the direction of the multi-column element. Every column box has a column height and a column width. Adjacent column boxes are separated by a column gap, which can optionally contain a column rule.

For a hands-on demo of Cascading Style Sheets, Level 3 (CSS3) Multi-column Layout, see Hands On: Multi-column Layout on the IE Test Drive.

This topic contains the following sections:

CSS3 MODULE: MULTI-COLUMN LAYOUT PUBLICATION HISTORY [W3C, excerpted on March 23, 2012]

[in Testing but the CSS3 test suite is still in development upcoming: Candidate Recommendation]

2011-04-12 Candidate Recommendation [the same editor from Opera]

2009-12-17 Candidate Recommendation [the same editor from Opera]

2009-06-30 Last Call Working Draft [the same editor from Opera]

2007-06-06 Working Draft [the same editor from Opera]

2005-12-15 Working Draft [the same editor from Opera]

2001-01-18 Working Draft [the same editor from Opera]

1999-06-23 First Public Draft [One editor from Opera]


Exclusions [MSDN, March 14, 2012]

Internet Explorer Developer Center > Learn > Internet Explorer 10 Guide for Developers > CSS > Exclusions

[This documentation is preliminary and is subject to change.]

Cascading Style Sheets (CSS) Exclusions are new in Windows Internet Explorer 10 Consumer Preview and Metro style apps using JavaScript. With CSS Exclusions, web authors can now wrap text so that it completely surrounds elements, thereby avoiding the traditional limitations of floats. Instead of limiting elements to floating either to the left or right relative to their position in the document flow, CSS Exclusions can be positioned at a specified distance from the top, bottom, left, or right sides of a containing block, while remaining part of the document flow.

Support for CSS Exclusions in Internet Explorer 10 and Metro style apps using JavaScript enables scenarios like the one illustrated in the following image, where the app shown is laid out similarly to the way in which you might design a page in a desktop publishing application like Microsoft Word or Adobe InDesign.

Sample usage of positioned floats, where an image is laid out in the middle of a block of text.

Furthermore, you can combine CSS Exclusions with other new layout features of Internet Explorer 10 and Metro style apps using JavaScript, such as CSS Grid, CSS Multi-column, and CSS Flexbox. CSS Exclusions are defined in the World Wide Web Consortium (W3C)’s CSS exclusions and shapes draft. The following subsections provide a brief overview of CSS Exclusions and how to implement them.

Note  Because of the preliminary status of CSS Exclusions, the properties described in this topic must be used with the Microsoft-specific vendor prefix, “-ms-”, to work with Internet Explorer 10 and Metro style apps using JavaScript in Windows 8 Consumer Preview. Also, be aware that the properties and syntax defined in the CSS Exclusions specification might not correspond exactly to those described in this topic. As development on both the specification and Internet Explorer 10 continues, this might change.

For a hands-on demo of CSS Exclusions, see Hands On: CSS Exclusions on the IE Test Drive.

This topic contains the following sections:

CSS Exclusions and Shapes Use Cases [CSS Working Group Wiki, Oct 28, 2011]

CSS EXCLUSIONS AND SHAPES MODULE LEVEL 3 PUBLICATION HISTORY [W3C, excerpted on March 23, 2012]

[actively developed but still Exploring
upcoming: Working Draft
]

2011-12-13 First Public Draft [2 editors, from Adobe and Microsoft]


Regions [MSDN, March 14, 2012]

Internet Explorer Developer Center > Learn > Internet Explorer 10 Guide for Developers > CSS > Regions

[This documentation is preliminary and is subject to change.]

Cascading Style Sheets (CSS) Regions is a page layout feature for Metro style apps using JavaScript in Windows 8 Consumer Preview and for Windows Internet Explorer 10 Consumer Preview. CSS Regions are defined by the World Wide Web Consortium (W3C) in the CSS Regions specification, which is currently a Working Draft. With CSS Regions, developers and designers can take a single HTML content stream of text and images and segment that stream into multiple empty containers defined in a standard HTML template. HTML templates are documents that are mostly empty of original content, but are instead composed primarily of empty containers that are sized and positioned to give incoming content a specific layout.

This allows for a continuous content stream to be restructured into a layout more suited, for instance, for tablet consumption.

Within a single page, CSS Regions allows web developers to develop complex content layouts equivalent to what might be seen in a magazine or newspaper, where multiple regions of the same flow of content (text, related pictures, video, and so on) are shaped around unrelated content elements, such as alternate stories or advertisements.

For a hands-on demo of CSS Regions, see Hands On: CSS3 Regions on the IE Test Drive.

This topic contains the following sections:

CSS Regions and Exclusions Use Cases [CSS Working Group Wiki, Feb 5, 2012]

CSS Regions can be coupled with CSS Exclusions and Shapes use cases for rich layouts with non-rectangular and intruding boxes. …

Flowing content between arbitrary areas

The following image illustrates flowing the same content across regions of different widths. As the content is resized, so are the various regions and the content simply flows between the different regions.

Flowing content between areas of a non-grid layout

Flowing content between areas and overlapping pull quote exclusion

Use case from Korean News Paper layout: http://lists.w3.org/Archives/Public/www-archive/2011Oct/att-0033/KoreanNewspapers-exclusionAreas.pdf.

Flowing content into transformed areas

See Stagger and Swagger at http://24ways.org/2009/type-inspired-interfaces

Filtering content – “Breaking news”

With CSSRegions I can filter the content and surface it. Possible use cases: “breaking news” lists, terms of content summary, collecting references from a page, such as bugs or external links.

Capturing region overflow content

Flowing content into arbitrary areas

The following image illustrates flowing content into an arbitrarily shaped area (e.g., a heart).

Flowing content *around* arbitrary areas

The following image illustrates the need to be able to flow content around an arbitrarily shaped area.

Controlling the interplay between overlapping shapes

As the following image shows, it is important to be able to control the interaction between various ‘exclusion’ areas, whether or not these have a specified shapes (they do in the example, were text flows into circular shapes).

CSS REGIONS MODULE PUBLICATION HISTORY [W3C, excerpted on March 23, 2012]

[actively developed but still Exploring
upcoming: Working Draft
]

2011-11-29 Working Draft [2 editors, from Adobe (the same) and Microsoft]

2011-06-09 First Public Draft [One editor from Adobe + 7 others from Adobe]

CSS Regions: One Year In [Adobe Web Platform Team Blog, March 16, 2012]

Almost a year ago, Adobe began an effort to allow high quality, magazine style content to be displayed on the Web using the Open Web Platform (HTML5, CSS). Many of the necessary features were present in CSS, but not all necessary features were there. Adobe proposed CSS Regions as a draft specification of some advanced CSS layout features and a proof-of-concept implementation based on WebKit to the CSS Working Group during a face-to-face meeting (see the minutes).

The following video provides a short introduction to the CSS Regions features and you can read more in this articleposted last year.

At the time what we called CSS Regions included a fairly large set of features. Since then, we’ve taken this initial set of features through the first steps of the standardization process at the W3C. And we’ve made progress moving our demo code into WebKit proper. This blog post reviews what has happened in the last year and discusses our plans for the next few months.

CSS WG efforts

Separating features into modules

The first thing we found was that separating out some of the proposed features into smaller, more focused modules was easier to edit and seemed preferred by the CSS WG. So we separated the CSS Regions features from the CSS Exclusions features and produced two new specifications. In addition, we found that some of the issues around breaking content into Regions are also relevant to CSS Multicolumn Layout and CSS Paged Media. So these common issues have been placed in a new module called CSS Fragmentation.

To summarize, the original proposed features are now found inthese three modules:

  • CSS Regionsincludes named flows and region chains that allow for complex, magazine-style layouts.
  • CSS Exclusionsdefines ways to flow inline content around and inside shapes that are either defined in CSS or extracted from content.
  • CSS Fragmentation defines how content breaks between pages, columns or regions.

Working with co-editors

One of the greatest things that happened with this effort is the partnerships that built around this proposal. For example, Microsoft has worked as a co-editor for both CSS Regions and CSS Exclusions. In addition, they have taken the lead on the CSS Fragmentation work which they co-edit with Mozilla. We find working with co-editors extremely valuable because it improves the specification editing process and the preparation for the working group meetings and conference calls. For example, we work with the co-editors to keep the list of specification issueson CSS Regions up-to-date.

Of course, it is not just the editors who contribute to the specification, as the list of people in the acknowledgmentsection attests.

Integrating comments

Implementation update

In addition to the standards work above, we have been busy implementing these features in WebKit. Microsoft has also been implementing these features in IE10. While there has been a lot of progress (in both browser engines) these features are still cutting-edge and are protected both by vendor prefixes and run-time flags. Also, we are still working on interoperability between the WebKit version and IE. So while you can turn on CSS Regions in canary builds of Chrome, nightly builds of Safari, or try things out in the IE 10 Preview, don’t rely on what’s currently available for production yet: the syntax and feature set is still being discussed in the CSS Working Group. But it is a great time to start experimenting with the feature as Paul Irish did recently.

While Adobe had been using its own private branch of WebKit for a while, we are now contributing upstream to the main branch which has been new for us. We decided to start with CSS Regions and learn how to work properly with the WebKit community of coders and testers. By now we have almost all of the current working draft of CSS Regions implemented, and have started adding parsing code for CSS Exclusions.

Summary of where you can use CSS Regions today:

  • Canary: CSS Regions implemented but disabled by default
  • Chrome 19: CSS Regions implemented but disabled by default
  • Chrome 17, 18: CSS Regions implemented and enabled by default
  • WebKit Nightlies: CSS Regions implemented and enabled by default
  • IE 10 Developer Preview: Implemented and enabled by default

Note that in Canary or Chrome, you can use the about://flags url to list all the optional features and turn regions support on or off (you need to restart the browser for the change to take effect).

Finally, we were very happy to see that Mozilla has added magazine-style layouts (and saying they may implement CSS Regions and CSS Exclusions) to their roadmap.

Next Steps

As new working drafts are officially published we will be updating the implementation to match. So what is going to change in upcoming working drafts? The next CSS WG meeting is in May, and we plan on having the following done in time for that meeting:

  • Resolve all of the current issueslogged for CSS Regions (or document competing proposals if the WG can’t resolve).
  • Solve height:auto for regions. We have a proposal that we’re discussing with our co-editors and David Hyatt(the main contributor in the area of CSS layout in the WebKit project – David has been very helpful in our efforts to get started with WebKit: providing architecture and design guidance, implementing some parts himself and reviewing patches we submitted), and we are working on code to validate the proposal.
  • work with our co-editor to improve the description of the CSS exclusions processing model and provide a specific step-by-step example.
  • Prepare a  page template proposal and prototype. The prototype will be developed in an open GitHub project. Since this will be a very early-stage proposal the first prototype will be a JavaScript library based on CSS3 Regions in WebKit.

Working with the Web community

The past year has been very enriching for our team. We have grown not only in size, but also in our ability to contribute to both the standard efforts and in the WebKit project.

Our goal with this effort is to help move the web forward, and to improve the CSS layout features available to content authors and web developers.

Having a specification subjected to the scrutiny of a group of experts and the community at large has been a healthy exercise. This process raises the hard questions and in the end makes the proposals better. We are also very intent on running our specification efforts and our implementation efforts in parallel, because we feel it improves the quality of the specifications as they have to sustain the test of implementability. We also want to work on the specification test effort early. We have not done as much as we would like there (even though we have started and have contributed to the CSS test suite), but we are planning to ramp up. Finally, we also want to continue building demos and proof of concepts to demonstrate the use of the new features we propose. Doing so provides a great test bed for both the usability of the specification and the quality of the implementation work.

So looking back over the past year of working on CSS Regions, it has been a fun road to drive. We are thankful for the feedback we have received from the community and our partners (in particular our co-editors) and we are thankful for the WebKit community support. We will post updates on these efforts after the next CSS Working Group face-to-face meeting in Hamburg in May 2012.

Vincent Hardy & Alan Stearns
CSS Working Group Members, Adobe Systems.

Adobe WebKit Hackathon Summary [Adobe Web Platform Team Blog, March 22, 2012]

At the beginning of March, the Web Platform team at Adobe hosted a 3 day internal WebKit hackathon which focused on prototyping new features, fixing bugs and adding tests. We had a ton of fun stretching our WebKit development muscles! Over 7 different product teams participated and participating engineers delved into a broad number of WebKit feature areas including investigating enhancements to existing CSS features and improving code coverage and testing workflows for WebKit developers.

Given how much fun we had with this hackathon and how useful we think it was, we are starting to think more broadly – including hosting regular hackthons that can be open to the general public. Keep an eye on this blog for more details about upcoming hackathons and how you can participate.

Below I give a brief summary of what each hackathon team investigated and the changes that landed into WebKit trunk. For some of these topics, we haven’t determined how to take the prototype forward (or whether we should at all). This is where yourfeedback is incredibly important! Are there hackathon topics that particularly pique your interest? Do you have suggestions on how to mature these prototypes or support certain requirements? Don’t be shy – leave a comment in the entry with feedback on any of these hackathon topics and we will get back to you

Auto-sizing in CSS Regions

The W3C CSS Working Group has been discussing how to make it possible for a CSS regions’ height to automatically size to the content included within it. When content flows through a chain of regions, it would be nice to allow a regions’ height to automatically shrink wrap to the segment of content it receives. We prototyped a proposal based on this idea (described further here). We plan on moving forward with this auto-sizing prototype and discussing it further at an upcoming CSS Working Group meeting.

CSS Regions: What’s Possible Now, and What’s Coming [Christian Cantrell on Adobe blog, Feb 13, 2012]

Christian Cantrell [a Product Manager and Application Developer on the Web Platform team] demonstrates what’s possible with Adobe’s current CSS Regions implementation in WebKit (available in Chrome), and what will be possible soon.

I just made a quick screencast to show the current state of CSS Regions, and to demonstrate some new capabilities that will be here soon. In general, there are two aspects to CSS Regions:

  1. The ability to have text automatically flow between regions.
  2. The ability to hook into that flow using JavaScript in order to create more dynamic layouts.

If you use Chrome (Adobe’s work on CSS Regions is in WebKit which Chrome uses), you can go ahead and see text flow already working (including Chrome for Android). Other browsers have already committed to supporting CSS Regions, and we should know more about when their implementations will land soon. Let me know below if you have any comments or questions.

Two Ideas to Improve the Digital Book Reading Experience [Christian Cantrell on Adobe blog, Feb 20, 2012]

A demonstration of a prototype ebook reader that makes reading digital content more like physical books.

Over the weekend, I built an e-book reader prototype to demonstrate some ideas that might make the digital book reading experience better. Although I was prototyping a native application, I found the easiest way to build it was with HTML, JavaScript, and CSS. Once CSS regions make it into all mobile browsers, I might put some more time into this concept and build a real browser-based e-book reader (that works exactly how I want it to).

CSS Regions Support in Google Chrome for Android [Christian Cantrell on Adobe blog, Feb 9, 2012]

I’ve been working on some CSS Regions prototypes recently (if you’re new to CSS Regions, check out this post), so when the Chrome for Android beta came out the other day, I decided to see how some of my samples looked on mobile. It turns out, they work perfectly:

The CSS Regions capabilities currently in Chrome are pretty rudimentary, but I’m also working with some nightly WebKit builds which definitely take the feature to the next level (they include CSS Object Model support which enables the scripting of CSS Regions — that’s when they get really interesting). I’ll have plenty more samples and prototypes in the near future.

Inside the CSS WG: Arno Gourdol [.net magazine, March 8, 2012]

Web standards advocate Molly Holzschlag gives us exclusive access to the W3C CSS Working Group and interviews Arno Gourdol, senior director of engineering, web platform and authoring, Adobe

Adobe’s membership has been growing in the group, and its current proposals are really fresh and interesting. The Regions and Exclusions and CSS Shader proposals are a testament to that – truly creative proposals that will ultimately provide us with a quality of visual design we’ve not really experienced on screen and mobile devices.

MH: What are the top CSS priorities for Adobe?
AG: We want to contribute in those areas where we have a lot of expertise, for example typography, layout and interactive content. We want to be able to express with CSS the kind of sophisticated layouts that are possible in print today. The proposal we have made for CSS Regions and CSS Exclusions attempt to help with this. With our CSS Shader proposal, we’re trying to make the web more expressive for visual designers.

We are also very interested in ways to use CSS to express complex user interfaces. Our goal is to be able to build user experiences as good or better than what you can do today using native toolkits. And we also want it to be easy for developers to do so. For example, we believe that the Shadow DOM and CSS Variables are two important proposals that go in this direction.

Regions and Exclusions allow text to flow in and around page elements, or to exclude text from a region giving us a wide range of shapes and typographic, visual techniques out of reach in early versions of CSS

Regions and Exclusions allow text to flow in and around page elements, or to exclude text from a region giving us a wide range of shapes and typographic, visual techniques out of reach in early versions of CSS

MH: Can you tell readers a little more about how Regions and Exclusions work, and what benefits they will offer developers and designers?
AG: The goal of CSS Regions and Exclusions is to enable authors to create magazine-like layouts for the web. Often times, the layouts used by magazines like Wired are difficult to express using the constructs available in CSS today, particularly in a way that would remain accessible and scalable.

MH: The same with Shader – a lot of non-designers are unfamiliar with the term much less how this will, as you say, “make the web more expressive”?
AG: With CSS Shader we want to introduce cinematic effects to the web. Shaders are small programs that can calculate rendering effects, typically while being hardware accelerated (although they also work in software).

There are typically two kind of shaders: Fragment shaders that affect how each individual pixel looks and vertex shadersthat modify the geometry/position of each pixel. By combining both kind and applying them to CSS, an infinite variety of effects can be applied to any HTML element that can be styled by CSS. For example: blur, drop shadow, hue adjustments, saturation, invert, grayscale, opacity, gamma, sepia and many more.

Working with Shader to provide cinematic web effects

Working with Shader to provide cinematic web effects

MH: Are you happy with the CSS-WG’s leadership?
AG: We’re very happy with the progress being made. We’re particularly excited by the modularisation of CSS, which will allow us to make progress more quickly. I particularly like the fact that the members of the group are pragmatic and not political. That’s very refreshing, and quite frankly, something I was a bit worried about before joining.

Adobe proposes CSS enhancements for richer layout [March 15, 2011]

When the InDesign-made Wired app for iPad first shipped, I saw a bunch of snide tut-tutting from Apple-oriented sites saying that of course Adobe should’ve “simply” leveraged HTML5, because that’s the ideal solution to everything.

Unfortunately HTML has never been known for its typographical richness* or control, and that’s why Adobe built a richer type enginefor tablets derived from InDesign. Apple disallowed use of that engine via the Section 3.3.1 changes, and for visual fidelity the Wired project relied on generating bitmap images for each page.

The good news is that Adobe’s working to improve HTML to meet the demands of publishers, enabling HTML’s lightness & reflow chops to support more magazine-style layouts. CSS Regions (proposal PDF) would enable things like text reflow around irregular shapes (screenshot). And it’s not just brave talk & wishful thinking: Adobe’s contributing layout code to WebKit(see previous article for demo & details), aiming to get adoption first on tablets.

It’s easy for armchair experts to tell the world how everything should be done; it’s harder to turn promises into reality. I’m glad to see the latter happening.

[Via CNET's "Adobe proposes standard for magazine-like Web" See also "So, what has Adobe actually done for HTML5 lately?"]

* TypeKit & similar efforts are helping, and they’ve got Adobe’s support as well.


Hyphenation [MSDN, March 14, 2012]

Internet Explorer Developer Center > Learn > Internet Explorer 10 Guide for Developers > CSS > Hyphenation

[This documentation is preliminary and is subject to change.]

Windows Internet Explorer 10 Consumer Preview and Metro style apps using JavaScript in Windows 8 Consumer Preview introduce support for an important CSS Text Level 3 feature: hyphenation. Automatic hyphenation is especially useful given the new support for multi-column layout. Specifically, by using Cascading Style Sheets, Level 3 (CSS3) Hyphenation, you can do the following:

  • Hyphenate text automatically according to a built-in dictionary
  • Specify the minimum number of characters a word must have before it can be hyphenated
  • Specify a minimum word fragment length following a hyphenation break
  • Specify a minimum word fragment length preceding a hyphenation break
  • Specify a hyphenation “zone,” outside of which hyphenation is forced
  • Specify a maximum number of consecutive hyphenated lines

Note  Because of the preliminary status of the Hyphenation portion of the CSS3 Text Working Draft, the properties in this topic must be used with the Microsoft-specific vendor prefix, “-ms-”, to work with Internet Explorer 10.

This topic contains the following sections:

[css3-text] Proposed pruning & scoping of hyphenation properties [CSS Working Group Wiki, Christian Stockwell, Microsoft, March 16, 2011]

all Text Level 3 issues [CSS Working Group Wiki, April 3, 2011]

CSS TEXT LEVEL 3 PUBLICATION HISTORY [W3C, excerpted on March 23, 2012]

[actively developed but already in Revising upcoming: Working Draft]

2012-01-19 Working Draft [3nd detailed hyphenation: 1 editor (the same) now from Mozilla, 1 editor as an invited expert (pre with Antenna House the same)]

2011-09-01 Working Draft [2nd detailed hyphenation: 1 editor (the same) now from Mozilla, 2 editors: one (the same) from Antenna House, one invited expert (pre with Antenna House the same)]

2011-04-12 Working Draft [2nd detailed hyphenation: 1 editor (the same) from the unidentified source (now as an invited expert), 2 editors: one (the same) from Antenna House, one invited expert (pre with Antenna House the same)]

2011-02-15 Working Draft [2nd detailed hyphenation: 1 editor (the same) from the unidentified source (now as an invited expert), 2 editors from Antenna House]

2010-10-05 Working Draft [1st detailed hyphenation: 1 editor (the same) from the unidentified source (now as an invited expert), 2 editors (the same) from Antenna House]

2007-03-06 Working Draft [1st detailed hyphenation: 1 editor (the same)from the unidentified source, 1 editor from Microsoft]

2005-06-27 Working Draft [1st detailed hyphenation: One editor from unidentified source]

2003-05-14 Candidate Recommendation [1st detailed hyphenation: One editor from Microsoft]

2003-02-26 Last Call Working Draft [1st detailed hyphenation: 3 editors from Microsoft, 1 from Adobe, 2 from W3C]

2002-10-24 Last Call Working Draft [1st detailed hyphenation: 3 editors from Microsoft, 1 from Adobe, 2 from W3C]

2002-05-15 Working Draft [1st detailed hyphenation: 3 editors from Microsoft, 1 from Adobe, 1 from W3C]

2001-05-17 Working Draft [1st detailed hyphenation: 3 editors from Microsoft, 1 from Adobe, 1 from W3C]

1999-09-10 Working Draft

1999-07-26 Working Draft

1999-03-22 Working Draft

1999-01-27 First Public Draft


Related MSDN Blog Posts

IE10 Platform Preview and CSS Features for Adaptive Layouts [MSDN Blogs, April 14, 2011]
MSDN Blogs > IEBlog > IE10 Platform Preview and CSS Features for Adaptive Layouts

The first platform preview of IE10 contains many new CSS3 features all developed as implementations of evolving Web standards. In this post, we’ll look at three of those CSS features—CSS3 Grid Layout, Flexible Box Layout, and Multi-column Layout. CSS Grid Layout and Flexible Box Layout both help developers create layouts for complex Web applications and Web sites. Multi-column is designed to help developers create advanced text layouts for improved readability on the Web. These three new CSS features can make it easier to more effectively use screen real-estate across a wide variety of devices and resolutions—a longstanding and growingproblem for Web designers.

CSS3 Grid Layout

Let’s start with CSS Grid Layout (aka “Grid”), which is a proposal recently submitted by Microsoft to the CSS Working Group. The core idea behind Grid is to partition a Web page into a defined set of rows and columns, and then position and size elements based on those rows and columns, all using CSS. Because the size of rows and columns can be defined as fixed, flexible, or size-to-content, it’s easy to build a layout that completely fills the entire screen, regardless of screen size.

For example, the image below shows an exemplary game board which has been divided up into two columns and three rows, containing multiple elements. Some of the elements need to remain fixed, while others need to grow or shrink as the size of the browser window changes.

Illustration of desired grid-based page layout

With Grid, you can achieve this design starting with the markup below.

<div id=”grid”>
<div id=”title”>Game Title</div>
<div id=”score”>Score</div>
<div id=”stats”>Stats</div>
<div id=”board”>Board</div>
<div id=”controls”>Controls</div>
</div>

The div with ID “grid” is set as a grid container with display: grid, and the various rows and columns are defined as either flexible (that is, growing or shrinking based on available space) or auto-sizing, which sizes the row or column to the width or height of the largest element placed inside.

#grid {
display: -ms-grid;
-ms-grid-columns: auto 1fr;
-ms-grid-rows: auto 1fr auto;
}

Once the grid is defined, you can position individual elements to specific grid cells. As the markup below shows, not only can you specify that an element is placed at a specific row and column in CSS, but you can specify that an element should span multiple rows and/or columns, and specify an element’s horizontal or vertical alignment within a cell or range of cells. Elements can be specified as having a fixed size, or can be specified to fill the available width or height of the cell they’re placed in. In the example above, the “board” element grows along with the screen, while other elements, such as the “title” element, stay fixed in size. (Note that, because this is still an emerging specification, in IE10 usage, all of the grid properties below are prefixed with “-ms-”.)

#title { -ms-grid-column: 1; -ms-grid-row: 1 }
#score { -ms-grid-column: 1; -ms-grid-row: 3 }
#stats { -ms-grid-column: 1; -ms-grid-row: 2; -ms-grid-row-align: start }
#board { -ms-grid-column: 2; -ms-grid-row: 1; -ms-grid-row-span: 2 }
#controls { -ms-grid-column: 2; -ms-grid-row: 3; -ms-grid-column-align: center }

By combining Grid with CSS3 Media Queries, you can specify entirely different layouts for different resolutions, aspect ratios, and screen orientations. For example, you can define a different number of rows or columns for different screen sizes (e.g. more columns for a vertical “portrait” layout, more columns for a horizontal “landscape” layout), or specify that rows and columns are sized differently. You can try this out for yourself with the Griddle test driveusing the IE10 platform preview and resizing the window from wide to narrow width.

In addition, because the position of elements in a grid is independent of the order they are specified – that is, their position is specified purely by CSS rather than by their order in HTML markup – it’s easy to give elements different arrangements on different screen sizes, or even avoid displaying some elements entirely in some layouts. For example, you might want to skip displaying certain toolbars or sidebars on a small resolution designed for phones or tablets, where you might show a wider variety of content elements on a layout designed for a widescreen, high-resolution desktop screen. Most importantly, all these different effects are achieved purely with CSS – and because the visual display of content is entirely separated from the HTML, there’s no need to prepare a different HTML file for mobile vs. desktop devices.

CSS3 Flexible Box Layout

Grid is great for adaptive layout, but it’s not the only option available. In the IE10 platform preview developers can also useFlexible Box Layout (aka “Flexbox”) to lay out elements in a fluid, source-independent way. Flexbox and Grid share many common aspects – elements are placed inside of a parent container, and their size and position are adjusted depending on the parent size. The key difference between Flexbox and Grid is that Flexbox lays out its content along a single axis (vertical or horizontal) whereas grid can lay out content in both rows and columns. Also, the default behavior of Flexbox is to “stack” elements along one side of the container, whereas the default behavior of Grid is to place elements “on top” of each other in row 1, column 1.

While many behaviors that can be achieved with Flexbox are also possible with Grid, and vice versa, Flexbox is best suited for creating individual components and collections (e.g. toolbars, image collections) while Grid is designed for creating full-page layouts, and for components where individual elements overlap.

The basics of using Flexbox are straightforward. The example below starts with three buttons (individual components of a basic media toolbar) laid out in a containing div. By default, these buttons are laid out with display: inline-block, which means that they have an intrinsic size that does not change as the container size changes. This can lead to unused white space where the layout does not adapt to the available space.

<div id=”playControl”>
<button>Back</button>
<button>Play</button>
<button>Forward</button>
</div >

Illustration of three buttons laid out without flexbox
Result of markup above

With flexible box layout (i.e. display: box) you can specify that the button container will lay out its children such that each child element has an equal share of the available space in the container. Now the buttons fill the container completely, and will do so regardless of how the container size changes. This is an approach that works well with flexible grid cells – if the outer container is a div that is sized to fill a flexible grid cell, then not only does the overall layout adapt as the screen size changes, but the individual toolbar changes as well.

#playControl { display: -ms-box; }
button { -ms-box-flex: 1; }

Illustration of three buttons laid out with flexbox
Result of markup above

Another useful feature of Flexbox is the ability to act as a container for an arbitrary number of items, especially using the box-lines property. Specifically, a container element (such as a div) with display: box; set will automatically stack elements in that container towards one side of the container (the left side of the container, for most Western languages). If the box-lines property is set to multiple, then a Flexbox container will arrange content elements in multiple rows of content, if vertical space allows. This means that a flexible container element can automatically arrange its contents to make the best use of space, without the designer having to know how many items are in the container and having to explicitly place each item.

In the example images below, the same five items are arranged in a single row when the container is wide enough, but a second row of items is created beneath the first when the container is too narrow. This approach can be used when a dynamic data query has returned an unknown number of items, and you want to display them in a simple, straightforward way.

<div id=”collectionContainer”>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div >
#collectionContainer { -ms-box-lines: multiple; }

Illustration of 5 divs side-by-side without wrap

Illustration of 5 divs side-by-side with wrap

CSS3 Multi-column Layout

Finally, you can use CSS Multi-columnlayout to arrange content into multiple columns on the page. This approach is used by newspapers and magazines in the print world, which makes text easier to read and track from line to line by organizing the content into multiple parallel columns.

Multi-column layout allows you to do that with a few lines of CSS. For example, the content in the image below can be quickly organized into 3 columns by placing the line “column-count:3”on the containing div.

<div id=”beagleContent”>
<img src=”3Beagles.jpg” style=”float: right”>
Lorem ipsum…
</div >

Illustration of single column layout

#beagleContent { column-count: 3; }

Illustration of multi-column layout

Multi-column layout offers a wide variety of options to specify how your content is laid out, including the ability to set a fixed column count, a minimum column width, the size of the gap between columns, and even column rules, which are decorative borders between columns. Multi-column layout also provides the ability to specify where column breaks should occur, and to have content automatically balanced between columns, so all columns are the same length. Also, note that because Multi-column is a W3C Candidate Recommendation, no -ms- tag is needed when using these properties. You can try an example of CSS3 multi-column layout using the IE10 platform preview and other browsers.

Your Feedback

We’re excited to have CSS3 Grid, Flexbox and Multi-column in the IE10 platform preview so developers can learn, experiment, and provide feedback. We will continue to work with the Web community and the W3C CSS working group on the CSS Grid and other specifications and submitaccompanying test cases. Together we can make CSS3 adaptive layouts another dependable part of the interoperable Web platform.

—Chris Jones, Program Manager

Building Rich Text-Centric Pages in IE10 [Oct 11, 2011]

Internet Explorer 10 in the Windows Developer Previewintroduces 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>

http://content.html

<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 onthe 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 theW3C CSS3 Regions specificationdescribes these in detail.

The ietestdrive.com demo Hands On: CSS3 Regionsprovides 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 onietestdrive.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 athttp://connect.microsoft.com/ie/.

—Christian Stockwell, Program Manager, Internet Explorer

About these ads

About Nacsa Sándor

Lazure Kft. • infokommunikációs felhő szakértés • high-tech marketing • elérhetőség: snacsa@live.com Okleveles villamos és automatizálási mérnök (1971) Munkahelyek: Microsoft, EMC, Compaq és Digital veterán. Korábban magyar cégek (GDS Szoftver, Computrend, SzáMOK, OLAJTERV). Jelenleg Lazure Kft. Amire szakmailag büszke vagyok (időrendben visszafelé): – Microsoft .NET 1.0 … .NET 3.5 és Visual Studio Team System bevezetések Magyarországon (2000 — 2008) – Digital Alpha technológia vezető adatközponti és vállalati szerver platformmá tétele (másokkal együttes csapat tagjaként) Magyarországon (1993 — 1998) – Koncepcionális modellezés (ma használatos elnevezéssel: domain-driven design) az objektum-orientált programozással kombinált módon (1985 — 1993) – Poszt-graduális képzés a miniszámítógépes szoftverfejlesztés, konkurrens (párhuzamos) programozás és más témákban (1973 — 1984) Az utóbbi időben általam művelt területek: ld. lazure2.wordpress.com (Experiencing the Cloud) – Predictive strategies based on the cyclical nature of the ICT development (also based on my previous findings during the period of 1978 — 1990) – User Experience Design for the Cloud – Marketing Communications based on the Cloud
This entry was posted in Uncategorized and tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , . Bookmark the permalink.

5 Responses to Standards-based adaptive layouts in Windows 8 (and IE10)

  1. Pingback: Fej-fej mellett a Windows 8, az IE10 és a W3C web platform: az adaptív elrendezés (layout) esete - Hírcsatorna - devPortal

  2. Pingback: Kimaradhat a XAML a Windows 8-ból « Balássy György szakmai blogja

  3. Pingback: Kimaradhat a XAML a Windows 8-ból - Balássy György szakmai blogja - devPortal

  4. Pingback: The cloud experience vision of .NET by Microsoft 12 years ago and its delivery now with Windows Azure, Windows 8/RT, Windows Phone, iOS and Android among others | Experiencing the Cloud

  5. Pingback: Microsoft on five key technology areas and Windows 8 –UPDATED [Dec 15, 2012] with full content up to delivery and change of command | Experiencing the Cloud

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s