Pages: 1 2 3 4 5 6 7 8 9 10 11 ... 30 >>
29/08/10
Links for August 29th
- Calculate distance and bearing between two Latitude/Longitude points using Haversine formula in JavaScript - A very handy JavaScript library for performing all sorts of calculations with GeoLocation information.
- WebKit HTML5 Search Inputs | CSS-Tricks - Handy tips on overriding the default styling on search fields in WebKit (check the comments too).
- Periodic Table of the Elements - Josh Duck - A nice visualization tool which lets you see what elements are in use on any given website.
22/08/10
Links for August 22nd
- japh(r) by Chris Strom: Inkscape SVG Not Quite in Raphaël.js - A nice description of porting a shape drawn in Inkscape into a Raphaël canvas.
- HTML5 Peeks, Pokes and Pointers - A handy guide but compact to detecting support for various HTML5 features.
- Jaybill.com » Blog Archive » Deployment-First Development - Don't leave deployment as a last minute rush job, do it first, make it easy, and you'll be shaking the issues out all the way through development and testing.
- An implausibly illustrated introduction to HTML5 Web Workers - An entertaining and informative introduction.
15/08/10
Links for August 15th
- Making maps accessible - Commonwealth Conversations: Technology - Mapping applications are a great example of where accessibility is not just about adding alternative text to graphics - think about the information your users need and only then decide an approach for alternatives to the map.
- Adactio: Journal—Hypertext history - Jeremy Keith goes on a trip down markup memory lane.
- HTML5 Boilerplate - A rock-solid default for HTML5 awesome. - The second starter template for HTML5/CSS3 projects I've seen this week, this one includes some (Apache) server configuration files too.
- HTML5 Reset - A starter template for HTML5/CSS3 web projects, probably the first of many.
- Bronte Capital: A fund manager experiments in geek... - The switch from Windows to Linux from an economic perspective.
- Commonly Confused Bits Of jQuery - Smashing Magazine - For a small library jQuery has a lot of functionality, there have been several occassions where I've discovered the reason I was finding it so hard to accomplish what I needed was because I was using the wrong method. This blog post highlights many of the places where that is likely to happen.
- Surfin’ Safari - Blog Archive » The HTML5 Parsing Algorithm - WebKit unveils it's HTML5 parsing engine, opening the way for inline SVG and MathML.
- Start Using HTML5 WebSockets Today | Nettuts+ - Nice introduction to the WebSocket API, which you can probably start using just as soon as the protocol stabilises.
08/08/10
Links for August 8th
- Kim Cullen » Beyond “I hate green:” Managing Productive Visual Design Reviews - Some tips for making your design review meetings more useful and productive.
- HTML5 Fuzzies – Jeffrey Zeldman Presents The Daily Report - HTML5 has already been more widely abused than the term AJAX before it, but do we need to educate everybody on exactly what is HTML5 and what isn't before it's too late or can we accept a useful compromise and get on with giving clients what they need?
- Using the Goldilocks Principle to get design "just right" - A useful approach to use while iterating through the design process.
- JS1k, 1k Javascript demo contest - Write something amazing in 1024 bytes of JS.
- Mozilla’s New JavaScript Value Representation < Rob Sayre's Mozilla Blog - Learn about the internals of the Firefox JavaScript engines, past and future, representing variables in a way that allows interoperability with C.
- Dynamic Semantic Publishing for any Blog (Part 1) - benjamin nowack's blog - A look at the dynamic creation of 'portal' type pages for linked data entities on your blog or CMS.
01/08/10
Links for August 1st
- Stubbornella » Blog Archive » Woman in technology - A thought provoking post on why there are so few women in IT, as usual this subject provokes a energetic discussion in the comments.
- Setting up Android Development in Fedora 12 | www.kevinfowler.net - Step by step instructions for getting the Android developer tools working on Fedora Eclipse.
- Style Your Site According to the Weather with jQuery - Cool jQuery hack, leveraging YQL and the Yahoo! weather APIs to apply different styles to your site depending on the current weather.
- Understanding border-image | CSS-Tricks - Excellent introduction to the non-intuitive border-image property.
25/07/10
Links for June 25th
- Thrust - canvas game - Another Commodore 64 game is brought back to life by the HTML5 Canvas element.
- A Fourth of July lesson in the value of editors « Writing For Digital - Good editing, like good design, is often a difficult thing to sell to corporate decision makers so it always helps to be able to show the direct impact on the bottom line.
- Downloadify: Client-Side File Generation - Neat little library which simplifies client side file generation, would be handy in offline web apps.
20/07/10
Firefox 4.0 Features for Font Fanatics
If you're following the development of CSS3 you may have seen, last June, a proposal from John Daggett of Mozilla to bring advanced typography control to the web. A few months later we saw some experimental Firefox builds which demonstrated the features. The terminology has been through a slight update since then, from font-feature-opentype to font-feature-settings, but last week these experiments finally made their way into the trunk builds of Firefox 4.0 on Windows and Mac.
Even though it doesn't yet work under Linux, I thought it was time to start investigating. In this post I'm going to have a look at what these features can look like, mostly following the examples from the October Mozilla Hacks blog post put using the Calluna Regular font. Then I'll show how to turn them on and off in Firefox with CSS, and find the various features using a font editor.
Open Type Font Features
A font is a collection of glyphs, graphical representations of letters, which are associated with characters. Font features are a scheme for getting alternative glyphs for a given character or sequence of characters. The full list of open type features is available in the spec. Each feature is associated with a four character identifier and can be set to on (1) or off (0), here's an example CSS rule:
.example { font-feature-settings: "dlig=1,tnum=1,ss01=1"; }
In the current Firefox 4.0 nightly builds you can enable support for the features below by setting the gfx.font_rendering.harfbuzz.level preference to 1 in about:config.
Ligatures
Ligatures are special glyphs which replace runs of commonly occurring characters. There are two levels of ligatures, the standard ligatures are turned on by default in Firefox 4.0. To the left is an example in Calluna. The image on the left is from Firefox 3.6, on the right is Firefox 4.0, you can see the slight different where the two characters connect at the top. the combined glyph is also slightly narrower but that's quite hard to stop.
The second example is slightly more obviously different, though with Calluna being a refined font they're still quite subtle. Again it's Firefox 3.6 on the right and 4.0 on the left, the first 'f' is noticeably smaller than the standard one and there's a single bar across both 'f' characters.
There are some ligatures which don't map to commonly occurring sequences of characters (I know fb might not strike you as particularly common, but there are at least 26 just in English). Calluna has two whole sets of arrow glyphs which replace sequences like '-->>' and '-->', more examples to the right.
So in Firefox 4.0, if the font being used supports standard ligatures, you'll see them. If you want to give directions to Firefox users which will appear like random sequences of dashes and greater thans to everyone else you now can. But that's not all! There's also a more decorative set of combinations called discretionary ligatures. Here's some examples, normal on the left, discretionary ligatures on the right:
The point of all this is, of course, that it can all be controlled through CSS. I've constructed an example sentence which could easily occur in conversation at any time and just so happens to contain plenty of words which show off our ligatures. First, let's see what it looks like with everything disabled:
Here's the code to disable the standard ligatures in Firefox 4.0 using -moz-font-feature-settings:
.alloff { -moz-font-feature-settings: "liga=0"; }
The ligature feature is called liga. As I mentioned above, we can set it to 1 to enable (which is the default in Firefox 4.0) and 0 to disable. For comparison let's have a look at the standard Firefox 4.0 rendering:
The CSS for this is straightforward as, of course, there isn't any:
.normal { /* it's normal, no setting required...*/ }
Now let's turn on the discretionary ligatures:
The discretionary ligature feature is called dlig, again it's 1 to enable and 0 to disable:
.allon { -moz-font-feature-settings: "dlig=1"; }
It could be that, for some reason, you want the discretionary ligatures but not the standard ones:
Probably not much point with Calluna, but perhaps with a more decorative typeface this would be useful. You can pass several features to -moz-font-feature-settings in a comma separated list:
.discretionary { -moz-font-feature-settings: "liga=0,dlig=1"; }
How do you go about finding all these ligatures, standard or discretionary? I used FontForge because it was easily installable on my laptop using yum, the interface is a bit archaic but it seems perfectly functional. Here's what it looks like after I've opened up the Calluna font:
On the view menu there's a combinations sub-menu upon which the ligatures option lives:
Now you have a list of ligatures to choose from:
I opened up the 'ffb' ligature:
Now go to the view menu again and look up the Glyph Info option:
In the resulting dialogue you can see that 'ffb' is part of the set of standard ligatures:
If instead I open up the 'sk' glyph you can see this is part of the discretionary ligature set:
Numerals
Now that we've had some fun with ligatures you may be wondering what other cool tricks are hidden inside open type fonts. One very practical feature is different styles of numbers. Quick pop quiz time, which is the highest number in the screenshot below?
Did you guess it was the second one, or did you have to count carefully? Numbers by default are proportionally spaced, which looks nice when they appear in text but can be misleading when looking at tables of figures. But now, thanks to -moz-font-feature-settings, we have some other options:
The numbers are now using tabular alignment - each number glyph is an equal width. Tabular numerals use the tnum feature:
.tabular { -moz-font-feature-settings: "tnum=1"; }
There are a few other number features. The default numbers in Calluna are 'old style' (onum), you can see there's quite a lot of variance caused by the descenders and ascenders going above and below the line. The alternative to that is 'lining figures' (lnum):
As you can see, they give a much more consistent line shape. And you can also have tabular, lining numerals:
.tabular-lining { -moz-font-feature-settings: "lnum=1,tnum=1"; }
Once again you can find all these alternatives in FontForge in the Glyph Info window:
Before we finish up with numbers, two more features are worth mentioning. You can control whether or not the zero is 'slashed' with the zero feature:
The bottom number has -moz-font-feature-settings: "zero=1"; applied. You can also enable fractions with the frac feature setting:
Stylistic Alternatives
There's plenty more stuff in the open type spec, there are 134 different features listed in the spec I linked to in the introduction. The really fancy bits of fonts are often in the twenty 'stylistic sets' ss01 to ss20. You can find what options you may have in FontForge for a particular font by looking for the display substitutions option on the view menu:
You then get a dialogue with a list of the options:
From which you can see that Calluna only has glyphs for one of the stylistic sets, and when you select ss01 you'll see that there's not a lot of (regular) characters in that:
And there's more...
There's plenty of other interesting stuff wrapped up in open type font feature settings, we haven't yet discussed swashes, contextual alternates or historical forms for just three examples, but I'll leave exploring those as an exercise for the reader.
Practical Considerations
It may seem slightly superfluous for me to mention this about a CSS feature which, so far, has only an experimental implementation in just one browser, but it would be unwise to build a site which depended on font-feature-opentype, for example by relying on certain ligatures or stylistic sets to convey information. However, for making your typography look a bit nicer for a subset of your users, this stuff will be usable on real web pages from the day of Firefox 4.0's release.
The Future
Now you're salivating for a future where all web browsers support font-feature-settings this is probably a good time to point out that, once that support exists, you'll hardly ever use it 
No, this is not a trick, font-feature-settings itself is only intended to be used for obscure and little used options in the open font features list, the common stuff will be accessible through new values on the font-variant property as well as several font-variant-* properties. The current level of support in Firefox is really only to see how things will look once all that gets implemented.
Let's have a look at how a future you will be recreating my examples with the proposed font-variant property extensions. First, discretionary ligatures:
.discretionary { font-variant: additional-ligatures; }
Alternatively we cold use the specific ligatures property:
.discretionary { font-variant-ligatures: additional-ligatures; }
Each value has a corresponding no-* version, so you could specify no-common-ligatures to turn off the common ones, or no-additional-ligatures in order to override the above rule further down the inheritance chain. What about lining, tabular numerals?
.tabular-lining { font-variant-numeric: lining-nums tabular-nums; }
None of this is implemented yet, so I can't test I've got it right, and all this syntax is still subject to change as the fonts module is still a working draft, so I'll stop there. Hopefully this has given you some ideas for fancy typography to give Firefox 4.0 users a special treat and will set you off on your own investigations.
18/07/10
Links for July 18th
- No browser supports HTML5 yet. Part 1. The rant. - The first of a great pair of posts on the dangers of claiming 'We have HTML5 support'.
- No browser supports HTML5 yet. Part 2. Technology. - The second part with a couple of good descriptions of what supporting some of the new features, such as forms and section/article, actually means.
- Font Dragr: A drag and drop font tester | The CSS Ninja - Only just came across this neat combination of the drag and drop API and offline storage with @font-face.
- Sedentary behaviors increase risk of cardiovascular disease mortality in men - Even if you exercise every day it does not (according to this study) offset the increased risk of cardiovascular disease engendered by significant time sitting in front of a computer.
- Juicy Studio: Examining WAI-ARIA Document Landmark Roles - Gez's accessibility extension has recently been updated so now you can use it to test, discover and navigate through ARIA landmarks.
- An HTML5 <audio> radio player - Opera Developer Community - Create a radio player in your browser.
11/07/10
Links for July 11th
- CSS Media Queries & Using Available Space | CSS-Tricks - A practical look at using media queries to make the best use of available screen space.
- An InDesign for HTML and CSS? – Jeffrey Zeldman Presents The Daily Report - "Well, there is a reason they absolutely do that with HTML. PostScript is a programming language designed to describe page layouts and text shapes in a world of known, fixed dimensions (the world of print), with no underlying semantics. PostScript doesn’t care whether an element is a paragraph, a headline, or a list item. It doesn’t care if a bit of content on one page cites another bit of content on a different page. PostScript is a visual plotting language. And HTML is anything but."
- A List Apart: Articles: Prefix or Posthack - Vendor prefixes have come in for a lot of flak, but Eric Meyer gives us a timely reminder that the alternatives are far worse.
04/07/10
Links for July 4th
- HTML5 vs Flash Drawing (JavaScript vs ActionScript 3) { William Malone } - Side by side and line by line code comparison of drawing an image.
- Using SVG in background-image | Broken Links - A quick introduction to using SVG as a CSS background image.
- Historypin - Pin your history to the world - Based on Google Maps and StreetView, this web app allows you to attach historical pictures and stories to map locations.
- kanaka's noVNC - GitHub - A VNC client implemented with Web Sockets and the Canvas element, real world desktop equivalents with HTML5 technologies.
30/06/10
Attempting Better Drop Shadows in IE8 - Filters Revisited
I was reading about cssSandpaper today and my curiosity was sparked by this line:
Note that in IE, the blur-radius is not currently not supported, due to a lack of support in IE’s DropShadow filter.
This is true, DropShadow doesn't support blur radius. The alternative Shadow filter does have a blur radius like property, Strength, which "Sets or retrieves the distance, in pixels, that a filter effect extends."
So there are two basic options, both with their own advantages and disadvantages:
- DropShadow - you can use alpha transparent colours and specify separate offsets, but the colour remains solid and sharp edged
- Shadow - you can specify a blur radius type property but you cannot set separate x and y offsets, the colour will fade to transparent but you have no control over it, and the results also remain solid and sharp edged
Basically, drop shadows in IE look like they were designed by developers rather than graphic designers, see for yourself in the example to the right - top is DropShadow, bottom is Shadow, hard edges in both cases.
Many, like myself, have taken the position that this can't be helped, we should be grateful to be able to do drop shadows at all in CSS for IE, and just picked one of the two options and got on with things. However, at least in IE8, there may be some further options which are worth investigating. The following text is on every MSDN filter page:
You can assign multiple filters or transitions to an object by declaring each in the filter property of the object.
And guess what? There is a Blur filter and, if that turns out to be no good, there's also a MotionBlur and a Glow which we may be able to do something with. So my strategy in this post is to apply some of these in combination with DropShadow and Shadow to see if we can get slightly more natural looking CSS drop shadows in Internet Explorer. First, lets remind ourselves what an IE drop shadow looks like:
And here's the code:
<div style="position: relative; height: 30px; filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=6, OffY=4, Color='gray') ">Straight drop shadow example</div>
Let's try adding a blur to that and see what happens:
As you can see, the blur effect applies to the shadow but it also applies to the contents.
<div style="position: relative; height: 30px; filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=6, OffY=4, Color='gray') progid:DXImageTransform.Microsoft.Blur(pixelradius=2)"> 0 Example text, should not have shadow or be blurred.</div>
I wondered if I could wrap the contents in another element and protect it somehow from the filter.
A shadow on an element with a transparent background will produce a text shadow, while a background colour will cause the shadow to apply to the box. So I thought it was worth a try, and I thought I'd trigger hasLayout to be on the safe side:
<div style="height: 30px; filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=6, OffY=4, Color='gray') progid:DXImageTransform.Microsoft.Blur(pixelradius=2)"> <span style="height: 30px; zoom:1; background-color: #fff;"> 1 Example text, should not have shadow or be blurred.</span></div>
Not much joy there, but I did have a bit better luck with the next attempt:
By making the child element absolutely positioned the filters were now ignored on the containing element, of course the containing element is now empty so needs an explicit height to keep it open:
<div style="position: relative; height: 30px; filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=6, OffY=4, Color='gray') progid:DXImageTransform.Microsoft.Blur(pixelradius=2)"> <span style="position: absolute; height: 30px; zoom:1; background-color: #fff;"> 2 Example text, should not have shadow or be blurred.</span></div>
The problem is that the span now pokes out of the containing div, so I tried fitting it more exactly:
Quite a lot of additional markup is now getting tacked on, for really not much aesthetic benefit. Having the absolutely positioned child match the dimensions of the containing div does mean that you can cover up the blurry top and left edges, but the tradeoff is the elements need to have known dimensions.:
<div style="position: relative; height: 30px; filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=6, OffY=4, Color='gray') progid:DXImageTransform.Microsoft.Blur(pixelradius=2)"> <span style="position: absolute; top: 2px; left: 2px; height: 30px; width: 100%; display: inline-block; background-color: #fff;"> 3 Example text, should not have shadow or be blurred.</span></div>
Since the shadow still looks crappy I thought I'd try a few different combinations. Motion blur:
And the code:
<div style="position: relative; height: 30px; filter: progid:DXImageTransform.Microsoft.Dropshadow(OffX=6, OffY=4, Color='gray') progid:DXImageTransform.Microsoft.MotionBlur(direction=135,strength=8,add=true)"> <span style="position: absolute; height: 30px; width: 100%; display: inline-block; background-color: #fff;"> 4 Example text, should not have shadow or be blurred.</span></div>
Glow:
More code:
<div style="position: relative; height: 30px; filter: progid:DXImageTransform.Microsoft.Dropshadow(OffX=6, OffY=4, Color='gray') progid:DXImageTransform.Microsoft.Glow(strength=2,Color='gray')"> <span style="position: absolute; top: 1px; left: 1px; height: 30px; width: 100%; display: inline-block; background-color: #fff;"> 5 Example text, should not have shadow or be blurred.</span></div>
What about just applying multiple drop shadows?
The above image combines four:
<div style="position: relative; height: 30px; filter: progid:DXImageTransform.Microsoft.Dropshadow(OffX=4, OffY=4, Color=#cc999999) progid:DXImageTransform.Microsoft.Dropshadow(OffX=4, OffY=4, Color=#99999999) progid:DXImageTransform.Microsoft.Dropshadow(OffX=4, OffY=4, Color=#66999999) progid:DXImageTransform.Microsoft.Dropshadow(OffX=4, OffY=4, Color=#33999999)"> <span style="position: absolute; height: 30px; width: 100%; display: inline-block; background-color: #fff;"> 6 Example text, should not have shadow or be blurred.</span></div>
Getting a bit far out now, multiple drop shadows and blur:
<div style="position: relative; height: 30px; filter: progid:DXImageTransform.Microsoft.Dropshadow(OffX=4, OffY=4, Color=#cc999999) progid:DXImageTransform.Microsoft.Dropshadow(OffX=4, OffY=4, Color=#99999999) progid:DXImageTransform.Microsoft.Dropshadow(OffX=4, OffY=4, Color=#66999999) progid:DXImageTransform.Microsoft.Dropshadow(OffX=4, OffY=4, Color=#33999999) progid:DXImageTransform.Microsoft.Blur(pixelradius=2)"> <span style="position: absolute; height: 30px; width: 100%; display: inline-block; background-color: #fff;"> 7 Example text, should not have shadow or be blurred.</span></div>
Enough of that, I thought I'd try a few examples with shadow instead of drop shadow:
The basic shadow fades out but, as I mentioned, is sharp edged.
<div style="position: relative; height: 30px; filter: progid:DXImageTransform.Microsoft.Shadow(Direction=135, Strength=5, Color='gray')"> Straight shadow example</div>
Now a shadow with a blur:
<div style="position: relative; height: 30px; filter: progid:DXImageTransform.Microsoft.Shadow(Direction=135, Strength=5, Color='gray') progid:DXImageTransform.Microsoft.Blur(pixelradius=2)"> <span style="position: absolute; top: 2px; left: 2px; height: 30px; width: 100%; display: inline-block; background-color: #fff;"> 3 Example text, should not have shadow or be blurred.</span></div>
A shadow with motion blur:
And with glow:
Yes, they all still look a bit pants.
So it seems like Shadow and Blur in combination may be the best of a bad bunch, and they don't really give you too many advantages: you have to know the dimensions of the element in advance for it to be useful in CSS; you might be able to work a jQuery plugin out of it, but if you're going to rely on scripting you might as well make use of once the image based solutions which result in nicer looking shadows; and finally, all of the above only works in IE8 - IE7 applies all the filters to the contained element whether it's positioned or not. So, wasted effort? Possibly, at least now I know for sure, here's hoping IE9 adds support for box-shadow
XML Feeds
