Anti-aliased fonts, Rounded Corners in IE and the Implications for SharePoint

That’s one mouthful of a title. I’ve lately been revisiting the Career Centre website and thought this one would be worthy of a post. It works on two fronts; firstly as an introduction to a couple of useful libraries which can add that extra bit of flavour to your websites and secondly as a warning or solution to a strange issue they cause in SharePoint. I haven’t tested them in SP2010 as yet so for now I can only describe the issue as I’ve seen it, in MOSS 2007.

Anti-aliased fonts

One of my pet hates when creating public facing sites from image files provided by a design company has always been fonts. It has always seemed a case of having to revert to an uglier looking font on the page or using an image sliced from the design. The problem is to do with the anti-aliasing effect image software such as Photoshop applies to the fonts in the image which isn’t replicated when using the font in a web browser. The image below outlines the difference.

Another limitation of browser-based fonts is being limited to that which is installed on the client machine. It’s all good and well defining your font to be a custom masterpiece and viewing it on your own desktop, however your regular punter who encounters your site will not witness the same experience.

Enter Cufon – a font generator and JavaScript rendering engine which will allow you to display the text within the browser how it was meant to be seen. Below is an example of the navigation on the Career Centre site; before and after Cufon.

The code to achieve this effect is pretty easy, something along the lines of:

<script type="text/javascript" src="cufon-yui.js"></script>
<script type="text/javascript" src="my.font.js"></script>

<script type="text/javascript">

I’m undecided if I really like the concept. I’m more of a purist and not sure if I like the performance hit and reliance on JavaScript – however you can’t argue with the results. Visually, it’s impressive.

Rounded corners in IE

Another feature which is harnessed across the Career Centre website is rounded corners driven by CSS. Previously if this had needed to be achieved I would have expected to have to use rounded corner images or an image background. These days with the advancement in browsers it can largely be achieved via CSS.

The newer versions of the major browsers all implement the border-radius tag to achieve this. Note however that IE9 needs the following meta tag to be included:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Older versions of FireFox, Chrome, Safari and Opera used proprietary prefixes like the ones below to achieve the same effect.

-moz-border-radius: 9px;
-webkit-border-radius: 9px;
-o-border-radius: 9px;

As usual however, older versions of IE fail to play nicely. This is where PIE comes in to play. PIE stands for Progressive Internet Explorer and assists in implementing CSS3 features for older versions of IE. There is a JavaScript version, however the version used for the Career Centre is an .htc file and CSS definitions which look like that represented below:

behavior: url(/_layouts/myfolder/;

This is another feature that i’m yet to be sold on – again there is an obvious trade-off between performance and visual excellence. To read a little further on this topic check out Jamy Golden’s post on IE and rounded corners.

Implications for SharePoint

So where does SharePoint come into this you ask? I’ve recently been investigating an issue related to a popup message that comes up every time you click into the editing zones in IE – “One or more URLs were not valid and have been reformatted. Review the links before leaving this page.” as seen below.

It was even more strange considering there was no content in the editing zone. My first cynical instinct was to blame the new foreign features that had been introduced to the site and ironically enough that was precisely the case. Turns out that if I removed the offending JavaScript calls to Cufon and behavior attributes in the CSS file, the message wouldn’t appear.

So is the choice a visually impressive public facing website or an interrupted editing experience? Not exactly. The trick here is to make use of SharePoint’s EditModePanel control.

<PublishingWebControls:EditModePanel runat="server" PageDisplayMode="Edit">

By enclosing the offending JavaScript calls in the EditModePanel and seperating the behavior attributes into a seperate CSS file and referencing that in the control, you can manage to get the best of both worlds.

One last thing that needs to be considered regarding SharePoint and these features is that if you’re using

<meta http-equiv="X-UA-Compatible" content="IE=edge">

as pointed out earlier and want to edit content in IE8 standards mode, it’s quite possible you might run into problems – we did anyway. You can read a little bit about it via Randy Drisgill’s post Problems with IE8 Standards Mode, SharePoint Menus, and DocTypes. The solution here made use of the EditModePanel as well and went something along the lines of:

<PublishingWebControls:EditModePanel runat="server" PageDisplayMode="Display">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
<PublishingWebControls:EditModePanel runat="server" PageDisplayMode="Edit">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

4 Responses to Anti-aliased fonts, Rounded Corners in IE and the Implications for SharePoint

  1. ernst says:

    Very nice blogpost.

    Could you please elaborate on:
    “By enclosing the offending JavaScript calls in the EditModePanel and seperating the behavior attributes into a seperate CSS file and referencing that in the control, you can manage to get the best of both worlds.”

    I’m not quite sure what you mean by that…

    • Matt says:

      Hey ernst

      Sure no worries. Basically on the masterpage you may have a reference to your style.css file in the head and a script block with your Cufon calls (Cufon.replace(), towards the end above your closing body tag.

      The Cufon calls are the easy part, you’d simply need to wrap them in the EditModePanel control on your master page.

      <PublishingWebControls:EditModePanel runat=”server” PageDisplayMode=”Edit”>
      <script type=”text/javascript”>

      The CSS is a little trickier. Your definition may look something like this:

      .class {
      -moz-border-radius: 9px;
      -webkit-border-radius: 9px;
      -o-border-radius: 9px;
      border-radius: 9px;
      behavior: url(/_layouts/myfolder/;

      Essentially what I was proposing was to remove the behavior attribute from your definitions in style.css, create a new file (say cufon.css) and enter in all your definitions with the behavior attribute.

      .class {
      behavior: url(/_layouts/myfolder/;

      Then after referencing your style.css spreadsheet, reference your cufon.css stylesheet within the EditModePanel blocks

      <PublishingWebControls:EditModePanel runat=”server” PageDisplayMode=”Edit”>
      <link rel=”stylesheet” href=”/_layouts/myfolder/CSS/cufon.css” type=”text/css” />

      Hope that helps!

  2. ernst says:

    Great! Thanks for the reply, appreciate it!

  3. Olda says:

    The picture
    is wrong. Both versions are anti-aliased!
    Look at this:

    or this

    or this

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: