Fonts and the Web

Here at InterKnowlogy, we get time each week to tinker and dive into technologies that interest and inspire us. We call it RECESS, which stands for Research and Experimental Coding to Enhance Software Skills. This week I’ve been noticing sites ‘sprucing it up’ by using custom font embedding with services such as TypeKit (Or similarly related projects such as Google Web Fonts) that allow you to license and use custom fonts in a site.

There’s a problem though. 90% of the time it annoys me.

Let me explain. First impressions are everything, and right after first impressions is readability. If I come to your site looking for information, to read something, I don’t want to get a headache doing so. The problem isn’t the design or the font itself usually, it’s the way the browser deals with and renders the font. Using a custom or weird font for the body text of the page WILL bother people. Its why standard fonts exist and are as popular as they are: readability. Now, that being said, there are really good design reasons to want to use custom fonts in a dynamic content driven site to augment the design. Especially in the title and headers since it will catch someones eye and because people spend a minimal amount of time reading them anyways. Whatever the reason, if your going to go down the custom font path its going to be important to refine and choose a solution that is going to be consistent and usable for the people that visit your site.

Coming back to RECESS, I spent some time examining the different offerings and essentially broke them into two categories: Browser/OS rendered text, and Image rendered text. Let me explain: For the Browser/OS rendered text (which TypeKit and Google Web Fonts use) the text is set using normal CSS rules, and then an actual font file is loaded by the browser and used to display the text. Almost exactly how text is displayed for application on your computer except that the font is never ‘installed’. The advantage is that it behaves exactly like normal fonts, you can type, select, copy, and do all the normal things you do with text. The second way is imaged rendered text, taking some chunk of text and turning it into an image that gets displayed in place of the text. Designers sometimes do this for logos and main headers that almost never change because it doesn’t require the use of a more modern browser and they KNOW that it will display the same way. Also in this category is a tool called Cufón. It’s a bit of JavaScript and a bit of a generator. It basically takes a font file, turns it into a bunch of shapes, and then on the users computer it uses JavaScript to load, render, and replace text in the page with those images. The disadvantage being you can’t select and copy the text in the same way, but the advantage is that it looks consistent and renders well.

I decided to tinker with these and see what I came up with (All screenshots are on Windows 7, the IE9 ‘font’ example is invalid as I would have had to convert it to a different format for it to display, but I was lazy. There is another example later that illustrates IE9 correctly showing a font this way.)

So here are some screenshots of the results on different browsers on Windows 7:

Chrome 12:

Firefox 6:

Safari 5.1 on Windows

Internet Explorer 9

I was surprised at the results. Same font, same file, but completely different results between Chrome / Firefox / Safari (IE9 excluded obviously) for the regular font rendering. Cufón came out the most consistent of all of these.

Next I went to TypeKit and found excellent illustrations of why embedding fonts is still so difficult and why I’m seriously considering using Cufón for the time being:

From top to bottom, Safari 5.1, Chrome 12, Firefox 6, IE9

The big thing to note is how jagged the letters look until you get to IE9. Readability wise, I would NOT consider using an alternate font for a large amount of text unless I had to, and for right now, Cufón seems a very viable choice for consistency.

There’s no final conclusion in this, since you will have reasons that will drive you to one option or another (Or simply throw your hands in the air and announce to the world that you are done with the web forever) So:

Nerd out.

Tinker.

Be careful with your font choices and how far you take this on a site that will be used on a regular basis. Cheers!

Native Glass Windows with WPF in Windows 7 / Vista

One of the awesome benefits of working at InterKnowlogy is that we get time to do what we call RECESS: Research and Experimental Coding to Enhance Software Skills. It’s a 4 hour time span where we can work on interesting technologies to enhance, grow, and keep up on the latest technologies and methodologies. It keeps us sharp, interested, and many of our demos have come from these short code jams.

Over the past few weeks I’ve wanted to figure out how to add or extend glass into my application like you see in Word (2010 preview):

Glass

As you can see, the whole title bar area is seamlessly integrated into the look and feel of windows, it feels native, its got that cool semi-transparent blur-the-background effect and everything. So come RECESS I did some research and pieced together what you’d need to get an effect like this.

