Pages: 1 2 3 4 5 6 7 8 9 10 11 ... 30 >>

29/08/10

12:35:34 am, by delicious, 75 words, 282 views   English (UK)
Categories: Delicious

Links for August 29th


Tweet this!

22/08/10

12:31:38 am, by delicious, 94 words, 415 views   English (UK)
Categories: Delicious

Links for August 22nd


Tweet this!

15/08/10

11:30:59 pm, by delicious, 231 words, 846 views   English (UK)
Categories: Delicious

Links for August 15th


Tweet this!

08/08/10

01:45:28 am, by delicious, 180 words, 683 views   English (UK)
Categories: Delicious

Links for August 8th


Tweet this!

01/08/10

02:28:09 am, by delicious, 98 words, 530 views   English (UK)
Categories: Delicious

Links for August 1st


Tweet this!

25/07/10

01:20:41 am, by delicious, 85 words, 733 views   English (UK)
Categories: Delicious

Links for June 25th


Tweet this!

20/07/10

03:17:50 pm, by robertc Email , 1518 words, 1872 views   English (UK)
Categories: Standards, HTML and CSS

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

the characters fb with and without standard ligaturesLigatures 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 characters ffb with and without standard ligatures 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.

the characters - /> and ->> with and without standard ligaturesThere 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:

  • ct with and without discretionary ligatures
  • qu with and without discretionary ligatures
  • sh with and without discretionary ligatures

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:

A sample sentence in Calluna with all ligature features turned off

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:

A sample sentence in Calluna with default ligature features

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:

A sample sentence in Calluna with all ligature features turned on

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:

A sample sentence in Calluna with just discretionary ligature features turned on

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:

Calluna in FontForge

On the view menu there's a combinations sub-menu upon which the ligatures option lives:

FontForge selecting ligatures from the Combinations sub-menu of the View menu

Now you have a list of ligatures to choose from:

FontForge ligatures window

I opened up the 'ffb' ligature:

Calluna f_f_b glyph in FontForge

Now go to the view menu again and look up the Glyph Info option:

FontForge selecting Glyph Info from the Element menu

In the resulting dialogue you can see that 'ffb' is part of the set of standard ligatures:

Calluna in FontForge, Glyph Info for f_f_b

If instead I open up the 'sk' glyph you can see this is part of the discretionary ligature set:

Calluna in FontForge, Glyph Info for s_k

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?

Numbers in Calluna, default settings

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:

Numbers in Calluna, tabular figures

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):

Numbers in Calluna, lining figures

As you can see, they give a much more consistent line shape. And you can also have tabular, lining numerals:

Numbers in Calluna, tabular lining figures

.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:

Calluna in FontForge, Glyph info window for 1

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:

Calluna in FontForge

The bottom number has -moz-font-feature-settings: "zero=1"; applied. You can also enable fractions with the frac feature setting:

Calluna in FontForge

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:

Selecting the view menu in FontForge

You then get a dialogue with a list of the options:

FontForge substitutions dialogoue

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:

Calluna stylstic set 01 in FontForge

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.


Tweet this!

18/07/10

12:23:17 am, by delicious, 174 words, 945 views   English (UK)
Categories: Delicious

Links for July 18th


Tweet this!

11/07/10

12:57:37 am, by delicious, 156 words, 810 views   English (UK)
Categories: Delicious

Links for July 11th


Tweet this!

04/07/10

01:30:33 am, by delicious, 91 words, 1879 views   English (UK)
Categories: Delicious

Links for July 4th


Tweet this!

30/06/10

11:21:02 pm, by robertc Email , 1058 words, 1397 views   English (UK)
Categories: Front End Web Development

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."

Example of both the DropShadow and Shadow filter in action

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:

DropShadow by itself

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:

DropShadow and blur in combination

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.

DropShadow and blur in combination, text in a child element

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:

DropShadow and blur in combination, text in absolutely positioned element

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:

DropShadow and Blur in combination, text in offset absolutely positioned element

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:

DropShadow and Motion Blur in combination, text in absolutely positioned element

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:

DropShadow and Glow in combination, text in absolutely positioned element

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?

Multiple alpha transparent DropShadows

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:

Multiple DropShadows with 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:

Shadow by itself

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:

Shadow by itself

<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:

Shadow with Motion Blur

And with glow:

Shadow 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 :)


Tweet this!

1 2 3 4 5 6 7 8 9 10 11 ... 30 >>