[openstreetmap/openstreetmap-website] Avoid using text-align on body element (Issue #3432)

[Andy Allan]

As part of #3427 and following up from the last part of #3428 we have a problem where all text, even with dir=auto, is forced into a pre-determined alignment. This is because we set the global text-alignment explicitly in our CSS:

https://github.com/openstreetmap/openstreetmap-website/blob/3a534ea895fd60d2c5cccc66251e5472868c0f4e/app/assets/stylesheets/common.scss#L29-L31

This property then cascades down to every element. Setting dir="auto" on a child element is not enough to override this global text-align. But if we omit the text alignment altogether, everything works fine by default. Having dir=rtl on the body makes everything right-aligned by default, and where we specify dir="auto", then the alignment will automatically flip based on content (since there is no overriding text-align set).

Unfortunately bootstrap 4 has [`text-align: left` hardcoded](https://github.com/twbs/bootstrap/blob/349a373ff62bf530135ad95d7d1d3f1be6abbf22/scss/_reboot.scss#L53) and expects RTL-only sites to override this. But in bootstrap 5, which has additional focus on RTL, that was [removed](https://github.com/twbs/bootstrap/pull/28989), and the [default `text-align` is now null](https://github.com/twbs/bootstrap/blob/520cc8de92ca48d7ac60102d992d7afe9788b239/scss/_variables.scss#L401) allowing dir="auto" to work as intended.

So fixing this is split into three parts:
* Upgrade to bootstrap 5 (#3230).
* Remove the global `text-align` from our own CSS.
* Check the other `text-align` declarations in our CSS, and see which can be removed.


-- 
Reply to this email directly or view it on GitHub:
https://github.com/openstreetmap/openstreetmap-website/issues/3432
You are receiving this because you are subscribed to this thread.

Message ID: <openstreetmap/openstreetmap-website/issues/3432 at github.com>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20220120/0bbb9a87/attachment.htm>