Table of contents


Metro 4 ready for internationalization and localisation.


Some components in Metro 4 use text labels, example calendar component. Metro 4 supports i18n mechanism to display text labels.

By default components use value of METRO_LOCALE variable. This ia a global variable and can be modified before Metro 4 js loaded. You can set locale for component with special attribute data-locale.

                        window.METRO_LOCALE = "de-DE";
                    <script src="metro.js"></script>

Meta tag

You can set global locale with <meta> tag. To set it use meta tag with name metro4:locale.

                    <meta name="metro4:locale" content="uk-UA">


You can get hard stored locales with method Metro.utils.getLocales().

                    var locales = Metro.utils.getLocales();

Add locale

You can add own locale at runtime. To add locale you must use method Metro.utils.addLocale().

                            'de-DE': {
                                "calendar": {
                                    "months": [
                                        "Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember",
                                        "Jan", "Feb", "Mär", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"
                                    "days": [
                                        "Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag",
                                        "Sn", "Mn", "Di", "Mi", "Do", "Fr", "Sa",
                                        "Son", "Mon", "Die", "Mit", "Don", "Fre", "Sam"
                                    "time": {
                                        "days": "TAGE",
                                        "hours": "UHR",
                                        "minutes": "MIN",
                                        "seconds": "SEK"
                                "buttons": {
                                    "ok": "OK",
                                    "cancel": "Abbrechen",
                                    "done": "Fertig",
                                    "today": "Heute",
                                    "now": "Jetzt",
                                    "clear": "Reinigen",
                                    "help": "Hilfe",
                                    "yes": "Ja",
                                    "no": "Nein",
                                    "random": "Zufällig"

if you put your javascript in <head>, you must use method after Metro 4 js loaded. If you put javascript in bottom of page, you must set <meta> tag metro4:init to false and manually initialise Metro 4, after locale is added.

For head

                        <script src="metro.js"></script>
For bottom of page

                        <meta name="metro4:init" content="false">
                        <script src="metro.js"></script>