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.
Need 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
| Name | Description |
|---|---|
| ca-type-align-start | left-aligned text in LTR or right-aligned text in RTL |
| ca-type-align-end | right-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);}
Params
Note: all params are optional.
| Name | Value |
|---|---|
$top | any valid CSS size and unit |
$bottom | any valid CSS size and unit |
$start | any valid CSS size and unit |
$end | any 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);}
Params
Note: all params are optional.
| Name | Value |
|---|---|
$top | any valid CSS size and unit |
$bottom | any valid CSS size and unit |
$start | any valid CSS size and unit |
$end | any 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);}
Params
Note: all params are optional.
| Name | Value |
|---|---|
$top | any valid CSS size and unit |
$bottom | any valid CSS size and unit |
$start | any valid CSS size and unit |
$end | any 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: