[openstreetmap/openstreetmap-website] Set dir="auto" on all user-generated-content (Issue #3428)

[Andy Allan]

### Description

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.

"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:

![Screenshot from 2022-01-19 16-26-27](https://user-images.githubusercontent.com/360803/150172981-d148522c-bd31-4d1e-966d-b8702938a40f.png)

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.
![bitmap](https://user-images.githubusercontent.com/360803/150176437-6748fc41-9358-4fb2-90b1-315298d6b301.png)

The first way that we can fix this is by putting `dir=auto` 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 `dir=auto` in this case gets us:

![Screenshot from 2022-01-19 16-31-53](https://user-images.githubusercontent.com/360803/150177141-879846f9-e0d5-4328-bd65-33c5c5c34ec0.png)

That's already better. The text-alignment is still incorrect, but that'll be dealt with in a different issue.

### Screenshots

_No response_

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

Message ID: <openstreetmap/openstreetmap-website/issues/3428 at github.com>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20220119/ce8b1df8/attachment.htm>