Web Platform Team Blog

Adobe

decor

Making the web awesome

Take CSS Regions out for a drive in Safari 6.1 & 7!

We mentioned in an earlier blog post that Regions was available in iOS 7 Safari. With the Mavericks release, CSS Regions are available in Safari 6.1 & 7 too! You can use them with -webkit- prefix and have them work in all the latest versions of Safari on mobile and desktop.

This marks Safari as the second browser to ship an implementation of Regions enabled by default! This is a momentous occasion for us to see a feature we have nurtured for just over 2 years be more widely available for designers to experiment with and give us feedback. We could not have done it without the support of browser vendors such as Apple, Microsoft, and Google.

Learn

If you want to know the basics of CSS Regions, Apple’s Beth Dakin and our Mihnea Ovidenie have written a great introduction on the WebKit blog.

Play

You can also take a look at Baby Elephants a demo created using National Geographic content on the latest Safari on Mobile and Desktop to see how regions can enable more control over your web design.

Also take a look at some of pens on codepen.io that demonstrate how regions can be used (if you create some of your own, please use the tag ‘CSS Regions’ so others can take a look!).

Apply

Did you know you can use tools in Chrome & Safari Developer Tools to help with regions? To learn about that and more, head over to Smashing Magazine where CJ has written in depth on how regions can be used.

To celebrate this occasion, we are donating to the National Geographic Society on your behalf.

If you can questions, please do leave comments below or tell us on twitter.

Making Long-form Journalism More Repeatable

Last spring, we experimented with combining some amazing content from National Geographic with emerging layout features like CSS Regions and Shapes. We believe that the result — a feature called Forest Giant — was a really elegant and unique experience. However, like so many other popular long-form articles we’re now seeing on the web, it was hand-crafted and custom-designed around very specific content which meant it wasn’t easily repeatable. So for our next experiment, we wanted to see if we could do something that would integrate better with templating and content management systems. In other words, we wanted to see if we could develop some techniques for making all content on the web look better rather than just content that was hand-produced.

Our latest demo uses another amazing story from National Geographic about orphan elephants in Africa. Our goals for this project were:

  1. Responsiveness. We wanted the site to work on all screen sizes.
  2. Expressiveness. It had to showcase National Geographic’s rich imagery and content.
  3. Repeatability. The content had to be structured in a way that could be easily templatized or integrated with content management systems.

The answer we came up with was to combine viewport units and CSS Regions. Viewport units enable us to create pages that are the exact size of the browser’s viewport, or viewable area. That means each page completely fills the view on any screen (and in either orientation) when scrolled into position. We then decided to alternate between text pages and photographs in order to break the content up and to make it more visually appealing. For images, we use background-size:cover to ensure that they take up the entire element and give us a professional, full-bleed look.

Since the height of each page is determined by the viewport size rather than by the text inside it, we’re using regions to flow text through each container. The entire article is actually inside a single element, but by creating a region chain with each element a full 100% of the viewport size interspersed with full-bleed image containers, it becomes really straightforward to create clean, readable, and responsive pages.

This approach can be easily integrated with a template or content management system, combining graphics and text in a responsive and visually interesting manner. When considering the investment required for custom-built articles, it’s clear that regions can be an integral component of a much faster and more cost-effective digital publishing solution.

While Adobe is extremely focused on making layout and graphical contributions to the web platform, our work with National Geographic has inspired us to make a contribution of a different sort. Adobe will donate $1 per tweet that includes the hashtag #ProtectTheElephants to the National Geographic society in order to help save endangered elephants. So go make Adobe donate some money!

If you want to see the Orphan Elephants project firsthand, go check it out on GitHub.

Canvas blending now available on iOS7 and OSX Mavericks

The recent release of iOS 7, OS X Mavericks and Safari 6.1 added support for several new web features. Among those are CSS Regions and blending modes in canvas.

For cool use of Canvas blend modes feature, you might want to check out CJ Gammon’s demo from the graphical web conference in San Francisco.

One of his slides applies blending on a video to generate an interesting effect:

screenshot2

For a more basic example that you can experiment with, see this codepen.

We have now have support for canvas blend modes on the latest version of the following browsers:

  • Chrome (all platforms)
  • Firefox (all platforms)
  • Safari 6.1, 7.0 (iOS and OSX)
  • Opera

The specification also recently progressed to Last Call and is on track to become Candidate Recommendation. (See here to find out what this means)

We’d love to hear what you think of these new features! Also, let us know if you come up with cool demos.

Test the Web Forward: Now Part of the W3C

