Silverlight TextBlock and Asian Fonts

Silverlight TextBlock and Asian Fonts

Rate This
  • Comments 13

 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="
http://schemas.microsoft.com/client/2007"
xmlns:x="http://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
  • PingBack from http://blogs.msdn.com/webnext/archive/2007/05/18/silverlight-textblock-and-asian-fonts.aspx

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

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

  • Silverlight Cream for 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.

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

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

  • Nice job! :)

    Can you write a page explaining what you did, and I'll link to it from this blog?

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

  • Thanks for the post! At least now I have a work around until 1.1. :)

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

  • del.icio.us Tags: Silverlight Technorati Tags: Silverlight You may be using the Silverlight downloader

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

Page 1 of 1 (13 items)
Leave a Comment
  • Please add 4 and 5 and type the answer here:
  • Post