There have been a number of interesting cutting edge standards proposals that I’ve seen out there recently and thought worth sharing. Several of these come from Adobe, which seems to really be investing themselves in the web platform recently. They’re the ones behind the CSS regions and exclusions features that will offer really beautiful magazine-like text layout (e.g. flowing around non-rectangular shapes) in the browser.
Blending Modes
Adobe has also been working on some other improvements to the web platform, including several to the Canvas element, including Photoshop like blending modes. The blending modes have been added to the canvas context’s globalCompositeOperation property, which had previously only been used for Porter-Duff compositing modes (e.g. sourceOver). Adobe has also added blending modes to CSS for HTML content, with separate blending modes for foreground, background, and shadows. You can check out the compositing and blending specification for more info.
Winding Rules
Image may be NSFW.
Clik here to view.
As for winding rules, this was actually one first implemented by Mozilla for the PDF.js project. Previously, there had been no way to specify a winding rule for canvas like you could for SVG content. Winding rules change how shapes are drawn when they are self intersecting, as you can see in the above image. So Mozilla added support for a fillRule property to canvas elements, and it was subsequently adopted by the standard. I believe WebKit has also implemented the feature, though I’m not sure. However, Adobe has a new proposal to change it from a property to an additional argument to the fill, clip, and path hit testing methods instead. They go over why, in this blog post.
SVG OpenType Fonts
Another really interesting recent standards proposal is Mozilla’s addition to the OpenType font specification for SVG glyphs. OpenType is pretty much the industry standard font format at this point, and it has great support for complex language shaping and advanced typographic features. Currently it supports glyph definitions in two simple formats: TrueType and PostScript. Mozilla is proposing to add a third glyph type, which is SVG. This means that you could define each glyph in the font to be an SVG document. And since SVG can contain color and even animated content, you could have animated color glyphs in fonts.
I’m not sure how I feel about animated glyphs, but color would be really useful, specially with the rise of Emoji characters over the last few years. Usually Emoji fonts are just bitmaps which means they aren’t really scalable to any size. Since SVG is vector based, it that problem can be solved. If added, this proposal would probably also remove the need for the SVG fonts spec, which has been around for a while without much browser support since it doesn’t have very good advanced typographic support. It will be interesting to see where this goes. Mozilla has already implemented it in Firefox (though it is disabled by default), and I expect it will be utilized in other places as well.
Balanced Text
Finally, Adobe has a proposal for to allow balanced text layout support in browsers for better readability. Typically, browsers use a simple greedy algorithm for wrapping text, by continually adding words until a line is too long and then wrapping to the next line. This works fairly well for left aligned text, but for centered text it doesn’t look to good to have a long line followed by a really short line. Adobe is proposing a CSS text-wrap property with a balanced value to control the algorithm that the browser uses to wrap text. They even have a jQuery Plugin that implements the feature in current browsers.
Specifications and proposals are moving ever quicker on the web, so I thought I’d take a minute to share some of them with you. These weren’t necessarily directly JavaScript related, but it’s all the web so I thought it was worth it. Can’t wait to see them implemented and more new ones to come along: that’s progress!