[openstreetmap/openstreetmap-website] Set dir="auto" on changeset comment bodies (Issue #5785)

[Nitai Sasson]

NeatNit created an issue (openstreetmap/openstreetmap-website#5785)

### URL

https://www.openstreetmap.org/changeset/163401189

### How to reproduce the issue?

This is a sub-issue of #3428.

Some keywords for search: RTL bidi bidirectional LTR

Comments inherit the directionality of the entire website instead of the directionality of their content. Example screenshot:

![Image](https://github.com/user-attachments/assets/db2127c5-cb13-436b-969c-1a9e095bc1a3)

Each comment should have `dir="auto"` in its HTML. Poking around the source (which I have never worked with before, so this may be wrong), I think I've found the relevant code:

https://github.com/openstreetmap/openstreetmap-website/blob/a0768a4d04d3eb5afa9e8864b8fc73a64286bf2c/app/views/changesets/show.html.erb#L62-L64

So there is a "band-aid" solution and a more involved "full" solution that would produce better results.

Band-aid solution takes two steps:
1. Add `dir="auto"` to the above snippet:
    ```erb
          <div class="mx-2" dir="auto">
            <%= comment.body.to_html %>
          </div>
    ```
2. Add `text-align: start;` to the `mx-2` class CSS.

Result:

![Image](https://github.com/user-attachments/assets/4cf22bf6-d99a-473a-b8b3-e907fe35fdc8)

Perfect.

The full solution would take into account the fact that different paragraphs should have different directionality. For example, if I write:

```
This line is English and should be LTR.

השורה הזאת בעברית וצריכה להיות מימין לשמאל.

השורה הזאת מערבבת LTR ו-RTL אבל מתחילה ב-RTL ולכן צריכה להיות מימין לשמאל.
```

Github would render it correctly:

> This line is English and should be LTR.
> 
> השורה הזאת בעברית וצריכה להיות מימין לשמאל.
> 
> השורה הזאת מערבבת LTR ו-RTL אבל מתחילה ב-RTL ולכן צריכה להיות מימין לשמאל.

Each of these lines is `<p dir="auto">` so behaves correctly.

However it seems that `comment.body.to_html` *does not* split the text into different `<p>` elements, it's instead a single `<p>` with a single text block containing `<br />` for line splits. **This is not usable for expected formatting.** You would have to replace this function with one that produces separate elements (preferably `<p>`), each with `dir="auto"`. Couple with appropriate `text-align` CSS property, and the result would be ideal.

I know that changeset comments are not Markdown and should not be parsed as such, but for acceptable results they have to at least be split into `<p>` elements instead of using `<br /`>. You can use styling to make it appear visually the same as before.

### Screenshot(s) or anything else?

_No response_

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

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