reboot styles breaks rtl text direction alignment

[abhishekdev]

Current behavior

Bootstrap reboot sets text-align:left on the body HTML element which in turn negates all effects of setting dir=rtl attribute OR direction CSS property on an element.

Test case behaviour with bootstrap (current working): https://jsbin.com/jeteqisema

Expected behavior

Setting text direction as right-to-left on elements should change the text direction and align it to the right (viz. the default browser behavior on all supported browsers).

Test case behavior without bootstrap (expected behavior): https://jsbin.com/riwafurose

Workaround

Set the value of CSS property text-align to initial for an element fixes on most modern browsers. On browsers which do not support initial, explicitly setting the value to right fixes the issue.

Test case behavior with bootstrap override (workaround): https://jsbin.com/zomezoyepu

Background

Issue #24807 tracks the rtl language support within bootstrap as an enhancement feature; however the current reboot behavior breaks the default semantics for CSS. Making bootstrap components work with
rtl languages is an enhancement feature, however breaking the syntax and flow direction of plain text content seems to be a bug.

Additional cases to consider:

• For user generated rich text content on a page using a right-to-left language, its not possible to predict/determine and set right alignment using CSS utility classes
• Setting the unexpected text-align on body tag leads to CSS specificity wars and IE hacks.
• The overall benefits of setting an explicit text-align:left on the body with CSS vs. setting it for individual components/controls is not apparent from the code comments. ref original commit. This makes it hard to figure if this behavior is intended for the current bootstrap version OR a new reset for the direction attribute be provided as part of the reboot code.

Environment

• OS: all
• Browser: all