Phenix RTL/LTR

Learn how to enable support for right-to-left language direction in Phenix Design System across the layout, components, and utilities.

CSS RTL Version

phenix has a CSS version for RTL languages ready for quick usage and you can find CDN links in the Installation document and all pre-designed layouts, components, and utilities, the best to get familiar with phenix logical classes.

<!-- Phenix CSS RTL -->
<link href="<https://cdn.jsdelivr.net/npm/phenix-ui/dist/css/phenix-rtl.css>" rel="stylesheet" />

RTL via SASS

phenix sass has two main files phenix-rtl.scss and phenix.scss and those files is what gets compiled and watch by the npm sass script each of that file possess only the Fonts & Text direction for more information about building sass go back to Build Tools document.

💼-your-project[phenix]
    📂-src/sass
        📄phenix.scss || LTR Options
        📄phenix-rtl.scss⠀|| RTL Options
        📄...

Logical Classes

Phenix CSS utilities and class names for anything that is related to flow direction from top to bottom and left to right, or right to left depending on what language the document is, phenix uses the new CSS concept Logical Properties for naming classes for example:

let’s assume your document language is English which means your main Block flow is from the document Top to Bottom and the Inline Flow is Left to Right, but we do not use those terms anymore, in phenix, the classes are named logically in this case of ours Left means Start and Right means End which leads us to classes like,

for example, tx-align-start to align text to the left in case of LTR and to the right in case of RTL, another example is tx-align-end to align text to the right in case of LTR and to the left in case of RTL.

and for properties that go both ways you will find class names like gpx-* to create even space between columns horizontally inside grid or flexbox layouts and also class names like gpy-* to create even space between columns vertically,

Conclusion

top and bottom are referred to as class-t-* or class-tp-* and class-b-* or class-bt-* and Y for both, also left & right is referred to as start and end or X for both