<p dir="auto">This PR reworks how we handle RTL support to try and fix some of the outstanding issues.</p>
<p dir="auto">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.</p>
<p dir="auto">Upstream bootstrap uses <a href="https://rtlcss.com/" rel="nofollow">RTLCSS</a> 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 <code class="notranslate">bootstrap.css</code> and <code class="notranslate">bootstrap.rtl.css</code> which has been processed by RTLCSS to produce an RTL version.</p>
<p dir="auto">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.</p>
<p dir="auto">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.</p>
<p dir="auto">That still didn't <span class="issue-keyword tooltipped tooltipped-se" aria-label="This pull request closes issue #3910.">fix</span> <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="1557854323" data-permission-text="Title is private" data-url="https://github.com/openstreetmap/openstreetmap-website/issues/3910" data-hovercard-type="issue" data-hovercard-url="/openstreetmap/openstreetmap-website/issues/3910/hovercard" href="https://github.com/openstreetmap/openstreetmap-website/issues/3910">#3910</a> 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.</p>
<p dir="auto">After all that I hit <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="1770541674" data-permission-text="Title is private" data-url="https://github.com/rubyjs/mini_racer/issues/289" data-hovercard-type="issue" data-hovercard-url="/rubyjs/mini_racer/issues/289/hovercard" href="https://github.com/rubyjs/mini_racer/issues/289">rubyjs/mini_racer#289</a> which prevents <code class="notranslate">mini_racer</code> 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.</p>
<hr>
<h4>You can view, comment on, or merge this pull request online at:</h4>
<p> <a href='https://github.com/openstreetmap/openstreetmap-website/pull/4353'>https://github.com/openstreetmap/openstreetmap-website/pull/4353</a></p>
<h4>Commit Summary</h4>
<ul>
<li><a href="https://github.com/openstreetmap/openstreetmap-website/pull/4353/commits/a328ec84a2bc19af6d6fd36b57bbbc7fc59bde9e" class="commit-link">a328ec8</a> Use rtlcss instead of r2 for RTL support</li>
<li><a href="https://github.com/openstreetmap/openstreetmap-website/pull/4353/commits/b45bce337023350531e034dc40e729d76d2e150f" class="commit-link">b45bce3</a> Fix positioning of placeholder text in RTL mode</li>
<li><a href="https://github.com/openstreetmap/openstreetmap-website/pull/4353/commits/6cd9caa4e1c1279f06e5aae2c19426af5dbef3df" class="commit-link">6cd9caa</a> Force rubygems 3.4.10 for github actions</li>
</ul>
<h4 style="display: inline-block">File Changes </h4> <p style="display: inline-block">(<a href="https://github.com/openstreetmap/openstreetmap-website/pull/4353/files">9 files</a>)</p>
<ul>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/4353/files#diff-107e910e9f2ebfb9a741fa10b2aa7100cc1fc4f5f3aca2dfe78b905cbd73c0d2">.github/workflows/lint.yml</a>
(5)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/4353/files#diff-1db27d93186e46d3b441ece35801b244db8ee144ff1405ca27a163bfe878957f">.github/workflows/tests.yml</a>
(1)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/4353/files#diff-d09ea66f8227784ff4393d88a19836f321c915ae10031d16c93d67e6283ab55f">Gemfile</a>
(4)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/4353/files#diff-89cade48462044ee1b672dc5f4c3ec250fbd29effcd8932096a23c1283c6731f">Gemfile.lock</a>
(8)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/4353/files#diff-e86a39e6d0b163f152db8843fc7d647a3f5d648de4a74f1732bef4474b6e5bc8">app/assets/stylesheets/common.scss</a>
(98)
</li>
<li>
<strong>R</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/4353/files#diff-a59894c1e6a222e744e049ecb287f7e5d8e5eaa2ee2a33703e52f1d30b20e258">app/assets/stylesheets/print-rtl.rtlcss.scss</a>
(0)
</li>
<li>
<strong>R</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/4353/files#diff-8fc6c67a892f90f5336824019ace8ffb32c9d560a4bf8b76faf921858fc65230">app/assets/stylesheets/screen-rtl.rtlcss.scss</a>
(0)
</li>
<li>
<strong>D</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/4353/files#diff-6ea162069cff504ef21a1d4fd1b23634afbc4304434259bc86ba7e3b30425eb2">config/initializers/r2.rb</a>
(16)
</li>
<li>
<strong>A</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/4353/files#diff-943d118e6d3def88bfb4eda0f381aa3bf5b953c816ed580ebe26d3b35992c638">config/initializers/rtlcss.rb</a>
(16)
</li>
</ul>
<h4>Patch Links:</h4>
<ul>
<li><a href='https://github.com/openstreetmap/openstreetmap-website/pull/4353.patch'>https://github.com/openstreetmap/openstreetmap-website/pull/4353.patch</a></li>
<li><a href='https://github.com/openstreetmap/openstreetmap-website/pull/4353.diff'>https://github.com/openstreetmap/openstreetmap-website/pull/4353.diff</a></li>
</ul>
<p style="font-size:small;-webkit-text-size-adjust:none;color:#666;">—<br />Reply to this email directly, <a href="https://github.com/openstreetmap/openstreetmap-website/pull/4353">view it on GitHub</a>, or <a href="https://github.com/notifications/unsubscribe-auth/AAK2OLLIFURE5ZRGQVI2HRDYFCKQPAVCNFSM6AAAAAA7Q446M6VHI2DSMVQWIX3LMV43ASLTON2WKOZSGAYDAMZXHA2DGNI">unsubscribe</a>.<br />You are receiving this because you are subscribed to this thread.<img src="https://github.com/notifications/beacon/AAK2OLOUZPZ7XT3FYSH6CVLYFCKQPA5CNFSM6AAAAAA7Q446M6WGG33NNVSW45C7OR4XAZNFJFZXG5LFVJRW63LNMVXHIX3JMTHHOO22IM.gif" height="1" width="1" alt="" /><span style="color: transparent; font-size: 0; display: none; visibility: hidden; overflow: hidden; opacity: 0; width: 0; height: 0; max-width: 0; max-height: 0; mso-hide: all">Message ID: <span><openstreetmap/openstreetmap-website/pull/4353</span><span>@</span><span>github</span><span>.</span><span>com></span></span></p>
<script type="application/ld+json">[
{
"@context": "http://schema.org",
"@type": "EmailMessage",
"potentialAction": {
"@type": "ViewAction",
"target": "https://github.com/openstreetmap/openstreetmap-website/pull/4353",
"url": "https://github.com/openstreetmap/openstreetmap-website/pull/4353",
"name": "View Pull Request"
},
"description": "View this Pull Request on GitHub",
"publisher": {
"@type": "Organization",
"name": "GitHub",
"url": "https://github.com"
}
}
]</script>