DesktopWindowManagerAPI.cs
  1.  
  2. using System.Runtime.InteropServices;
  3. using System.Windows;
  4. using System.Windows.Interop;
  5. using System.Windows.Media;
  6. using Codelogic.Windows.Native.APIManagedExceptions;
  7.  
  8. namespace Codelogic.Windows.Native
  9. {
  10. public static class DesktopWindowManagerAPI
  11. {
  12. public static void AllGlassWindow(this Window window)
  13. {
  14. ExtendFrameIntoClientArea(window, new Thickness(-1), false);
  15. }
  16.  
  17. public static void ExtendFrameIntoClientArea(Window window, Thickness thickness)
  18. {
  19. ExtendFrameIntoClientArea(window, thickness, false);
  20. }
  21.  
  22. public static void ExtendFrameIntoClientArea(Window window, Thickness thickness, bool exceptionOnFail)
  23. {
  24. var compEnabled = IsCompositionEnabled();
  25. if (exceptionOnFail && !compEnabled)
  26. throw new DWMNotEnabledException();
  27.  
  28. if (exceptionOnFail && !window.IsInitialized)
  29. throw new WindowNotLoadedException();
  30.  
  31. if (!compEnabled) return;
  32.  
  33. var margins = thickness.ToDWMMargins();
  34. var windowPointer = new WindowInteropHelper(window).Handle;
  35.  
  36. //convert the background to nondrawing
  37. var mainWindowHwnd = HwndSource.FromHwnd(windowPointer);
  38. if (mainWindowHwnd != null)
  39. mainWindowHwnd.CompositionTarget.BackgroundColor = Color.FromArgb(0, 0, 0, 0);
  40.  
  41. try
  42. {
  43. DwmExtendFrameIntoClientArea(windowPointer, ref margins);
  44. }
  45. catch (DllNotFoundException)
  46. {
  47. window.Background = Brushes.White;
  48. }
  49. }
  50.  
  51. public static bool IsCompositionEnabled()
  52. {
  53. try
  54. {
  55. return DwmIsCompositionEnabled();
  56. }
  57. catch (DllNotFoundException)
  58. {
  59. return false;
  60. }
  61. }
  62.  
  63. #region WPF to Native
  64.  
  65. private static DWMMargins ToDWMMargins(this Thickness t)
  66. {
  67. var rtrn = new DWMMargins();
  68.  
  69. rtrn.Top = (int)t.Top;
  70. rtrn.Bottom = (int)t.Bottom;
  71. rtrn.Left = (int)t.Left;
  72. rtrn.Right = (int)t.Right;
  73.  
  74. return rtrn;
  75. }
  76.  
  77. #endregion
  78.  
  79. #region Native Interop
  80.  
  81. [StructLayout(LayoutKind.Sequential)]
  82. private struct DWMMargins
  83. {
  84. public int Left;
  85. public int Right;
  86. public int Top;
  87. public int Bottom;
  88. }
  89.  
  90. /// <summary>
  91. /// Extends an hwind's frame into the client area by the specified margins.
  92. /// </summary>
  93. /// <param name="hwnd">Integer pointer to the window to change the glass area on.</param>
  94. /// <param name="margins">Margins, what to set each side to</param>
  95. [DllImport("dwmapi.dll", PreserveSig = false)]
  96. private static extern void DwmExtendFrameIntoClientArea(IntPtr hwnd, ref DWMMargins margins);
  97.  
  98. /// <summary>
  99. /// Checks to see if the Desktop window manager is enabled.
  100. /// </summary>
  101. [DllImport("dwmapi.dll", PreserveSig = false)]
  102. private static extern bool DwmIsCompositionEnabled();
  103.  
  104. #endregion
  105. }
  106. }
  107.  

Alright, lets begin breaking this down.

DesktopWindowManagerAPI.cs
  1.  
  2. [StructLayout(LayoutKind.Sequential)]
  3. private struct DWMMargins
  4. {
  5. public int Left;
  6. public int Right;
  7. public int Top;
  8. public int Bottom;
  9. }
  10.  
  11. [DllImport("dwmapi.dll", PreserveSig = false)]
  12. private static extern void DwmExtendFrameIntoClientArea(IntPtr hwnd, ref DWMMargins margins);
  13.  
  14. [DllImport("dwmapi.dll", PreserveSig = false)]
  15. private static extern bool DwmIsCompositionEnabled();
  16.  

First, Windows 7 and Vista provide us with the Desktop Window Manager which was first included in Vista and continues on into Windows 7, it manages all the cool graphical windowing and effects you see in those operating systems. It also gives us an API dll to access these all the features, including many that are unavailable in WPF.

