Set dir="auto" on all user-generated-content

[gravitystorm]

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:

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.

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:

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