"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2319],{3905:function(e,t,r){r.d(t,{Zo:function(){return d},kt:function(){return m}});var n=r(7294);function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function i(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function o(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?i(Object(r),!0).forEach((function(t){a(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):i(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function l(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var s=n.createContext({}),p=function(e){var t=n.useContext(s),r=t;return e&&(r="function"==typeof e?e(t):o(o({},t),e)),r},d=function(e){var t=p(e.components);return n.createElement(s.Provider,{value:t},e.children)},c={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},u=n.forwardRef((function(e,t){var r=e.components,a=e.mdxType,i=e.originalType,s=e.parentName,d=l(e,["components","mdxType","originalType","parentName"]),u=p(r),m=a,f=u["".concat(s,".").concat(m)]||u[m]||c[m]||i;return r?n.createElement(f,o(o({ref:t},d),{},{components:r})):n.createElement(f,o({ref:t},d))}));function m(e,t){var r=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var i=r.length,o=new Array(i);o[0]=u;var l={};for(var s in t)hasOwnProperty.call(t,s)&&(l[s]=t[s]);l.originalType=e,l.mdxType="string"==typeof e?e:a,o[1]=l;for(var p=2;p<i;p++)o[p]=r[p];return n.createElement.apply(null,o)}return n.createElement.apply(null,r)}u.displayName="MDXCreateElement"},7897:function(e,t,r){r.r(t),r.d(t,{frontMatter:function(){return l},contentTitle:function(){return s},metadata:function(){return p},toc:function(){return d},default:function(){return u}});var n=r(7462),a=r(3366),i=(r(7294),r(3905)),o=["components"],l={title:"Right to left",sidebar_position:8},s=void 0,p={unversionedId:"overview/rtl",id:"overview/rtl",isDocsHomePage:!1,title:"Right to left",description:"FlatifyCSS supports the right to left layout, it is done by using inline featuers of CSS therefore elements are automatically positioned based on the document direction.",source:"@site/docs/overview/rtl.mdx",sourceDirName:"overview",slug:"/overview/rtl",permalink:"/docs/overview/rtl",editUrl:"https://github.com/amir2mi/flatifycss/tree/master/website/docs/overview/rtl.mdx",tags:[],version:"current",sidebarPosition:8,frontMatter:{title:"Right to left",sidebar_position:8},sidebar:"tutorialSidebar",previous:{title:"Accessibility",permalink:"/docs/overview/a11y"},next:{title:"Dark mode",permalink:"/docs/overview/darkmode"}},d=[],c={toc:d};function u(e){var t=e.components,r=(0,a.Z)(e,o);return(0,i.kt)("wrapper",(0,n.Z)({},c,r,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("p",null,"FlatifyCSS supports the right to left layout, it is done by using ",(0,i.kt)("inlineCode",{parentName:"p"},"inline")," featuers of CSS therefore elements are automatically positioned based on the document ",(0,i.kt)("inlineCode",{parentName:"p"},"direction"),"."),(0,i.kt)("p",null,"Note that you need to set ",(0,i.kt)("inlineCode",{parentName:"p"},'dir="rtl"')," attribute for ",(0,i.kt)("inlineCode",{parentName:"p"},"<html>")," tag and ",(0,i.kt)("inlineCode",{parentName:"p"},".rtl")," class as well."),(0,i.kt)("p",null,"Here are the list of CSS properties that is used to dynamically position elements based on ",(0,i.kt)("inlineCode",{parentName:"p"},"direction"),":"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("a",{parentName:"li",href:"https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline"},(0,i.kt)("inlineCode",{parentName:"a"},"inset-inline"))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("a",{parentName:"li",href:"https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline"},(0,i.kt)("inlineCode",{parentName:"a"},"margin-inline"))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("a",{parentName:"li",href:"https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline"},(0,i.kt)("inlineCode",{parentName:"a"},"padding-inline"))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("a",{parentName:"li",href:"https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline"},(0,i.kt)("inlineCode",{parentName:"a"},"border-inline"))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("a",{parentName:"li",href:"https://developer.mozilla.org/en-US/docs/Web/CSS/border-start-start-radius"},(0,i.kt)("inlineCode",{parentName:"a"},"border-start-start-radius"))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("a",{parentName:"li",href:"https://developer.mozilla.org/en-US/docs/Web/CSS/border-start-end-radius"},(0,i.kt)("inlineCode",{parentName:"a"},"border-start-end-radius"))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("a",{parentName:"li",href:"https://developer.mozilla.org/en-US/docs/Web/CSS/border-end-start-radius"},(0,i.kt)("inlineCode",{parentName:"a"},"border-end-start-radius"))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("a",{parentName:"li",href:"https://developer.mozilla.org/en-US/docs/Web/CSS/border-end-end-radius"},(0,i.kt)("inlineCode",{parentName:"a"},"border-end-end-radius"))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("a",{parentName:"li",href:"https://developer.mozilla.org/en-US/docs/Web/CSS/float#syntax"},(0,i.kt)("inlineCode",{parentName:"a"},"float: inline-start/inline-end"))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("a",{parentName:"li",href:"https://developer.mozilla.org/en-US/docs/Web/CSS/text-align#syntax"},(0,i.kt)("inlineCode",{parentName:"a"},"text-align: start/end")))),(0,i.kt)("p",null,"For some cases like ",(0,i.kt)("inlineCode",{parentName:"p"},"transform")," there is not inline option, the ",(0,i.kt)("inlineCode",{parentName:"p"},":dir(rtl/ltr)")," CSS pseudo-class will be a saviour here."),(0,i.kt)("p",null,"This is one example of the usage:"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-scss"},"&:dir(rtl) .inline:before,\n.rtl &.inline:before {\n  transform: rotate(3deg) scale(1.1, 1.2) skew(10deg);\n}\n\n&:dir(ltr) .inline:before,\n.ltr &.inline:before {\n  transform: rotate(-3deg) scale(1.1, 1.2) skew(-10deg);\n}\n")),(0,i.kt)("p",null,"For backward compatibility also the ",(0,i.kt)("inlineCode",{parentName:"p"},".ltr")," and ",(0,i.kt)("inlineCode",{parentName:"p"},".rtl")," classes are added."))}u.isMDXComponent=!0}}]);