Updated Blog Theme

I was inspired to do a bit of updating on my blog’s theme. Nothing fancy, just got rid of the “grays” (or “greys”). Grabbed my “image” from my Xbox live account … and …

image

You may now return to your regularly scheduled blog reading. 

PostBox Tweaks

So that I don’t forget how to tweak PostBox again, I’m posting a few custom configuration settings not available in Tools/Options directly that I find useful.

If you don’t want to see the somewhat annoying status and progress dialog in Postbox (or Mozilla Thunderbird) anymore, there’s a change you can make to hide the status window (dialog) entirely.

Sending Messages, Status, Progress

image

Open the Advanced Configuration Config Editor option found in Tools/Options/Advanced/General:

config editor

When you open the Configuration Editor, you’ll be shown a warning by default:

this might void your warranty

As it suggests, be careful when you make these low level settings changes. Preferences that have changed from the default are shown in bold (preferences could have been changed by a variety of mechanisms, so don’t panic when you see lots of non-default preferences).

Here’s how to hide the Sending Messages status window and instead show the status at the bottom of the message being sent (in the status bar). Using the configuration editor, change mailnews.show_send_progress to false. To quickly find the setting, type “show_send_p” in the filter:

image

Then, double-click on the row to toggle the Value from the default true to false.

If you want Postbox’s (or Thunderbird’s) delete message behavior to more closely match Microsoft Outlook’s, you may want to make this other change. Using the same technique as above to make a custom configuration edit, set the following preference to false.

mail.delete_matches_sort_order

When this is set, pressing the Delete key will not move to the next message (down) in the list. It will stay in place.

If you don’t use PostBox, give it a shot here and save 25% off the price!

I bought a family license + lifetime upgrades (back when they had the family-pack option). I’m still happy with the purchase.

Silverlight vs. Flash vs. Photoshop Text Rendering

Curious about text rendering characteristics between Flash 10, Silverlight 4.0 and Photoshop, I created two small applications, one in Flash CS 4, and one in Visual Studio 2010. The Silverlight 4.0 tests are using the release candidate which was current as of March 23, 2010.

I used Times New Roman in all of the tests and used full text justification in all of the examples.

There are two types of text rendering available in Silverlight, Animated and ClearType (the default).

(You may click on images to see full size versions in a new window – I did that so that it would be easy for you to move the images around and do your own side-by-side comparisons).

image

Flash 10 has similar offerings, with an Anti-alias for readability and anti-alias for animation option:

 image

Side by side using the animated mode:

image

Then, the options for “readability” or the default compared side-by-side. (Note that I flipped the apps around so they’d layer correctly below)

image

To my eye, I preferred the Flash Anti-alias for Readability option just slightly over the other options. The animation friendly options left the text feeling too soft for me. What I didn’t like about the Silverlight ClearType option was the darkness of the font overall.

Zoomed in (with Silverlight on the top). You’ll see how the Silverlight text uses darker strokes overall.

 image

The levels of the “anti-alias for readability” text:

image

Whereas the levels of the Silverlight ClearType option:

image

Interesting difference.

I next tweaked the foreground color of the text in the Silverlight ClearType example, deciding that the black was too black for comfortable on screen reading.

I set the foreground of the text to #3d3d3d (click image to enlarge).

TweakSideBySide

Very close. So close that I’m not sure that I could distinguish between the two renderings without detailed study. The lightening of the foreground color made the text look a bit softer than the original, but not so far as to make the text blurry.

If you were wondering what the appearance of the text would be when aliased, here’s Photoshop’s rendering (I’m warning you … you wont’ like it!):

None

Below, you can see how the bowl of the letter ‘a’ in Flash 10 and the area along the meanline are nearly disconnected from the stem. This general lightness appears throughout Flash’s rendering of Times New Roman.

 image

Since my original inspiration was to determine how to make text look as sharp as possible when using Silverlight, I wanted to see what I liked best from what was available readily on my Windows 7 PC. I used:

  1. Chrome
  2. Firefox
  3. Flash (CS4 / 10.0)
  4. Internet Explorer 8
  5. Internet Explorer 9 Preview (March 2010)
  6. Adobe Illustrator CS4
  7. Adobe Photoshop CS5
  8. Safari
  9. Silverlight 4 (RC)

For a text-rendering side by side comparison, I put the block of text next to the text from Photoshop Crisp, Silverlight, and Flash.

