Localization

Document Direction

Many CSS layout properties like flexbox and CSS grid automatically handle reflow depending on the document's primary direction. There are also CSS logical properties that can be used as well to apply localized margins, paddings, borders and positioning. Unfortunately, browser support for these properties is limited and there are still styling cases not covered by these properties (directional glyphs, transforms, etc). That is why FAST provides several mechanisms to apply direction-based styles.

DesignSystemProvider

The FASTDesignSystemProvider exposes a direction property. This should be set to the primary document direction and defaults to ltr. This value will be used to inform the stylesheet behaviors described below.

inlineStartBehavior and inlineEndBehavior

inlineStartBehavior and inlineEndBehavior can be used to apply localized float properties. These are drop-in replacements for the browsers inline-start and inline-end float values and should be used when the native values are not supported. If your browser-matrix supports inline-start and inline-end float values, please use the native values.

Example: Using inlineStartBehavior and inlineEndBehavior

import { css } from "@microsoft/fast-element";
import { inlineStartBehavior } from "@microsoft/fast-components";
const styles = css`
:host {
float: ${inlineStartBehavior.var}
}
`.withBehaviors(inlineStartBehavior)

DirectionalStyleSheetBehavior

DirectionalStyleSheetBehavior can be used to apply arbitrary LTR and RTL stylesheets, depending on the nearest FASTDesignSystemProviders direction property.

Example: Using DirectionalStyleSheetBehavior

import { css } from "@microsoft/fast-element";
import { DirectionalStyleSheetBehavior } from "@microsoft/fast-foundation";
const ltr = css`
:host {
left: 20px;
}
`;
const rtl = css`
:host {
right: 20px;
}
`;
const styles = css`
.host {
position: relative
}
`.withBehaviors(new DirectionalStyleSheetBehavior(ltr, rtl))