<p></p>
<h3 dir="auto">Description</h3>
<p dir="auto">I think we have a reasonably complex scenario, since we have lots of "mixed-direction" situations - where someone has the site set to a language in one direction (e.g. RTL) but is viewing content in another direction (e.g. LTR). This makes it different to many websites which are usually either one or the other, and so extra care is needed.</p>
<p dir="auto">"Mixed-direction"? For example, an Arabic speaker looking at map notes, or a French speaker viewing a Hebrew diary entry, or many other things like this. It's particularly hard for RTL users since much of the website user-generated-content (e.g. tag values) are in LTR text, and we currently set the whole page to be treated as RTL which then messes things up:</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer" href="https://user-images.githubusercontent.com/360803/150172981-d148522c-bd31-4d1e-966d-b8702938a40f.png"><img src="https://user-images.githubusercontent.com/360803/150172981-d148522c-bd31-4d1e-966d-b8702938a40f.png" alt="Screenshot from 2022-01-19 16-26-27" style="max-width: 100%;"></a></p>
<p dir="auto">Note how the placement of the punctuation is scrambled. The logic used by browsers is to work through the text, and if it's recognisably LTR characters it will keep them in the right order, but placing each chunk right-to-left. So it places following characters (e.g. punctuation) "after" the text, which makes it look garbled.<br>
<a target="_blank" rel="noopener noreferrer" href="https://user-images.githubusercontent.com/360803/150176437-6748fc41-9358-4fb2-90b1-315298d6b301.png"><img src="https://user-images.githubusercontent.com/360803/150176437-6748fc41-9358-4fb2-90b1-315298d6b301.png" alt="bitmap" style="max-width: 100%;"></a></p>
<p dir="auto">The first way that we can fix this is by putting <code>dir=auto</code> around any user-generated-content. We don't need to know or store language used for the UGC, since browsers will auto-detect based on the first indicative character found. Note that this means it happens element-by-element, so e.g. a diary entry with a paragraph in Arabic and another in English (or a blockquote, etc) will then work fine since the browser will auto-detect each individually. Setting <code>dir=auto</code> in this case gets us:</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer" href="https://user-images.githubusercontent.com/360803/150177141-879846f9-e0d5-4328-bd65-33c5c5c34ec0.png"><img src="https://user-images.githubusercontent.com/360803/150177141-879846f9-e0d5-4328-bd65-33c5c5c34ec0.png" alt="Screenshot from 2022-01-19 16-31-53" style="max-width: 100%;"></a></p>
<p dir="auto">That's already better. The text-alignment is still incorrect, but that'll be dealt with in a different issue.</p>
<h3 dir="auto">Screenshots</h3>
<p dir="auto"><em>No response</em></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/3428">view it on GitHub</a>, or <a href="https://github.com/notifications/unsubscribe-auth/AAK2OLLRJZ2HPIU7JBUGI6DUW3VHLANCNFSM5MKPNO4A">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/AAK2OLO2JO6ACB75MICJRBDUW3VHLA5CNFSM5MKPNO4KYY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4QQQAGMQ.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/3428</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/3428",
"url": "https://github.com/openstreetmap/openstreetmap-website/issues/3428",
"name": "View Issue"
},
"description": "View this Issue on GitHub",
"publisher": {
"@type": "Organization",
"name": "GitHub",
"url": "https://github.com"
}
}
]</script>