Chrome

 Firefox

 FlashAnimation

 FlashReadability

 IE8

 IE9

 IllustratorCS4

PhotoshopNone

 PhotoshopCrisp

 PhotoshopSharp

 PhotoshopSmooth

 Safari

 SafariBestForLCD

 SilverlightAnimation

 SilverlightCleartype

 SilverlightCleartypeGray

 Word2007

Going further, I’ve created zoomed images of the lowercase letter “a” from the sources mentioned above. I’m amazed how differently an anti-aliased “a” can be when different companies all approach the problem with unique algorithms.

Chrome

Chrome

Firefox

Firefox

Flash Animation

 FlashAnimation

Flash Readability

FlashReadability

Internet Explorer 8

IE8

Internet Explorer 9

IE9

Adobe Illustrator CS 4

Illustrator

Photoshop (No Anti-alias option selected)

 PhotoshopNone

Photoshop Crisp

PhotoshopCrisp

Photoshop Sharp

 PhotoshopSharp

Photoshop Smooth

 PhotoshopSmooth

Safari (Default)

 Safari

Safari (Best for LCD)

 SafariBestForLCD

Silverlight Animation

SilverlightAnimation

Silverlight ClearType Default

SilverlightClearTypeDefault

Silverlight ClearType (Lightened)

silverlight-cleartype-gray

Microsoft Word 2007

Word

What’s your preference? Hope you found this useful.

(If you’re wondering how I created full-text-justification in Silverlight, I’ll provide the solution in a follow-on post).

My first Windows Phone 7 Experiment

OK, It doesn’t look like much. It’s not. I was experimenting with some CompositionTarget Rendering and WriteableBitmap stuff on the plane ride out to Mix 2010 on Sunday and created a little animating blue line thing. (I don’t know what to to call it). But it was a work in progress.

I took the code and copied it into a Windows Phone 7 Silverlight application and hit run. It worked right out of the box. (Using the CTP download from here).

image

CompositionTarget.Rendering += new EventHandler(CompositionTarget_Rendering);

The event:

void CompositionTarget_Rendering(object sender, EventArgs e)
{
    int indx = _shapes.Count - 1;
    double littleCircleHeight = littleCircle.ActualHeight;

    while (indx >= 0)
    {
        Sparkle sparkle = _shapes[indx];
        sparkle.Y += sparkle.VY;
        sparkle.X += sparkle.VX;
        if (sparkle.Y - (littleCircleHeight / 2) > _rect.Height)
        {
            _shapes.RemoveAt(indx);
        }
        else
        {
            // grab the cached one
            TranslateTransform t = sparkle.Transform as TranslateTransform;
            t.X = sparkle.X - (littleCircle.ActualWidth / 2);
            t.Y = sparkle.Y - (littleCircleHeight / 2);
            _bitmap.Render(littleCircle, sparkle.Transform);
        }
        indx--;

    }

    int x = _random.Next(_bitmap.PixelWidth);
    int y = 0; 

    Sparkle newsparkle = new Sparkle();
    newsparkle.X = x;
    newsparkle.Y = y;
    newsparkle.VX = _random.NextDouble() + .001;
    newsparkle.VX = (_random.Next(10) > 5 ? newsparkle.VX : newsparkle.VX * -1.0);
    newsparkle.VY = _random.NextDouble() * 5 + 1.0;
    newsparkle.Transform = new TranslateTransform() { Y = newsparkle.Y, X = newsparkle.X };

    _shapes.Add(newsparkle);
    _bitmap.Invalidate();
}

Sizing:

void MainPage_SizeChanged(object sender, SizeChangedEventArgs e)
{
    _bitmap = new WriteableBitmap((int)e.NewSize.Width, (int)e.NewSize.Height);
    _bitmap.Clear(Colors.Black);
    _rect = new Rect(0, 0, e.NewSize.Width, e.NewSize.Height);
    dest.Source = _bitmap;
}

The sparkle class:

public class Sparkle
{
    public double X { get; set; }
    public double Y { get; set; }

    public double VX { get; set; }
    public double VY { get; set; }

    public Transform Transform { get; set; }
}

And it also uses a few functions from the WriteableBitmap extension classes on CodePlex.

It doesn’t perform nearly as well as it does in stand-alone Silverlight – but it’s running in a VM on my laptop, without accelerated graphics ….. I blame my hardware.