reboot styles breaks rtl text direction alignment
Created by: 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 (closed) 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-alignonbodytag leads to CSS specificity wars and IE hacks. - The overall benefits of setting an explicit
text-align:lefton 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 thedirectionattribute be provided as part of the reboot code.
Environment
- OS: all
- Browser: all