[openstreetmap/openstreetmap-website] Improve handling of RTL styling (PR #4353)

[Tom Hughes]

This PR reworks how we handle RTL support to try and fix some of the outstanding issues.

A key discovery was that although bootstrap has RTL support we weren't actually taking advantage of that but were instead getting our own variant of it that is kind of broken.

Upstream bootstrap uses [RTLCSS](https://rtlcss.com/) for it's RTL support and has a number of directives in the source to override various aspects of the automatic conversion and if you download bootstrap you will get both `bootstrap.css` and `bootstrap.rtl.css` which has been processed by RTLCSS to produce an RTL version.

The rubygems version of bootstrap doesn't use that though - it ships the unprocessed SCSS source for bootstrap and the only reason it has been working at all is that it gets included into our CSS and then processed by r2 but that of course ignores the RTLCSS directives in the bootstrap source.

So this PR switches our RTL support to use RTLCSS meaning that those directives are obeyed and various bugs go away and overrides in our source can be removed - it also gives us access to a much richer set of customisation directives for future use.

That still didn't fix #3910 though as there was nothing in any of the stylesheets to set the alignment of placeholder text and the browsers seem to default to putting it on the left even in an RTL context so I added an alignment directive which then gets reversed in RTL mode.

After all that I hit https://github.com/rubyjs/mini_racer/issues/289 which prevents `mini_racer` installing in the GitHub Actions ruby 3.0 or 3.1 environments - sadly upstream seem to have given up on it once they figured out 3.2 works but I managed to find a workaround after much digging.
You can view, comment on, or merge this pull request online at:

  https://github.com/openstreetmap/openstreetmap-website/pull/4353

-- Commit Summary --

  * Use rtlcss instead of r2 for RTL support
  * Fix positioning of placeholder text in RTL mode
  * Force rubygems 3.4.10 for github actions

-- File Changes --

    M .github/workflows/lint.yml (5)
    M .github/workflows/tests.yml (1)
    M Gemfile (4)
    M Gemfile.lock (8)
    M app/assets/stylesheets/common.scss (98)
    R app/assets/stylesheets/print-rtl.rtlcss.scss (0)
    R app/assets/stylesheets/screen-rtl.rtlcss.scss (0)
    D config/initializers/r2.rb (16)
    A config/initializers/rtlcss.rb (16)

-- Patch Links --

https://github.com/openstreetmap/openstreetmap-website/pull/4353.patch
https://github.com/openstreetmap/openstreetmap-website/pull/4353.diff

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

Message ID: <openstreetmap/openstreetmap-website/pull/4353 at github.com>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20231118/68522d12/attachment.htm>