{"revision":"c10276e953456835cdbb1f3a60d58ae1980be353","document":{"id":42483,"path":"platform-user-interface/service-portal/css-directives-right-to-left-languages.md","title":"CSS for right-to-left languages in portals","bundle":null,"doc_type":null,"release":"australia","body":"\n# CSS for right-to-left languages in portals\n\nYou can control the generation of CSS for right-to-left languages using a variety of methods.\n\nBase system portals besides Service Portal \\(/sp\\) and custom portals might need additional CSS customization to mirror the direction of a portal for right-to-left languages completely.\n\nCustom widgets might need some manual conversion for right-to-left languages.\n\n-   For inline styles in a widget's HTML template, move these styles to the widget's CSS so they’ll be automatically converted.\n-   For internal styles in a widget's HTML template, you can use the `[dir=”rtl”]` attribute selector or `.rtl` class selector to provide CSS that is specific to right-to-left languages.\n-   To include CSS that is specific to right-to-left languages, you can call the isRTLEnabled\\(\\) method in the  class in a widget’s server script or use the g\\_portal\\_isrtl global flag in the widget’s client script.\n\nAlso, in the theme, page, widget, or widget instance CSS, you can add right-to-left directives to CSS properties only using a Sass interpolation string \\(`#{\"\"}`\\).\n\n|Right-to-left CSS directive|Description|\n|---------------------------|-----------|\n|`/*rtl:ignore*/`|Ignores the property when converting portal CSS for right-to-left languages.|\n|`/*rtl:prepend:10px*/`|Adds a value to the beginning of the property value for right-to-left languages. This example prepends `10px`.|\n|`/*rtl:append:3rem*/`|Adds a value to the end of the property value for right-to-left languages. This example appends `3rem`.|\n|`/*rtl:replace:`30px`*/` or `/*rtl:`30px`*/`|Replaces the property value with the specified value for right-to-left languages. This example replaces the property value with `30px`.|\n|`/*rtl:insert:25px*/`|Inserts the specified value in place of the directive for right-to-left languages. This example inserts `25px`.|\n\n## Ignore the transform property in the converted right-to-left CSS\n\n```css\n.fl {\ntransform: rotate(45deg) translateY(5px) #{\"/*rtl:ignore*/\"};\n}\n```\n\n**Parent Topic:**[Styling for right-to-left languages in portals](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/platform-user-interface/service-portal/styling-right-to-left-languages.md)\n\n"}}