Update a point in the RTL documentation

[elchininet]

Description

This is a follow up of this pull request in which a small section was added to the RTL documentation. PostCSS RTLCSS has a new directive that is more aligned with the /*rtl:remove*/ directives of RTLCSS.

Motivation & Context

Previous recommendation was to use the /*rtl:ignore*/, /*rtl:begin:ignore*/ and /*rtl:end:ignore*/ directives, stating that as these directives do not create an RTL counterpart, the result will be the same as using the remove ones in RTLCSS.

The previous statement is not completely true. It is true that the ignore directives of PostCSS RTLCCS do not create a RTL counterpart, but this will not achieve the same result as removing the rule/declaration from the rtl.css bundle.

For example, having the next input:

.example-1 {
  text-align: left;
}

/*rtl:ignore*/
.example-2 {
  padding-left: 10px;
}

The resulted output will be:

[dir="ltr"] .example-1 {
  text-align: left;
}

[dir="rtl"] .example-1 {
  text-align: right;
}

.example-2 {
  padding-left: 10px;
}

It is true, that .example-2 has not been processed and no RTL rule has been created for it. But this means that those users in RTL will still have that padding-left affecting the elements with the class example-2. RTLCSS (using the remove directive) would have generated a bundle file without the .example-2 rule, so users in RTL will not have the padding-left.

PostCSS RTLCSS has a new directive that will achieve the same as RTLCCS with the remove directives. Consider the next input:

.example-1 {
  text-align: left;
}

/*rtl:freeze*/
.example-2 {
  padding-left: 10px;
}

The resulted output will be:

[dir="ltr"] .example-1 {
  text-align: left;
}

[dir="rtl"] .example-1 {
  text-align: right;
}

[dir="ltr"] .example-2 {
  padding-left: 10px;
}

Now the padding-left will only affect to users in LTR and users in RTL will not have it.

Type of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Refactoring (non-breaking change)
• Breaking change (fix or feature that would change existing functionality)

Checklist

• I have read the contributing guidelines
• My code follows the code style of the project (using npm run lint)
• My change introduces changes to the documentation
• I have updated the documentation accordingly
• I have added tests to cover my changes
• All new and existing tests passed

Live previews

• https://deploy-preview-41098--twbs-bootstrap.netlify.app/docs/5.3/getting-started/rtl/#ltr-and-rtl-at-the-same-time

Related issues

#39863

[julien-deramond]

Perfect, you're entirely right. Thanks for the update @elchininet, really appreciated!