With the exponential growth of the Web and rapid adoption of HTML5 and CSS3 over the past several years, interoperability across all browsers is now more important than ever. The best way to ensure interoperability is with rich and thorough test suites developed by the community and shared by the community. Recognizing this, the Adobe Web Platform team borrowed the message (and the cute dinosaurs) from Move the Web Forward and began a new community-driven movement focused solely on testing and interoperability. We called it Test the Web Forward.

Adobe initiated the movement as a series of events that were part conference + part hackathon designed to educate and enlist the web development community to write new tests for the wide body of W3C specifications. The motivation and goals of Test the Web Forward resonated deeply with the web development community worldwide. To date, there have been seven major Test the Web Forward events in the U.S., Europe, and Asia with hundreds of attendees, a long & impressive list of experts & speakers, and nearly 3000 new tests written! These events were truly a community effort as they were organized, hosted, and sponsored by many companies, including all of the major browser vendors.

It’s been a year and a half since the first event and in that time, Test the Web Forward has become internationally recognized and synonymous with W3C Testing. Because of this, Adobe has proudly donated it to the W3C , where it will converge with the larger testing initiative and expand into much more than just events. To start, the newly launched site becomes the single centralized resource for W3C testing documentation, including test format and style, test submission, review process, and much more. Staying true to its grass roots, the site and its content belongs to everyone and contributions from all sources are warmly welcomed, including to the new blog. In the future, testthewebforward.org will expand even more to include test infrastructure, test results, coverage data, and all W3C spec testing news. It will continue to host all of the information about events, past and future.

The Adobe Web Platform team is very happy to see the Test The Web Forward effort reach a new level. We’re looking forward to continuing to work with the W3C and the community to build upon its early success and we remain deeply committed to continuing to Build a Better Web.

CSS Regions Painting in WebKit and Blink

The CSS 2.1 specification defines a box model for displaying content inside a document. The WebKit and Blink engines adhere to this specification down to an implementation level, thus assuming elements are laid out as a single box when laying out a document. However, when adding fragmentation in the mix you may end up with multiple boxes for a single element. This means the engine must do some tricks to correctly render the box fragments. Most aspects of the fragmentation implementation are covered in my previous blog-post CSS Fragmentation in WebKit. In this article I’d like to focus on how painting is implemented for CSS Regions.

How the document looks like after layout, before the flow thread is painted inside the regions

Figure 1

Let’s consider a document that defines a named flow (a RenderFlowThread object) containing a large paragraph flowed through three regions with specified width and height. In the first step of the layout only the contents of the body element are laid out, ignoring the elements in the named flow. This step will compute the size and the position of the regions (the RenderRegion objects) in the page. During the second step, the engine lays out the contents of the flow thread. As you can see, the regions have different widths which will reflect on the size of the line boxes. In Figure 1 you can see the flow thread sketched after layout. Each fragment of the paragraph is coloured differently to reflect the region where it will be positioned. As the spec says, the flow thread has the width of the widest region (in our case, region number three). The widths of the line boxes are set to the width of their containing block in each region by using information stored in objects of type RenderBoxRegionInfo. They contain length values required to adjust the width of each block in every region where that block is present. The extra white space between the last line in a region and the first line in the next region is the pagination strut (represented by grey arrows in Figure 1), the offset applied to content to simulate unforced breaks. Because the height of the flow thread is the sum of the heights of the regions, if there is too much content to fit all the regions the content will overflow the flow thread (see the lines at the bottom of the flow thread).

Flow thread layer painting inside the regions

Figure 2

The actual rendering of the content as fragments happens at paint time. When a region is called to paint itself it will adjust the position of the graphics context and offset the flow thread layer to paint inside the region content box at the correct position. The entire content of the flow thread has its width adjusted using the RenderBoxRegionInfo objects so that everything will look as expected inside the region (e.g. the box decorations such as borders, shadows etc.). The parts of the flow thread that are not supposed to be painted (i.e. they belong to other regions) are clipped out as you can see in the greyed area of Figure 2. In the last region you can see the bottom overflow of the region is not clipped. That’s because the clipping is made using the visual overflow of the RenderFlowThread, which includes all the content that doesn’t have a self-painting layer. The content of the flow thread (including the overflow) is split by the regions content boxes and each region paints only its part of the flow. At the end of the painting process, the document looks like the one in Figure 3 below. Each region contains its portion of the flow and the overflow in the last region is visible.

The final rendering of the document

Figure 3

The most important improvement we are currently working on is delegating the painting of the flow thread to the region layer, not the region renderer as it is currently implemented. This enables us to integrate the flow thread painting with the layer tree architecture and fix some of the major bugs remaining in the implementation (e.g. incorrect clipping of the relative positioned content overflowing a region).

Ideas on improving selections in regions by the Igalia team

Early June, we announced our partnership with Igalia to work on Regions and Shapes. A few days ago, the Igalia team posted an update on where things stand with respect to improving selection of text fragments across region containers.

