<p>OSM uses the R2 gem to "flip" CSS for right-to-left languages. I have filed <a href="https://github.com/mzsanford/R2rb/issues/17">this bug</a> in their repo as well.</p>
<p>On the about page (screenshot attached) only one of the icons is visible for Arabic or other rtl languages. This is happening because R2 "flips" the background-position of the icons to an invalid value. One icon escapes because its background-position does not match the RegEx used by the gem.  Even if this were valid CSS, we would not want to change/flip our sprite coordinates.</p>
<p>My recommendation is to use 0 or possibly <code>-0px</code> instead of <code>0px</code> as the x-coordinate here until R2 has some change to avoid sprites.</p>
<p>OSM is already using this syntax (intentionally or not, I don't know) on icon.search which has <code>background-position: 0 0;</code></p>
<p><a href="https://user-images.githubusercontent.com/643918/28195348-55c28e64-67e5-11e7-8d2e-18dae72c350d.png" target="_blank"><img src="https://user-images.githubusercontent.com/643918/28195348-55c28e64-67e5-11e7-8d2e-18dae72c350d.png" alt="screen shot 2017-07-13 at 3 58 57 pm" style="max-width:100%;"></a></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/1585'>https://github.com/openstreetmap/openstreetmap-website/pull/1585</a></p>

<h4>Commit Summary</h4>
<ul>
  <li>Hide background-position from R2 CSS gem</li>
</ul>

<h4>File Changes</h4>
<ul>
  <li>
    <strong>M</strong>
    <a href="https://github.com/openstreetmap/openstreetmap-website/pull/1585/files#diff-0">app/assets/stylesheets/common.scss</a>
    (10)
  </li>
</ul>

<h4>Patch Links:</h4>
<ul>
  <li><a href='https://github.com/openstreetmap/openstreetmap-website/pull/1585.patch'>https://github.com/openstreetmap/openstreetmap-website/pull/1585.patch</a></li>
  <li><a href='https://github.com/openstreetmap/openstreetmap-website/pull/1585.diff'>https://github.com/openstreetmap/openstreetmap-website/pull/1585.diff</a></li>
</ul>

<p style="font-size:small;-webkit-text-size-adjust:none;color:#666;">—<br />You are receiving this because you are subscribed to this thread.<br />Reply to this email directly, <a href="https://github.com/openstreetmap/openstreetmap-website/pull/1585">view it on GitHub</a>, or <a href="https://github.com/notifications/unsubscribe-auth/ABWnLZ1-UxX3pGGCeHZ5IML0vmhiqPsPks5sNs24gaJpZM4OXvvI">mute the thread</a>.<img alt="" height="1" src="https://github.com/notifications/beacon/ABWnLSH5U-oD6_11WU3UTxfIv8fBjEQMks5sNs24gaJpZM4OXvvI.gif" width="1" /></p>
<div itemscope itemtype="http://schema.org/EmailMessage">
<div itemprop="action" itemscope itemtype="http://schema.org/ViewAction">
  <link itemprop="url" href="https://github.com/openstreetmap/openstreetmap-website/pull/1585"></link>
  <meta itemprop="name" content="View Pull Request"></meta>
</div>
<meta itemprop="description" content="View this Pull Request on GitHub"></meta>
</div>

<script type="application/json" data-scope="inboxmarkup">{"api_version":"1.0","publisher":{"api_key":"05dde50f1d1a384dd78767c55493e4bb","name":"GitHub"},"entity":{"external_key":"github/openstreetmap/openstreetmap-website","title":"openstreetmap/openstreetmap-website","subtitle":"GitHub repository","main_image_url":"https://cloud.githubusercontent.com/assets/143418/17495839/a5054eac-5d88-11e6-95fc-7290892c7bb5.png","avatar_image_url":"https://cloud.githubusercontent.com/assets/143418/15842166/7c72db34-2c0b-11e6-9aed-b52498112777.png","action":{"name":"Open in GitHub","url":"https://github.com/openstreetmap/openstreetmap-website"}},"updates":{"snippets":[{"icon":"DESCRIPTION","message":"Fix icons on RTL/Arabic About page (#1585)"}],"action":{"name":"View Pull Request","url":"https://github.com/openstreetmap/openstreetmap-website/pull/1585"}}}</script>