The first declaration you see sets up the data type that the DLL uses internally to represent Left, Right, Top, and Bottom glass margins. The others are pointers to unmanaged (non .NET) methods in the DLL. DwmExtendFrameIntoClientArea is the method that allows me to adjust how far in the glass extends in to the client drawable area, and DwmIsCompositionEnabled tells me if Aero Glass is enabled.

DesktopWindowManagerAPI.cs
  1.  
  2. private static DWMMargins ToDWMMargins(this Thickness t)
  3. {
  4. var rtrn = new DWMMargins();
  5.  
  6. rtrn.Top = (int)t.Top;
  7. rtrn.Bottom = (int)t.Bottom;
  8. rtrn.Left = (int)t.Left;
  9. rtrn.Right = (int)t.Right;
  10.  
  11. return rtrn;
  12. }
  13.  

A simple extension method (denoted by the ‘this’ in front of the Thickness t, it allows me to write the declaration as though the method were part of the Thickness class, so if I have a thickness variable thick I could convert it to a DWMMargins type by writing var margins = thick.ToDWMMargins();) it converts a WPF Thickness object to the internal DWMMargins struct.

DesktopWindowManagerAPI.cs
  1.  
  2. public static void ExtendFrameIntoClientArea(this Window window, Thickness thickness)
  3. {
  4. ExtendFrameIntoClientArea(window, thickness, false);
  5. }
  6.  
  7. public static void ExtendFrameIntoClientArea(this Window window, Thickness thickness, bool exceptionOnFail)
  8. {
  9. var compEnabled = IsCompositionEnabled();
  10. if (exceptionOnFail && !compEnabled)
  11. throw new DWMNotEnabledException();
  12.  
  13. if (exceptionOnFail && !window.IsInitialized)
  14. throw new WindowNotLoadedException();
  15.  
  16. if (!compEnabled) return;
  17.  
  18. var margins = thickness.ToDWMMargins();
  19. var windowPointer = new WindowInteropHelper(window).Handle;
  20.  
  21. //convert the background to nondrawing
  22. var mainWindowHwnd = HwndSource.FromHwnd(windowPointer);
  23. if (mainWindowHwnd != null)
  24. mainWindowHwnd.CompositionTarget.BackgroundColor = Color.FromArgb(0, 0, 0, 0);
  25.  
  26. try
  27. {
  28. DwmExtendFrameIntoClientArea(windowPointer, ref margins);
  29. }
  30. catch (DllNotFoundException)
  31. {
  32. window.Background = Brushes.White;
  33. }
  34. }
  35.  
  36. public static bool IsCompositionEnabled()
  37. {
  38. try
  39. {
  40. return DwmIsCompositionEnabled();
  41. }
  42. catch (DllNotFoundException)
  43. {
  44. return false;
  45. }
  46. }
  47.  

Finally I wrapped native methods with .NET versions that take a more useful WPF Window class and WPF Thickness class for the ExtendFrameIntoClientArea method. Internally it checks to make sure the window is initialized and that Desktop Composition is enabled, gets the integer pointer to the window, resets the background, and then calls the native method to extend the glass into the drawable (client) area of the window. Two custom classes not shown are the DWMNotEnabledException class and the WindowNotLoadedException class, which are thrown if something goes wrong.

That’s all well and good, but wouldn’t it be nice if we didn’t have to worry about all these calls to this custom DesktopWindowManagerAPI class and could just set how much we wanted the glass to extend into the client area? Or bind it to something so that the glass area expands or contracts when a value changes?

I thought so:

