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);}
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);}
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);}
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: