Silverlight TextBlock and Asian Fonts

 In addition to using the Glyph to render Asian Fonts in your Silverlight Applications, you can also use the TextBlock if you download and set the font using a downloader object. Please note that you'll need permission to distribute any font you use with your application.

Here's an example of XAML containing a TextBlock with Chinese Text:

<Canvas
xmlns="https://schemas.microsoft.com/client/2007"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
Width="640" Height="480"
Background="White">
<TextBlock x:Name="myTextBlock" Width="152" Height="64"  

        Canvas.Left="184" Canvas.Top="56" Text="你好, 你好吗？"

        TextWrapping="Wrap" MouseLeftButtonDown="HandleIt" />
</Canvas>

 

When you run this, you'll see square blocks on the screen instead of the Chinese text. It will look something like this:

 

You'll see I have a 'MouseLeftButtonDown' event wired up to the TextBlock. This will call the following JavaScript event handler

 

// Event handler for initializing and executing a font file download request.
function HandleIt(sender, eventArgs)
{
// Retrieve a reference to the control.
var control = sender.getHost();

// Create a Downloader object.
var downloader = control.createObject("downloader");

// Add Completed event.
downloader.addEventListener("Completed", "onCompleted");

// Initialize the Downloader request.
downloader.open("GET", "SIMHEI.TTF", true);

// Execute the Downloader request.
downloader.send();
}

 

This creates a downloader object that downloads the SIMHEI.TTF font from the server. Note that this font is not freely distributable. For your applications you must use a font that you can legally distribute to your clients.

It sets up a callback called 'Completed' to call when the download is complete:

 

// Event handler for the Completed event.
function onCompleted(sender, eventArgs)
{
// Retrieve the TextBlock object.
var myTextBlock = sender.findName("myTextBlock");

// Add the font files in the downloaded object to the TextBlock's type face collection.
myTextBlock.setFontSource(sender);

// Set the FontFamily property to the friendly name of the font.
myTextBlock.fontFamily = "Simhei" ;

}

Now that we have the font file, we can set its font source to the downloader object, and pull the SimHei font family out of it. The text will then be correctly rendered.

And as you can see the font is now correctly rendered.

Depending on the language that you use, there are a number of fonts that are potentially freely redistributably. Check with your font vendors, but using this (or the Glyphs technique) can internationalize your Silverlight applications.

Comments

• Anonymous
  May 17, 2007
  PingBack from http://blogs.msdn.com/webnext/archive/2007/05/18/silverlight-textblock-and-asian-fonts.aspx

• Anonymous
  May 17, 2007
  Please note you can also subset fonts using xps odttf eg: http://www.geocities.com/sly_i/languages/

• Anonymous
  May 17, 2007
  I Already have that font on my system, so I skip the download and setFontSource method. Why can I not see the Chinese characters?

• Anonymous
  May 18, 2007
  The comment has been removed

• Anonymous
  May 18, 2007
  Is this one area where Silverlight will not work on Apple because it does not have truetype fonts?  (or does it?)  I really need to get Chinese working in order to show my boss this is a technology we could use.

• Anonymous
  May 18, 2007
  "Please note you can also subset fonts using xps odttf eg: " Some of the sample fonts from that link do not show up on my system.

• Anonymous
  May 22, 2007
  Silverlight works fine on the Apple. Each of the fonts supported in Silverlight works with full compatibility on the Apple. v1.0 of Silverlight does not have UniCode/Chinese fonts installed, but these are being worked on for 1.1. The 'workarounds' I'm presenting in my blog provide a methodology for getting Chinese (or other) fonts to work in your Silverlight apps while we wait! :)

• Anonymous
  May 22, 2007
  Nice job! :) Can you write a page explaining what you did, and I'll link to it from this blog?

• Anonymous
  May 23, 2007
  Please see blog post on language sample http://wpf-e.spaces.live.com/blog/cns!2B248D261D0E0035!122.entry

• Anonymous
  June 06, 2007
  Thanks for the post! At least now I have a work around until 1.1. :)

• Anonymous
  June 20, 2007
  Well, it ended up being easier than I though. You have two options: use the glyphs object or download

• Anonymous
  October 26, 2007
  del.icio.us Tags: Silverlight Technorati Tags: Silverlight You may be using the Silverlight downloader

• Anonymous
  December 18, 2007
  現在、Silverlight 1.0 自身では、日本語の入力も出力もサポートされていません。以前、ご紹介した自前翻訳版の クイックスタート では左側に日本語のメニュー項目を表示していますが、ここは TextBlock