Skip navigation
Skip to main content
Localization
Localization

ICU syntax

Canva supports a subset of International Components for Unicode (ICU).

The Canva translation process supports a subset of ICU MessageFormat syntax. For more information about ICU, see the official FormatJS documentation.

ICU basics

This section describes the supported ICU syntax, with recommendations and examples.

Interpolation

When passing in dynamic values, use interpolation.

Don't use concatenation to pass in dynamic values. This is because languages will reorder words in various ways. For more information, see this blog post.

Do
"Hello {name}"
Don't
"Hello " + name

Pluralization

Do

Try it free for {trialPeriodDays, plural, one {# day} other {# days}}

  • With 1 trialPeriodDays this displays in English as: Try it free for 1 day
  • And with 2 trialPeriodDays this displays in English as: Try it free for 2 days
Do

Use {creditsCost, number} of {remainingCredits, plural, one {# credit} other {# credits}}

Formatting numbers, dates, and time

When passing number, date, or time values, make sure you use the correct ICU argument so that the values are formatted in a way that respects the user's locale.

Numbers

Do

Members ({(members, number, integer)}) - 123456 members displays as Members (123,456) in English, Membres (123 456) in French, and Thành viên (123.456) in Vietnamese.

Don't

Members ({members}) - The number doesn't respect the user's locale and always displays 123456 as the number, without separators.

Dates

Do

Expires {(expiryDate, date, short)} - When formatted with a date value (such as new Date('2024-09-25') in JavaScript), this will correctly display as Expires 9/25/2024 for US English (en-US) and Verfällt am 25.09.2024 for German (de-DE).

Don't

Expires {expiryDate} - The number doesn't respect the user’s locale and always displays the date as 2024-09-25. For example: (Verfällt am 2024-09-25)

Time

Do

Current time: {(currentTime, time, short)} - This displays as Current time: 3:45 PM in English.

Select

Do

Hello, {role, select, admin {Administrator} user {User} guest {Guest} other {Visitor}}!

  • If role is 'admin', it renders: Hello, Administrator!
  • If role is 'user', it renders: Hello, User!
  • If role is 'guest', it renders: Hello, Guest!
  • If role is anything else or missing, it renders: Hello, Visitor!

Unsupported syntax

Don't use strings with multiple plural arguments. For example:

{like_count, plural, one {1 like} other {{like_count} likes}} and {subscriber_count, plural, one {1 sub} other {{subscriber_count} subs}}

Don't use strings with a plural argument and offset property. For example:

{like_count, plural, offset:1 =0 {no likes} other {{like_count} likes}}

Don't use strings with a selectordinal argument. For example:

{n, selectordinal, one {This is the #st item} two {This is the #nd item} few {This is the #rd item} other {This is the #th item}}

Don't use strings containing the choice argument. For example:

{user_category, choice, ...

Don't use strings that result in over 20 combinations. For example:
{firstChoice, select,
  optionA {First A}
  optionB {First B}
  other {First C}
} {secondChoice, select,
  optionX {Second X}
  optionY {Second Y}
  other {Second Z}
} {thirdChoice, select,
  option1 {Third 1}
  option2 {Third 2}
  other {Third 3}
}
ts
  • This example contains a select with 3 choices, followed by another select with 3 choices, followed by another select with 3 choices. This would result in 3 x 3 x 3 = 27 possible string combinations.
Don't use nested selects/plurals/select-plural combinations, except when the nested argument is a simple placeholder. For example, this nesting is not supported: 
{gender, select, 
  male {
    {count, plural, 
      one {He has one item} 
      other {He has # items}
    }
  } 
  other {
    {count, plural, 
      one {They have one item} 
      other {They have # items}
    }
  }
}
ts
This nesting is supported: 
{task_count, plural,
  one {
    You have {# task_count} task: {task_name}.
  }
  other {
    You have {# task_count} tasks. Next task: {task_name}.
  }
}
ts

More information