Multilingual support

Using translated text in components

All slots, attributes, and properties in BAgel components show text text exactly as it's entered. They are designed to work with any language and don't change or translate the text, making them adaptable to any language you use

Design system supplied text

Some components come with built-in text, including but not limited to:

Alternative text for images and icons
Visually hidden text for assistive technologies
Input validation messages

Supported languages

Design system supplied text is provided in the following languages:

English - en (Default)
Chinese - zh
Korean - ko
Japanese - ja
French - fr
Spanish - es
Italian - it
Portuguese - pt
German - de
Russian - ru
Polish - pl

Components default to English if a language isn't supported

Code

BAgel components find the closet HTML lang attribute to determine which language a component should use. As the language is usually only set once by the user, BAgel does not watch for changes to lang attributes. This approach helps to minimise performance issues, but means that

the lang attribute needs to be set before BAgel components are loaded
the lang attribute must be set on the <html> tag on every page

Setting the language for all components on a page

Using the lang attribute to set the page language and BAgel components to English

<html lang="en">
  <body>

    ...

    <ba-component></ba-component>
    <ba-component></ba-component>
    <ba-component></ba-component>

    ...

  </body>
</html>

Multiple languages per page

There are two ways you can add multiple languages per page: setting the lang attribute directly on a component or setting the lang attribute on an element that wraps multiple BAgel components

Using the lang attribute to set the page language to English and an individual components to different languages

<html lang="en">
  <body>

    ...

    <ba-component lang="fr"></ba-component><!-- Uses French -->
    <ba-component lang="zh"></ba-component><!-- Uses Chinese -->
    <ba-component lang="pl"></ba-component><!-- Uses Polish -->
    <ba-component></ba-component><!-- Inherits English from html tag-->

    ...

  </body>
</html>

Using the lang attribute to set the page language to English and language to Spanish for a group of components

<html lang="en">
  <body>

    ...

    <div lang="es">
      <!-- These components inherit from the es lang tag on the div -->
      <ba-component></ba-component>
      <ba-component></ba-component>
      <ba-component></ba-component>
    </div>

    ...

  </body>
</html>