The team at Igalia have worked on a test suite for selections in Regions and describe some of the challenges of selecting text within regions. For more on this, read their blog post on CSS Regions & Selections!

PBS KIDS on Snap.svg

I had a chance to catch up with Miguel Montanez from PBS KIDS yesterday at HTML5 Dev Conf and ask him a couple of questions about how they’re using Snap.svg. I was glad to see that Snap really simplifies their designer/developer workflow, and that PBS KIDS has extensive plans for it in the future.

Using CSS Shapes to Enhance Visual Storytelling

Opening scene of Alice in Wonderland demo

Web designers have long been forced to create within the constraints of blocks. Since most daring ventures into non-rectangular layouts using regular CSS and HTML usually end in frustration, most of the content on the web is still trapped in simple boxes.

All that is about to change with the implementation of CSS Shapes, a new standard which allows web designers and developers to wrap content inside or around custom shapes. Shapes are defined in simple, practical, and reusable ways; most importantly, unlike most CSS hacks that just simulate shapes, they can affect the entire layout of a web page.

Building Alice in Wonderland

In order to demonstrate how custom shapes can enhance layout expressiveness on the web, we built a demo based on the story of Alice in Wonderland by Lewis Carroll. We teamed up with the French agency ultranoir which created stunning hand-drawn graphics for us which we integrated into a beautiful and evocative story.

On top of the carefully drawn landscapes and characters, we built an interactive HTML5 experience where CSS Shapes are used in key places to enhance the visual storytelling experience. We also employed a scroll-driven navigation model which keeps the reader engaged in a linear and gradual exploration of the content.

Text wraps inside and around custom shapes in unexpected ways for an HTML & CSS web page, enticing the reader to continue scrolling and discovering. Clever uses of custom shapes help support content at key points throughout the story.

Since our adaptation of Alice uses cutting edge web standards, it currently requires Google Chrome Canary with support for CSS Shapes enabled.

Expressive Layout

The first scene opens up with a curious Alice looking down into the famous rabbit hole. Using a shape-inside CSS property, the text wraps intricately between the outline of the girl and that of the tree. By varying the top margin of the content as the user scrolls, we achieved the effect of the text draining down the rabbit hole, enticing further exploration. This effect was simple to build with CSS Shapes, and it demonstrates how the browser can quickly update content layout within a shape-inside.

Opening scene of Alice in Wonderland demo

The experience is extremely fluid because no JavaScript is used to control the text layout. The browser’s native layout engine achieves much better performance when dealing with shapes for wrapping content.

Throughout the story, the content interacts with its surroundings in interesting ways. In some cases, the content wraps around the custom shapes of characters while also wrapping inside the layout of the rabbit hole. The scene with the Cheshire Cat falling is a good example: each instance of the cat uses the shape-outside property which makes the adjacent text wrap around the outline of the falling feline. Adjusting the position or size of the cat will automatically layout the content around it.

cat-falling

In the original story of Alice in Wonderland there is a scene where Alice has a conversation with the caterpillar smoking a hookah. The art direction we got suggested that the caterpillar’s words might appear as puffs of smoke. This was a great opportunity to use animated shape-inside. As the scroll-driven dialogue between the two unfolds, the shape of the text container gradually animates giving the impression of smoke clouds floating up in the air.

caterpillar

This again demonstrates naturally occurring wrapping within a shape-inside with no JavaScript at all to directly adjust the layout of the text. There are several other uses of sophisticated shapes throughout the demo; in fact, there are no rectangular boxes used within the app at all.

CSS Shapes are designed to work well with existing CSS features. At the very end of the demo, the cat’s head slowly appears in a carving between slanted blocks of text. These are actually two CSS Regions, each with their own shape-inside polygons. Editing or changing the font will not cause the text to overlap the cat’s head due to the custom shapes which the text must respect.

cat-head

Source and Support

The implementation of CSS Shapes is ongoing in WebKit and Blink. CSS Shapes is available in a few browsers, but it may not be turned on by default. To see which browsers support shapes — and to learn how to enable them — see Enabling Cutting-Edge Graphical & Layout Features.

The source code for the entire Alice in Wonderland demo is available on GitHub for you to peek at and explore. Simple examples, which are better suited for getting started with CSS Shapes, are available on CodePen.

Going Forward

Widespread support for CSS Shapes is coming soon. These are not one-off experiments or prototypes, but actual CSS features that passionate developers are working hard to implement in order to make sure the web keeps moving forward.

Shapes provides a whole new set of options for web designers to define content layout in creative, innovative, and expressive ways which enhance the reader’s experience. They are a giant leap forward in making the web browser a first-class design surface.

These features are long overdue on the open web, and we can’t wait to see what you will build with them.

