Culture Amp
Menu

Localization

Culture Amp customers have diverse, globally distributed employees that speak many languages. We localize our interfaces as well as our surveys and other data. These guidelines focus on interface localization.

Also known as:
InternationalizationLanguagesTranslations

AnchorNeed to know

  • Use the "dir" global attribute to indicate the directionality of text. For example, set it "rtl" for right-to-left languages.
  • Use flex "start" and "end" instead of "left" and right".

Overview

As Culture Amp's products grow, we need to support many more languages. Localizing interfaces includes translating text. Sometimes, this means supporting different directional layouts, such as supporting right-to-left (RTL) text in Arabic and Hebrew.

Start thinking about the horizontal flow of a layout in terms of start and end as opposed to left and right. This will help you determine where you need to cater for RTL layout support. CSS Flexbox takes this approach and uses flex-start and flex-end for positioning elements within a flex container. Wherever possible, start using flexbox for your layout to get a lot of RTL support for free!

Getting Started

Culture Amp has a number of Sass mixins that are available from Kaizen. To use them, you will need to import the correct mixin file.

@import '~@kaizen/component-library/styles/type';
@import '~@kaizen/component-library/styles/layout';

Text Alignment

If you explicitly need to set the text-align property for your document or component, use the ca-type-align-start or ca-type-align-end mixin as follows. As an example, using ca-type-align-start in a left-to-right layout will result in left-aligned text, whereas in a right-to-left layout, the resulting text will be right-aligned.

@import '~@kaizen/component-library/styles/type';
 
.my-text {
  @include ca-type-align-start;
}

Available Mixins

NameDescription
ca-type-align-startleft-aligned text in LTR or right-aligned text in RTL
ca-type-align-endright-aligned text in LTR or left-aligned text in RTL

Margins/Padding/Position

When using any left or right-specific CSS properties e.g. margin-left, padding-left, left, and so on, it is common to need these values 'flipped' in an RTL layout:

Margins

@import '~@kaizen/component-library/styles/layout';
 
.my-element {
  @include ca-margin($start: $ca-grid, $end: 0, $top: $ca-grid * 2, $bottom: $ca-grid);
}

Note: all params are optional.

NameValue
$topany valid CSS size and unit
$bottomany valid CSS size and unit
$startany valid CSS size and unit
$endany valid CSS size and unit

Padding

@import '~@kaizen/component-library/styles/layout';
 
.my-element {
  @include ca-padding($start: $ca-grid, $end: 0, $top: $ca-grid * 2, $bottom: $ca-grid);
}

Note: all params are optional.

NameValue
$topany valid CSS size and unit
$bottomany valid CSS size and unit
$startany valid CSS size and unit
$endany valid CSS size and unit

Position

This mixin is relevant to absolute or relative-positioned elements.

@import '~@kaizen/component-library/styles/layout';
 
.my-element {
  @include ca-position($start: $ca-grid, $end: 0, $top: $ca-grid * 2, $bottom: $ca-grid);
}

Note: all params are optional.

NameValue
$topany valid CSS size and unit
$bottomany valid CSS size and unit
$startany valid CSS size and unit
$endany valid CSS size and unit

Buttons

A chevron icon or "angle bracket" before or after the text in a button label shows which direction in the process the user’s click on the button will take them. The “backward” and “forward” directions for arrows are dependent on the writing direction (specifically, they are reversed in right-to-left writing systems).

Testing RTL layout support

Set the dir attribute on any parent element to "rtl".

<div dir="rtl">
  <div><p>I should now be right aligned text</p><div>
</div>

External links

Here are some examples of existing design systems: