{"id":20570111,"url":"https://github.com/gasolin/postcss-bidirection","last_synced_at":"2025-06-20T12:06:30.188Z","repository":{"id":57327887,"uuid":"46470337","full_name":"gasolin/postcss-bidirection","owner":"gasolin","description":"PostCSS plugin that polyfill Bi-directional CSS properties and values to suppot rtl and ltr rules in all browsers","archived":false,"fork":false,"pushed_at":"2020-06-15T11:27:45.000Z","size":162,"stargazers_count":24,"open_issues_count":5,"forks_count":10,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-08T11:03:13.275Z","etag":null,"topics":["bidirectional","postcss","right-to-left","rtl"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gasolin.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-11-19T05:41:35.000Z","updated_at":"2024-05-23T08:55:25.000Z","dependencies_parsed_at":"2022-09-17T11:20:56.654Z","dependency_job_id":null,"html_url":"https://github.com/gasolin/postcss-bidirection","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gasolin%2Fpostcss-bidirection","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gasolin%2Fpostcss-bidirection/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gasolin%2Fpostcss-bidirection/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gasolin%2Fpostcss-bidirection/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gasolin","download_url":"https://codeload.github.com/gasolin/postcss-bidirection/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248643008,"owners_count":21138354,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bidirectional","postcss","right-to-left","rtl"],"created_at":"2024-11-16T05:11:32.415Z","updated_at":"2025-04-14T16:52:34.263Z","avatar_url":"https://github.com/gasolin.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# PostCSS Bidirection [![Build Status][ci-img]][ci] [![Npm version][npm-image]][npm-url]\n\n[PostCSS] plugin that polyfill Bi-directional [CSS proposal from W3C](https://drafts.csswg.org/css-logical-props/) to suppot direction-sensitive rules, a.k.a Left-To-Right (LTR) and Right-To-Left (RTL) in all browsers.\n\n[PostCSS]: https://github.com/postcss/postcss\n[ci-img]:  https://travis-ci.org/gasolin/postcss-bidirection.svg\n[ci]:      https://travis-ci.org/gasolin/postcss-bidirection\n[npm-image]: https://badge.fury.io/js/postcss-bidirection.svg\n[npm-url]: https://npmjs.org/package/postcss-bidirection\n\n## Install\n\n```\nnpm install --save-dev postcss-bidirection\n```\n\n## Usage\n\nInstall postcss-bidirection via npm:\n\n```js\npostcss([ require('postcss-bidirection') ])\n```\n\nSee [PostCSS] docs for examples for your environment.\n\nTo check the layout change, in your HTML file, add attribute in your html tags\n\n```\n\u003chtml dir=\"rtl\"\u003e\n\n```\n\nOr, in your js file, set `document.dir = 'rtl'` or `document.dir = 'ltr'`.\n\n## Examples\n\nPostCSS Bidirection support syntax based on https://wiki.mozilla.org/Gaia/CSS_Guidelines\n\n### Text alignment example\n\nInput\n\n```css\n.foo {\n  text-align: start;\n}\n```\n\nOutput\n\n```css\n.foo {\n  text-align: left;\n}\n\nhtml[dir=\"rtl\"] .foo {\n  text-align: right;\n}\n```\n\n### Padding Example\n\nInput\n\n```css\n.foo {\n  padding-inline-start: 1px;\n}\n```\n\nOutput\n\n```css\n.foo {\n  padding-left: 1px;\n}\n\nhtml[dir=\"rtl\"] .foo {\n  padding-right: 1px;\n}\n```\n\n### Border Width Example\n\nInput\n\n```css\n.foo {\n  border-inline-start-width: 1px;\n}\n```\n\nOutput\n\n```css\n.foo {\n  border-left-width: 1px;\n}\n\nhtml[dir=\"rtl\"] .foo {\n  border-right-width: 1px;\n}\n```\n\n### Absolute Positioning Example\n\nInput\n\n```css\n.foo {\n  inset-inline-start: 1px;\n}\n```\n\nOutput\n\n```css\n.foo {\n  left: 1px;\n}\n\nhtml[dir=\"rtl\"] .foo {\n  right: 1px;\n}\n```\n\n\nAll supported syntax are listed below\n\n|     left/right             |     begin/end                     |\n|----------------------------|-----------------------------------|\n|                   **text alignment**                           |\n| text-align: left           | text-align: start                 |\n| text-align: right          | text-align: end                   |\n| float: left                | float: start                      |\n| float: right               | float: end                        |\n| clear: left                | clear: start                      |\n| clear: right               | clear: end                        |\n|               **padding, margin, border**                      |\n| padding-left               | padding-inline-start              |\n| padding-right              | padding-inline-end                |\n| border-left                | border-inline-start               |\n| border-right               | border-inline-end                 |\n| border-left-color          | border-inline-end-color           |\n| border-right-color         | border-inline-start-color         |\n| border-left-style          | border-inline-start-style         |\n| border-right-style         | border-inline-end-style           |\n| border-left-width          | border-inline-start-width         |\n| border-right-width         | border-inline-end-width           |\n| border-top-left-radius     | border-top-inline-start-radius    |\n| border-top-right-radius    | border-top-inline-end-radius      |\n| border-bottom-left-radius  | border-bottom-inline-start-radius |\n| border-bottom-right-radius | border-bottom-inline-end-radius   |\n| margin-left                | margin-inline-start               |\n| margin-right               | margin-inline-end                 |\n|                 **absolute positioning**                       |\n| left                       | inset-inline-start                |\n| right                      | inset-inline-end                  |\n| left                       | offset-inline-start (obsolete)    |\n| right                      | offset-inline-end (obsolete)      |\n\n## Options\n\npostcss-bidirection accepts an options object.\n\n```\nconst plugin = require('postcss-bidirection');\nconst opts = {\n    ...\n};\npostcss([ plugin(opts) ]).process(input) ...\n```\n\n### Custom Selectors\n\nBy default, postcss-bidirection prefixes generated CSS selectors with `html[dir=\"rtl\"]` or `html[dir=\"ltr\"]`. The `buildSelector` option allows you to override this behavior. \n\nThis callback gets called once for every selector of every rule that contains translated properties. If the rule has multiple selectors separated by commas, then it will be called multiple times for that rule.\n\nIt takes two arguments:\n  - the original CSS selector of the rule that we are translating\n  - The direction to which it is being translated. Can be `rtl` or `ltr`.\n  \nIt should return a CSS selector string, which will be attached to the translated CSS rule.\n   \nFor example, to drop `html` from generated selectors, pass a custom `buildSelector` function to the plugin.\n\n```\nconst opts = {\n  buildSelector = function(selector, direction) {\n    return '[dir=\" + direction + '\"] ' + selector;\n  }\n};\n\nlet bidirection = require('postcss-bidirection');\npostcss([ bidirection(opts) ]);\n```\n\nInput\n\n```css\n.foo {\n  text-align: start;\n}\n```\n\nNow we have `[dir=\"rtl\"]` instead of `html[dir=\"rtl\"]` in the output: \n\n```css\n.foo {\n  text-align: left;\n}\n\n[dir=\"rtl\"] .foo {\n  text-align: right;\n}\n```\n\n## Debugging\n\nInstall postcss-debug\n\n```sh\nnpm install -g postcss-debug\n```\n\nThen run postcss-debug with command\n\n```sh\npostcss-debug sample.css\n```\n\n## References\n\n### Firefox OS / B2G OS\nThese CSS syntax are [already in production](https://github.com/mozilla-b2g/gaia/blob/master/apps/settings/style/settings.css) in Mozilla's [Firefox OS](https://www.mozilla.org/en-US/firefox/os/), which could be installed as an Android launcher. Once its started, open Settings \u003e Language and choose an sample RTL Language to check the result.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgasolin%2Fpostcss-bidirection","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgasolin%2Fpostcss-bidirection","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgasolin%2Fpostcss-bidirection/lists"}