Introducing Snap.svg: The Next Generation JavaScript Library for SVG Graphics

 Snap-Feature-Image
Published by Jonathan Dunlap and Christian Cantrell

Today the Adobe Web Platform Team is announcing version 0.1 of Snap.svg, a brand new JavaScript library for creating SVG. Snap.svg provides web developers with an intuitive and powerful API for animating and manipulating both existing SVG content and designs generated with Snap.

Currently, the most popular library for working with SVG is Raphaël. One of the primary reasons Raphaël became the de facto standard is that it supports browsers all the way back to IE 6. However, supporting so many browsers means only being able to implement a common subset of SVG features. Snap was written entirely from scratch by the author of Raphaël (Dmitry Baranovskiy), and has been optimized for modern browsers (IE9 and up, Safari, Chrome, Firefox, and Opera). Targeting modern browsers means that Snap can support powerful features like masking, clipping, patterns, full gradients, groups, and more.

Another unique feature of Snap is its ability to work with existing SVG code (think “jQuery or Zepto for SVG”). That means you can create SVG content in tools like Adobe Illustrator, then manipulate it using Snap to build interactive charts, responsive interfaces and more. You can even work with strings of SVG (for example, files loaded via Ajax), which would allow you to query for specific shapes.

Finally, Snap supports animation. By providing a simple and intuitive API for animation, Snap can help make your SVG content more interactive and engaging.

Snap is 100% free and 100% open-source (released under an Apache 2 license). We hope you will love it and welcome you to provide any feedback or contributions. Snapsvg.io Site

PBS Success Story: pbskids.org

“At PBS KIDS our mission is to create engaging content that will educate, inform and inspire kids. By having Snap.svg in our Web tools arsenal we can now achieve the same type of expressive content that we have on television across various devices in a lightweight, flexible and stunning way without sacrificing the quality.”

Chris Bishop – Creative Director, PBS Kids

Miguel Montanez from PBS KIDS talks about using Snap.svg on their new site:

The Web Platform Team at HTML5 Dev Conf

HTML5 Dev Conf is happening soon in San Francisco, and many of our team members will be there as speakers and attendees. Here are all the stuff we are going to be talking to you about:

Arno Gourdol will be speaking about how cupcakes, Alice in the Wonderland and Baby Elephants are moving the web forward. Does that sound like a riddle? Don’t worry, you will get to see boundary-pushing demonstrations of the latest features that our team has been working on to make the web richer for designers and developers on Oct 23 in E-134 at 9am.

CJ, who has been working on pioneering showcases of the future of the web, will be speaking about how to create rich web experiences using different techniques, and explore how new web features may change the way we create rich web content on Oct 22 in E-132 at 2.30pm.

Alan Stearns, who edits the Regions and Shapes specifications and has spent significant time thinking about layout in CSS, will be speaking about various layouting mechanisms that are available today (like Flexbox and viewport units) and preview upcoming features like Grid Layout, Regions, Shapes and Exclusions) on Oct 22 in E-120 at 10.40am.

Alan Greenblatt, who has been experimenting with blend modes, regions and SVG filters while writing a mighty fine cross-browser library to take advantage of SVG filters for styling, will be speaking about SVG filters, CSS filters, and Blend Modes on Oct 22 in N-120 at 4pm.

Dmitry Baranovskiy has been working on a new JavaScript Library that will be unveiled during his talk on Oct 23 in E-133 at 11.40am! This one will be exciting!

I will be speaking on how GPU impacts web developers and what you can use to learn more about it and use it in the right manner on Oct 22 at 11.40am in E-131.

There will also be other Adobe folks talking about interesting ways Adobe tools could be of use to you.

  1. Tomas Krcha will be talking about using JavaScript to program your own workflows from Photoshop on Oct 23 in N-120 at 2.30pm.

  2. Adam Lehman will speak on Brackets: An Open Source Code Editor for the web on Oct 22 in E-133 at 5pm.

  3. Paul Trani will speak on how Creative Cloud helps you in creating better web experiences on Oct 23 in E-130 at 2.30pm.

  4. Jacob Surber will talk about how Edge Reflow helps in visualizing and communicating your responsive intent on Oct 22 in E-130 at 2.30pm.

  5. Alejandro Gutierrez will show how you can explore HTML5 and CSS through the eyes of Dreamweaver on Oct 22 in E-130 at 10.40am.

  6. Sarah Hunt will teach you how to get started with web animations using Edge Animate on Oct 23 in N-120 at 1.30pm.

  7. Andrew Trice has a few sessions on PhoneGap and Cross-platform mobile development, so does Christopher Coenraets.

We hope to see you there! We also will be at our booth where you can find us (let us know on twitter too!) and chat more about what you think about our features, and what we can do to make your design and development better.