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.
direction
DesignToken
@microsoft/fast-components
export direction
(a DesignToken) that can be used to configure the primary direction of the document.
DirectionalStyleSheetBehavior
DirectionalStyleSheetBehavior
can be used to apply arbitrary LTR and RTL stylesheets, depending on the nearest FASTDesignSystemProvider
s direction property.
Example: Using DirectionalStyleSheetBehavior
import { css } from "@microsoft/fast-element";
import { DirectionalStyleSheetBehavior } from "@microsoft/fast-components";
const ltr = css`
:host {
left: 20px;
}
`;
const rtl = css`
:host {
right: 20px;
}
`;
const styles = css`
.host {
position: relative
}
`.withBehaviors(new DirectionalStyleSheetBehavior(ltr, rtl))