GlassWindow.cs
  1.  
  2. using System.Windows;
  3. using Codelogic.Windows.Native;
  4.  
  5. namespace Codelogic.Controls.WPF
  6. {
  7. public class GlassWindow : Window
  8. {
  9. #region Glass Thickness Dependency Property
  10.  
  11. public static readonly DependencyProperty GlassThicknessProperty = DependencyProperty.Register(
  12. "GlassThickness", typeof(Thickness), typeof(GlassWindow), new PropertyMetadata(new Thickness(0, 0, 0, 0), GlassThicknessChanged));
  13.  
  14. //when the thickness changes, apply the change to the window.
  15. private static void GlassThicknessChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
  16. {
  17. ((GlassWindow)d).UpdateGlassState();
  18.  
  19. }
  20.  
  21. /// <summary>
  22. /// Local property for Glass thickness.
  23. /// </summary>
  24. public Thickness GlassThickness
  25. {
  26. get { return (Thickness)GetValue(GlassThicknessProperty); }
  27. set { SetValue(GlassThicknessProperty, value); }
  28. }
  29.  
  30. public static readonly DependencyProperty IsAllGlassProperty = DependencyProperty.Register("IsAllGlass",
  31. typeof(bool),
  32. typeof(GlassWindow),
  33. new PropertyMetadata(
  34. OnIsAllGlassChanged));
  35.  
  36. private static void OnIsAllGlassChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
  37. {
  38. ((GlassWindow)d).UpdateGlassState();
  39. }
  40.  
  41. public bool IsAllGlass
  42. {
  43. get { return (bool)GetValue(IsAllGlassProperty); }
  44. set { SetValue(IsAllGlassProperty, value); }
  45. }
  46.  
  47. private void UpdateGlassState()
  48. {
  49. if (!IsInitialized) return;
  50.  
  51. if (IsAllGlass)
  52. this.AllGlassWindow();
  53. else
  54. this.ExtendFrameIntoClientArea(GlassThickness);
  55. }
  56.  
  57. static GlassWindow()
  58. {
  59. DefaultStyleKeyProperty.OverrideMetadata(typeof(GlassWindow), new FrameworkPropertyMetadata(typeof(GlassWindow)));
  60. }
  61.  
  62. protected override void OnSourceInitialized(EventArgs e)
  63. {
  64. base.OnSourceInitialized(e);
  65. UpdateGlassState();
  66. }
  67. }
  68. }
  69.  

Alright, this class creates a WPF Window subclass, adds a dependency property for GlassThickness and a change handler that internally calls the DesktopWindowManagerAPI.ExtendFrameIntoClientArea if the window is loaded or attaches an event handler if the window is not loaded. Now all you have to do is change your window class over to a GlassWindow class, set the thickness and you rock and roll!

GlassDemoWindow.cs
  1.  
  2. <WPF:GlassWindow x:Class="Codelogic.Controls.WPF.Demo.GlassDemoWindow"
  3. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  4. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  5. xmlns:WPF="clr-namespace:Codelogic.Controls.WPF;assembly=Codelogic.Controls.WPF"
  6. Title="Glass Window Demo"
  7. Height="300"
  8. Width="300"
  9. GlassThickness="10000">
  10. <Grid>
  11. <InkCanvas HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Transparent" />
  12. </Grid>
  13. </WPF:GlassWindow>
  14.  

Glass Ink

Something I have not yet done that I would like to do is figure out how to add functional buttons into the title-bar of an application. If you remember the Microsoft Word snippet from above there’s save / undo / redo buttons in the title bar. But that will have to be a later post.

Hope someone enjoyed my Glassy exploration,

Updates:

  • 2 Dec 2009
    • Changed ExtendFrameIntoClientArea to check to see if window.IsInitialized instead of window.IsLoaded
    • Updated GlassWindow to override OnSourceInitialized instead of adding an event handler for Loaded
    • Added in a method that turns the entire client area into glass by setting the margins to -1.
    • Changed Glass Window to have a Boolean Dependency property to turn it all glass.

– Paul Rohde

What I do at Interknowlogy

I get asked this question a lot:

“So, what exactly do you do at your job?

The most common answer is usually me fumbling through what a surface is, multi-touch, and ending with something about consulting, cool projects, and NDA agreements. They say a picture is worth a thousand words.┬áSo, since a video is between 30-60 frames per second, that’s gotta be about a book right there, so I figured I’d give you a taste of what I do at my main full time job.

http://www.interknowlogy.com

A bit of background on the demo; You may remember this post about building a really simple P2P network, and is the foundation of what we were eventually building out here. The framework itself is built out into three distinct layers, each independent of each other and interchangeable. For instance, the demo here is showing a P2P network layer, which is very nice for small demos because there is very little configuration required. However, because this layer is independent of the others it would be trivial to write an enterprise level sever based implementation that could be used to conduct sessions anywhere in the world.

The second layer is the framework that we’ve built up to handle the logic of managing a remote session, adding / removing remotable objects, synchronization, passing through commands, and routing commands from the network up to the individual remotable objects. The final layer is the remoting piece individual controls. It’s a layer of logic that is attached onto existing controls. The cool factor of the way this is built is it allows for a huge degree of flexibility at a control level if you need it, but also the power of being able to drop in a few lines of code and have objects magically start controlling and presenting.

Hope you enjoyed it, and let me know what you think!

– Paul Rohde