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 FASTDesignSystemProviders 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))