Share via

UI Controls now available in over 40 languages!

  • Article

Hello! Hallo! Guten Tag! Buenos días! Hola! Alo! Hallå!

It’s just a selection of some of the languages the UI controls are now available in. We are very excited to announce that in total over 40 new languages are available for the UI Controls, as well as greatly improving support for right-to-left languages! Because localization is such a hip new feature, we have also decided to update the version of the library to 3.1. To get the new localization functionalities, you will need to point your loader to the following:

https://www.wlmessenger.net/api/3.1/loader.js

For a complete overview of all the languages that are available, please view our Appendix A: Supported Languages on MSDN.

Getting the language you want

Once you’re pointing to the new version of the library, there are several supported ways of getting the language you want, depending on the way you interact with the library. The first and easiest is to either add the lang or the xml:lang attribute to the html tag. For most developers this is the preferred choice. Please note that for some languages, such as Hebrew, you will also have to include the dir attribute in the <html> tag to make your page use right-to-left.

    1: <html lang="nl">
    2: <html xml:lang="de">
    3: <html lang="he" dir="rtl">

The second way to get the language you want is to manually initialize the loader. It is a little more complicated. We recommend using one of the above methods instead.

    1: <script type="text/javascript">   2:     var loader = Microsoft.Live.Core.Loader;   3:         loader.initialize({ 'market' : 'es' });   4:         loader.load(['messenger.ui', 'messenger.ui.styles.core']);   5: </script>

Beware of changes to the mark-up!

Although we always try to keep everything backwards compatible, we have made some small changes to the mark-up and style sheets of the UI Controls in order to support all the various new languages. If you are styling the UI controls yourself, then you may be affected by these breaking changes. If you are only using the default styles however, this does not apply to you.

Sign In Control

To localize the sign in control button, we had to swap the single sign in button image for regular HTML. If you are using the text-only version of the sign in control (by setting the size=”small” attribute) then this should not affect you. If you are using the medium or large sign in buttons however, please note that the single image with the CSS class “SignInControl_Image” has been replaced with:

    1: · SignInControl_Graphic
    2:     · SignInControl_Graphic_Left: The image to the left of the text
    3:     · SignInControl_Graphic_Text: The text within the sign-in tag
    4:     · SignInControl_Graphic_Right: The image to the right of the text

Credits Dialog

In case you went all out and also styled the credits dialog (available by clicking on the Windows Live Messenger logo in the bar and selecting “About Messenger” in the menu), then you should be aware that the Windows Live Logo in the credits dialog has been moved outside the enclosing DIV.

Display Name Control

A new CSS class has been added to the display name control to make styling easier. The new class is applied to the A element which contains the link to the user or contacts profile in case linked is set to true in the msgr:display-name tag. The new CSS class is DisplayNameControl_ProfileLink.

Get started now!

We hope you enjoy using and developing with the new localized controls :-)

Siebe Tolsma
Software Development Engineer
Messenger Web Platform

Comments