<p></p>
<p dir="auto">I'm saying "consider" here since I haven't researched enough to check that it's fully feasible.</p>
<p dir="auto">We use <a href="https://github.com/ded/R2">https://github.com/ded/R2</a> (technically <a href="https://github.com/mzsanford/R2rb">https://github.com/mzsanford/R2rb</a> ) for generating an RTL version of our CSS, with all the <code>left</code> swapped to <code>right</code> etc.</p>
<p dir="auto">However, with modern approaches to CSS and grid layouts, we might be able to drop the need for this altogether. Rather than e.g. float-left for user icons, I've been refactoring to use grid layouts where the first item comes first, and that's either left or right depending on the text direction. That approach makes the layout happen correctly automatically, without needing two CSS files for the different text directions. Understanding our direction-dependent CSS stuff is additional overhead for new developers.</p>
<p dir="auto">So we need to work through our CSS file, and remove any mentions of left and right (and any asymmetrical <code>padding</code> or <code>margin</code> combined declarations). See also <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="1109284901" data-permission-text="Title is private" data-url="https://github.com/openstreetmap/openstreetmap-website/issues/3432" data-hovercard-type="issue" data-hovercard-url="/openstreetmap/openstreetmap-website/issues/3432/hovercard" href="https://github.com/openstreetmap/openstreetmap-website/issues/3432">#3432</a>.</p>
<p dir="auto">(We also need to remove any direction-dependent margin and padding bootstrap classes that have crept in to use, of which there are a couple, but these aren't affected by r2 so can be dealt with separately).</p>
<p dir="auto">At that point, the only direction-dependent declarations will be things like icon-maps, which are surrounded by <code>no-r2</code> comments. If we make it to that point, then r2 can be dropped.</p>
<p dir="auto">After this, anything needing left or right can be dealt with by using CSS or grid concepts of start and end, and these will work regardless of text direction.</p>

<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/issues/3433">view it on GitHub</a>, or <a href="https://github.com/notifications/unsubscribe-auth/AAK2OLPCT6V7G4ZBXRRILDTUXAJ5XANCNFSM5MM3PLRA">unsubscribe</a>.<br />Triage notifications on the go with GitHub Mobile for <a href="https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675">iOS</a> or <a href="https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub">Android</a>.
<br />You are receiving this because you are subscribed to this thread.<img src="https://github.com/notifications/beacon/AAK2OLNFZAL3KKB263CXLUTUXAJ5XA5CNFSM5MM3PLRKYY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4QQ7K7TQ.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/issues/3433</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/issues/3433",
"url": "https://github.com/openstreetmap/openstreetmap-website/issues/3433",
"name": "View Issue"
},
"description": "View this Issue on GitHub",
"publisher": {
"@type": "Organization",
"name": "GitHub",
"url": "https://github.com"
}
}
]</script>